:root {
  --cream: #fff8ec;
  --paper: #fffdf7;
  --ink: #4a3b52;
  --muted: #8a7a90;
  --line: #ecdcc4;
  --pink: #ff8fb1;
  --pink-dark: #e0628a;
  --gold: #f6c453;
  --purple: #9c8cf0;
  --mint: #8fd6a8;
  --shadow: 0 6px 18px rgba(90, 60, 80, .16);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Quicksand", "Comic Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body {
  margin: 0; height: 100%;
  background: #9fd8ff;
  color: var(--ink);
  font-family: var(--font);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ───────── HUD ───────── */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  pointer-events: none;
}
.res-bar, .hud-btns { display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  background: rgba(255, 253, 247, .92); border: 2px solid var(--line);
  box-shadow: var(--shadow); font-weight: 700; font-size: 15px; color: var(--ink);
  font-family: inherit;
}
.chip .ic { font-size: 18px; line-height: 1; }
.chip b { min-width: 1.6em; font-variant-numeric: tabular-nums; }
.hud-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--line); background: rgba(255, 253, 247, .92);
  font-size: 20px; cursor: pointer; box-shadow: var(--shadow); padding: 0;
  transition: transform .12s;
}
.hud-btn:active { transform: scale(.9); }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--pink-dark); color: #fff; font-size: 12px; font-weight: 800;
  display: grid; place-items: center; animation: bounce 1s ease-in-out infinite;
}
#tracker {
  position: absolute; z-index: 4; left: calc(10px + env(safe-area-inset-left));
  top: calc(58px + env(safe-area-inset-top));
  max-width: min(78vw, 360px); padding: 6px 12px; border-radius: 12px;
  border: 2px solid var(--line); background: rgba(255, 253, 247, .85);
  font: 600 13px var(--font); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tracker.done { background: #fff3c4; border-color: var(--gold); animation: glow 1.6s ease-in-out infinite; }

/* ───────── stage ───────── */
#stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.b-label { font: 700 13px var(--font); fill: #6b4a2c; }
.b-cost { font: 700 13px var(--font); fill: #6b4a2c; }
.building, .egg, .dragon, [data-sign], [data-moon], [data-sun] { cursor: pointer; }
.dragon { cursor: grab; }
.dragon.held { cursor: grabbing; }

.building.target, .egg.target, .dragon.target { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 6px #ffd6e2); }
.dragon.held { filter: drop-shadow(0 14px 6px rgba(0, 0, 0, .18)); }

/* dragons */
.d-inner { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.dragon.walk .d-inner { animation: hop .42s ease-in-out infinite; }
.dragon.work .d-inner { animation: work .9s ease-in-out infinite; }
.dragon.held .d-inner { animation: dangle .7s ease-in-out infinite; transform-origin: 50% 30%; }
.dragon.nap .d-inner { animation: breathe 5s ease-in-out infinite; }
.d-wing { transform-box: fill-box; transform-origin: 100% 100%; animation: flap 2.8s ease-in-out infinite; }
.d-wing-back { animation-delay: -.15s; }
.dragon.walk .d-wing, .dragon.held .d-wing { animation-duration: .32s; }
.d-tail { transform-box: fill-box; transform-origin: 100% 70%; animation: wag 1.9s ease-in-out infinite; }
.dragon.work .d-tail { animation-duration: .7s; }
.d-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5.5s infinite; }
.d-shadow { transition: opacity .2s; }
.dragon.held .d-shadow { opacity: 0; }
.d-shiny { animation: twinkle 1.4s ease-in-out infinite; }
.zzz { font: 700 16px var(--font); fill: #6b7bd6; animation: zzz 2.4s ease-in-out infinite; }
.zzz.z2 { animation-delay: -1.2s; }

@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes work { 0%, 100% { transform: rotate(0); } 30% { transform: translateY(-4px) rotate(-6deg); } 60% { transform: rotate(4deg); } }
@keyframes dangle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes wag { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(9deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }

/* speech bubbles */
.bubble-text { font: 700 12.5px var(--font); fill: var(--ink); }
.bubble-pop { animation: pop .25s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* eggs */
.egg-wobble { transform-box: fill-box; transform-origin: 50% 100%; animation: wobble 3.6s ease-in-out infinite; }
.egg-wobble.warm { animation-duration: 1.6s; }
.egg-wobble.ready { animation: wobble-hard .6s ease-in-out infinite; }
.egg-wobble.poke { animation: poke .35s ease-out; }
.egg-ready { animation: bounce 1s ease-in-out infinite; }
@keyframes wobble { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
@keyframes wobble-hard { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes poke { 0% { transform: scale(1.12, .88); } 60% { transform: scale(.95, 1.06); } 100% { transform: scale(1); } }

/* buildings */
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.ripple { transform-box: fill-box; transform-origin: center; animation: ripple 3s ease-out infinite; }
.ripple.r2 { animation-delay: -1.5s; }
@keyframes ripple { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.jumpfish { animation: jumpfish 9s ease-in-out infinite; opacity: 0; }
@keyframes jumpfish {
  0%, 80% { transform: translate(-40px, 0) rotate(0); opacity: 0; }
  82% { transform: translate(-40px, -4px) rotate(-40deg); opacity: 1; }
  88% { transform: translate(-10px, -42px) rotate(0); opacity: 1; }
  94% { transform: translate(20px, -4px) rotate(40deg); opacity: 1; }
  96%, 100% { transform: translate(20px, 4px) rotate(40deg); opacity: 0; }
}
.mono-glow { animation: glowpulse 4s ease-in-out infinite; }
@keyframes glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.runes { animation: glowpulse 3s ease-in-out infinite; }
.mote { animation: mote 5s ease-in-out infinite; }
.mote.m1 { animation-delay: -1s; } .mote.m2 { animation-delay: -2s; } .mote.m3 { animation-delay: -3s; } .mote.m4 { animation-delay: -4s; }
@keyframes mote { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-16px); opacity: 1; } }
.smoke circle { animation: smoke 4s ease-out infinite; }
.smoke circle:nth-child(2) { animation-delay: -1.3s; } .smoke circle:nth-child(3) { animation-delay: -2.6s; }
@keyframes smoke { 0% { transform: translate(0, 10px) scale(.6); opacity: 0; } 30% { opacity: .7; } 100% { transform: translate(8px, -16px) scale(1.2); opacity: 0; } }
.hut { transform-box: fill-box; transform-origin: 50% 100%; }
.hut.love { animation: rattle .5s ease-in-out infinite; }
@keyframes rattle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-1.4deg) scale(1.01, .99); } 75% { transform: rotate(1.4deg) scale(.99, 1.01); } }
.plot { animation: glowpulse 3s ease-in-out infinite; }

/* sky */
.cloud { animation: drift 120s linear infinite; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(calc(var(--W, 1400) * 1px + 160px)); } }
.sunrays { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.twinkle { animation: twinkle 3.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.firefly { animation: firefly 6s ease-in-out infinite; }
@keyframes firefly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(18px, -14px); opacity: .4; } 75% { transform: translate(-10px, -24px); opacity: 1; } }
.shoot { animation: shoot 1.1s ease-in forwards; }
@keyframes shoot { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(-260px, 70px); opacity: 0; } }

/* floating texts */
.floater { font: 800 17px var(--font); fill: #5a3e2b; paint-order: stroke; stroke: #fff; stroke-width: 4px; animation: floatup 1.5s ease-out forwards; }
.floater.heart { font-size: 20px; animation-duration: 1.7s; }
@keyframes floatup { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 0), -60px); opacity: 0; } }
.burst { font-size: 20px; animation: burst 1.2s ease-out forwards; }
@keyframes burst { from { transform: translate(0, 0) scale(.5); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }

/* ───────── snack tray ───────── */
#tray {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 248, 236, .9); border: 2px solid var(--line); box-shadow: var(--shadow);
  max-width: calc(100vw - 20px);
}
.tray-label { font-weight: 800; font-size: 13px; color: #9a6b3c; white-space: nowrap; }
.tray-hint { font-size: 11px; color: var(--muted); white-space: nowrap; }
#foods { display: flex; gap: 6px; }
.chip.food { cursor: grab; touch-action: none; font-size: 16px; padding: 7px 13px 7px 10px; }
.chip.food .ic { font-size: 22px; }
.chip.food:active { cursor: grabbing; transform: scale(1.05); }
#ghost {
  position: fixed; left: -22px; top: -48px; z-index: 50; font-size: 40px; pointer-events: none;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .2));
}

/* ───────── toasts ───────── */
#toasts {
  position: absolute; z-index: 20; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: min(92vw, 440px); pointer-events: none;
}
.toast {
  padding: 9px 16px; border-radius: 16px; background: var(--paper); border: 2px solid var(--line);
  box-shadow: var(--shadow); font-size: 14px; font-weight: 600; text-align: center;
  animation: toastin .3s ease-out; transition: opacity .4s, transform .4s;
}
.toast.gold { background: #fff6d6; border-color: var(--gold); }
.toast.love { background: #ffe8f0; border-color: var(--pink); }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* ───────── bottom sheet ───────── */
#sheet {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(60, 40, 70, 0); transition: background .2s;
  display: flex; align-items: flex-end; justify-content: center;
}
#sheet.open { background: rgba(60, 40, 70, .28); }
.sheet-card {
  position: relative; width: min(100%, 560px); max-height: 86%;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); border-radius: 26px 26px 0 0; border: 3px solid var(--line); border-bottom: 0;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(60, 40, 70, .2);
  transform: translateY(100%); transition: transform .22s ease-out;
  -webkit-user-select: text; user-select: text;
}
#sheet.open .sheet-card { transform: none; }
@media (min-width: 700px) and (min-height: 560px) {
  #sheet { align-items: center; }
  .sheet-card { border-radius: 26px; border-bottom: 3px solid var(--line); max-height: 84%; }
}
.close {
  position: sticky; top: 0; float: right; margin: -6px -6px 0 8px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
  font-size: 16px; cursor: pointer; color: var(--muted);
}
.sheet-body h2 { margin: 2px 0 8px; font-size: 22px; }
.sheet-body h2 small { font-size: 14px; color: var(--muted); font-weight: 700; }
.sheet-body h3 { margin: 18px 0 8px; font-size: 15px; color: #9a6b3c; text-transform: uppercase; letter-spacing: .04em; }
.sheet-body p { margin: 6px 0; line-height: 1.45; font-size: 15px; }
.muted { color: var(--muted); font-size: 14px !important; }
.center { text-align: center; justify-content: center; }
.lore { background: var(--paper); border: 2px dashed var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px !important; font-style: italic; }
.lore.legend { border-color: var(--gold); background: #fff9e3; }
.legend-title { color: #b5852a; font-weight: 800; margin: -4px 0 6px; }

.btn {
  font: 700 15px var(--font); color: var(--ink);
  padding: 10px 16px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--paper); cursor: pointer; box-shadow: 0 3px 0 var(--line);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pink { background: var(--pink); border-color: var(--pink-dark); color: #fff; box-shadow: 0 3px 0 var(--pink-dark); }
.btn.purple { background: var(--purple); border-color: #6f5fd0; color: #fff; box-shadow: 0 3px 0 #6f5fd0; }
.btn.ghost { background: transparent; }
.btn.danger { color: #c4466b; border-color: #f0b2c4; }
.btn.danger:not(.ghost) { background: #ffe1ea; }
.btn.big { font-size: 17px; padding: 12px 22px; }
.btn.small { font-size: 13px; padding: 6px 10px; border-radius: 10px; }
.btn small { opacity: .7; margin-left: 2px; }
.icon-btn { border: 0; background: none; font-size: 16px; cursor: pointer; padding: 2px 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.dragon-head { display: flex; gap: 14px; align-items: center; }
.portrait { flex: none; width: 108px; height: 108px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #fff 0, #e9f6dd 70%); border: 3px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.portrait svg { width: 100px; height: 100px; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tags span { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #f3e6d2; }
.tags .shiny { background: #fff1b8; }
.job { font-size: 13px !important; color: var(--muted); margin: 6px 0 0 !important; }

.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.meters label { font-size: 13px; font-weight: 700; display: grid; gap: 4px; }
.bar { height: 12px; border-radius: 999px; background: #efe2cf; overflow: hidden; border: 2px solid #e6d3b8; }
.bar.thin { height: 8px; border-width: 1.5px; }
.fillbar { height: 100%; width: 0; border-radius: inherit; background: var(--mint); transition: width .4s; }
.tummy .fillbar { background: linear-gradient(90deg, #ffb36b, #ffd36b); }
.mood .fillbar { background: linear-gradient(90deg, #ff8fb1, #ffb3c8); }
.xp .fillbar { background: linear-gradient(90deg, #9c8cf0, #c2b6ff); }
.warm .fillbar { background: linear-gradient(90deg, #ffb36b, #ff7a6b); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 3px; font-size: 14px; }
.stat .bar { grid-column: 1 / -1; }
.skills { display: grid; gap: 8px; }
.skill span { font-size: 14px; }
.skill small, .worker small { color: var(--muted); }

.prodline { padding: 8px 12px; border-radius: 12px; background: var(--paper); border: 2px solid var(--line); font-size: 15px; }
.workers, .eggs, .dlist { display: grid; gap: 6px; }
.worker, .egg-row, .drow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--paper); border: 2px solid var(--line); }
.worker > div, .egg-row > div, .drow > div:nth-child(2) { flex: 1; display: grid; gap: 3px; }
.worker, .drow { cursor: pointer; }
.drow small { font-size: 12px; }
.tummy-mini { width: 70px; font-size: 12px; display: grid; gap: 2px; }
.tummy-mini .fillbar { background: linear-gradient(90deg, #ffb36b, #ffd36b); }
.mini.flip { transform: scaleX(-1); }
.love-note { background: #ffe8f0; border-radius: 12px; padding: 8px 12px; }

.quest { padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 2px solid var(--line); margin-bottom: 8px; }
.quest.ok { border-color: var(--gold); background: #fffbea; }
.qtop, .qbot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qtop small { white-space: nowrap; font-weight: 700; }
.quest p { font-size: 14px !important; }
.qbot { margin-top: 6px; }

.love-hero, .hatch-hero { display: flex; justify-content: center; align-items: center; gap: 4px; }
.hatch-hero svg { width: 150px; height: 150px; animation: pop .5s ease-out; }
.big-heart { font-size: 34px; animation: bounce 1s ease-in-out infinite; }

.rename { display: flex; gap: 8px; margin-top: 12px; }
.rename input, textarea {
  flex: 1; min-width: 0; font: 600 16px var(--font); color: var(--ink);
  padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff;
}
textarea { width: 100%; font-size: 12px; resize: vertical; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-weight: 700; }
.row input[type=range] { flex: 1; max-width: 220px; accent-color: var(--pink); }
.row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pink); }
.gains { display: flex; flex-wrap: wrap; gap: 6px; }
.credits { margin-top: 18px !important; text-align: center; color: var(--muted); font-size: 12px !important; }

/* ───────── splash ───────── */
#splash {
  position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #fff6e8 0, #ffe0ea 45%, #cfe9ff 100%);
  transition: opacity .5s, transform .5s;
}
#splash.gone { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-inner { text-align: center; padding: 20px; }
.splash-svg { width: min(80vw, 380px); height: auto; overflow: visible; }
.splash-img { width: auto; height: auto; max-width: min(86vw, 560px); max-height: 46vh; border-radius: 24px; display: block; margin: 0 auto; box-shadow: 0 10px 30px rgba(150, 90, 140, .25); }
#splash h1 { margin: 6px 0 4px; font-size: clamp(34px, 8vw, 56px); color: #6b4a7a; letter-spacing: .01em; text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(150, 90, 140, .25); }
.tagline { margin: 0; font-size: 18px; color: #8a6a90; font-weight: 700; }
.tap { margin-top: 26px; font-size: 16px; font-weight: 800; color: var(--pink-dark); animation: glowtext 1.8s ease-in-out infinite; }

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 196, 83, .0), var(--shadow); } 50% { box-shadow: 0 0 0 5px rgba(246, 196, 83, .45), var(--shadow); } }
@keyframes glowtext { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 520px) {
  .chip { font-size: 13px; padding: 3px 8px 3px 5px; }
  .chip .ic { font-size: 15px; }
  #res { max-width: calc(100vw - 230px); gap: 4px; }
  .hud-btns { gap: 4px; flex-wrap: nowrap; }
  .hud-btn { width: 36px; height: 36px; font-size: 17px; }
  .tray-hint { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .portrait { width: 88px; height: 88px; }
  .portrait svg { width: 82px; height: 82px; }
}
/* ───────── tutorial ───────── */
#tut {
  position: absolute; z-index: 25; left: 50%; transform: translateX(-50%);
  top: var(--hud-h, calc(58px + env(safe-area-inset-top))); width: min(92vw, 460px);
  padding: 12px 14px; border-radius: 18px; background: var(--paper); border: 3px solid var(--pink);
  box-shadow: var(--shadow); font-size: 15px; line-height: 1.4; animation: toastin .3s ease-out;
  transition: opacity .2s;
}
#tut.dim { opacity: 0; pointer-events: none; }
.tut-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.tut-skip { border: 0; background: none; color: var(--muted); font: 600 12px var(--font); cursor: pointer; text-decoration: underline; margin-left: auto; }
#paw {
  position: fixed; left: -18px; top: -14px; z-index: 40; font-size: 34px; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); transition: opacity .2s;
}

/* ───────── markers above dragons ───────── */
.mk-bob { animation: bounce 1.4s ease-in-out infinite; }
.mk-q { font: 900 15px var(--font); fill: #c98a12; }
.mk-star { transform-box: fill-box; transform-origin: center; animation: starpulse 1s ease-in-out infinite; }
@keyframes starpulse { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.18) rotate(6deg); } }
.dragon.buffed .d-inner { filter: drop-shadow(0 0 4px rgba(255, 200, 90, .7)); }

/* ───────── critters ───────── */
.bird { transform-box: fill-box; transform-origin: center; animation: birdflap .5s ease-in-out infinite; }
@keyframes birdflap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.6); } }
.far-dragon { opacity: .85; }
.glide { animation: bounce 3s ease-in-out infinite; }
.flutter { animation: flutter 9s ease-in-out infinite; }
@keyframes flutter {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(40px, -25px); } 45% { transform: translate(80px, 5px); }
  70% { transform: translate(30px, 20px); } 85% { transform: translate(-20px, -10px); }
}
.bwing { transform-box: fill-box; transform-origin: 100% 50%; animation: bwing .25s ease-in-out infinite; }
.bwing.r { transform-origin: 0% 50%; }
@keyframes bwing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.3); } }
.hover { animation: hover 6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(18px, -8px); } 60% { transform: translate(-10px, 6px); } }
.dwing { transform-box: fill-box; transform-origin: center; animation: birdflap .08s linear infinite; }
.pfish { animation: swim 11s ease-in-out infinite; opacity: .85; }
.pfish.f2 { animation-duration: 14s; animation-delay: -5s; }
.pfish.f3 { animation-duration: 9s; animation-delay: -2s; }
@keyframes swim {
  0% { transform: translate(-55px, 0) scaleX(1); } 45% { transform: translate(55px, -6px) scaleX(1); }
  50% { transform: translate(58px, -4px) scaleX(-1); } 95% { transform: translate(-58px, 4px) scaleX(-1); }
  100% { transform: translate(-55px, 0) scaleX(1); }
}
.sausages { transform-box: fill-box; transform-origin: 50% 0; animation: sway 3s ease-in-out infinite; }
.flick { animation: flick .4s ease-in-out infinite alternate; }
@keyframes flick { from { opacity: .5; } to { opacity: 1; } }
.oven { animation: glowpulse 1.6s ease-in-out infinite; }
body.is-night .win { fill: #ffe08a; filter: drop-shadow(0 0 6px #ffcf5a); }
.building.can-build .plot { animation: glowpulse 1.2s ease-in-out infinite; filter: drop-shadow(0 0 8px #fff3a0); }

/* ───────── halloween ───────── */
.ghost { cursor: pointer; transition: opacity .4s, transform .4s; }
.ghost.poof { opacity: 0; pointer-events: none; }
.ghost-bob { animation: ghostbob 3.5s ease-in-out infinite; }
@keyframes ghostbob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -12px); } }
.batwing { transform-box: fill-box; transform-origin: 100% 50%; animation: bwing .18s ease-in-out infinite; }
.batwing.r { transform-origin: 0% 50%; }
body.is-night .jack { fill: #ffd36b; filter: drop-shadow(0 0 4px #ffb02e); }
body.halloween .hud-btn, body.halloween .chip { border-color: #f6c08a; }

/* ───────── sheet bits ───────── */
.cost { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cost .chip { box-shadow: none; font-size: 14px; }
.cost .chip.have { background: #eaf8e4; border-color: #b6e0a6; }
.cost .chip.lack { background: #ffe9ee; border-color: #f4b3c2; color: #b53a5c; }
.missing { color: #b53a5c; font-size: 14px !important; font-weight: 700; }
.wish { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 16px; background: #f4efff; border: 2px solid #d6c9ff; }
.wish.done { background: #fff6d6; border-color: var(--gold); }
.wish-ic { font-size: 28px; line-height: 1; }
.wish p { margin: 2px 0 6px !important; font-size: 14px !important; }
.wish > div:last-child { flex: 1; }
.tags .spec { background: #fff1b8; }
.tags .buff { background: #ffe3c4; }
.pantry { background: #eaf8e4; border-radius: 12px; padding: 8px 12px; font-size: 14px !important; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.recipe {
  display: grid; gap: 2px; justify-items: center; text-align: center; padding: 8px 6px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--paper); font: 600 13px var(--font); color: var(--ink); cursor: pointer;
}
.recipe.sel { border-color: var(--pink); background: #ffeef3; box-shadow: 0 0 0 3px #ffd6e2; }
.recipe small { font-size: 11px; }
.big { font-size: 26px; line-height: 1.1; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { font: 700 13px var(--font); padding: 7px 11px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); cursor: pointer; color: var(--ink); }
.tab.sel { background: var(--pink); border-color: var(--pink-dark); color: #fff; }
.pedia { display: grid; gap: 8px; }
.pedia-entry { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 14px; background: var(--paper); border: 2px solid var(--line); }
.pedia-entry > div { flex: 1; }
.pedia-entry p { margin: 3px 0 !important; }
.pedia-entry.unknown { opacity: .75; border-style: dashed; }
.pedia-entry svg { flex: none; }
.silhouette { filter: brightness(0) opacity(.2); }
.season-note { background: #fff0dc; border: 2px dashed #f6b26b; border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.quest.spooky { border-color: #f6b26b; background: #fff6ec; }
.chip.food.empty { opacity: .45; }
.chip.food.dish { background: #fff6e0; }
.drow .big { margin-left: auto; }

/* short landscape phones: snack basket moves to the left edge */
@media (max-height: 500px) and (orientation: landscape) {
  #tray { left: calc(10px + env(safe-area-inset-left)); top: 50%; bottom: auto; transform: translateY(-40%); flex-direction: column; border-radius: 22px; padding: 8px 6px; }
  #foods { flex-direction: column; }
  .tray-hint { display: none; }
  .tray-label { font-size: 11px; }
  #toasts { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }
}

/* the tutorial card moves away from whatever the paw points at */
#tut.low { top: auto; bottom: calc(74px + env(safe-area-inset-bottom)); }
body.tut-low #toasts { bottom: calc(210px + env(safe-area-inset-bottom)); }

/* dragon card: switch between dragons */
.dnav { display: flex; justify-content: center; align-items: center; gap: 14px; margin: -6px 40px 8px; font: 700 13px var(--font); color: var(--muted); }
.nav-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
  font: 800 22px/1 var(--font); color: var(--pink-dark); cursor: pointer; box-shadow: 0 3px 0 var(--line); padding-bottom: 3px;
}
.nav-btn:hover { background: #ffeef3; border-color: var(--pink); }
.nav-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

/* tooltips: hover / keyboard focus on desktop, tap on touch */
.has-tip { position: relative; cursor: help; border-radius: 10px; transition: background .15s; outline: none; }
.stat.has-tip { padding: 4px 6px; margin: -4px -6px; }
.has-tip:hover, .has-tip:focus-visible, .has-tip.show { background: #fff1d9; }
.tip {
  display: none; position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); min-width: 210px;
  padding: 9px 11px; border-radius: 12px; background: #4a3b52; color: #fff;
  font: 500 13px/1.4 var(--font); text-transform: none; letter-spacing: 0; box-shadow: var(--shadow);
  pointer-events: none; /* never block the buttons underneath */
}
.tip::before { content: ''; position: absolute; top: -6px; left: 18px; border: 6px solid transparent; border-top: 0; border-bottom-color: #4a3b52; }
.tip b { color: #ffd6e2; }
.tip i { color: #d8ccff; }
@media (hover: hover) { .has-tip:hover .tip { display: block; } }
.has-tip:focus-visible .tip, .has-tip.show .tip { display: block; }
.stats .stat:nth-child(even) .tip { left: auto; right: 0; }
.stats .stat:nth-child(even) .tip::before { left: auto; right: 18px; }
/* meters sit right above the action buttons, so their tips open upwards */
.tip-up .tip { top: auto; bottom: calc(100% + 6px); }
.tip-up .tip::before { top: auto; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #4a3b52; }
.meters label:nth-child(2) .tip { left: auto; right: 0; }
.meters label:nth-child(2) .tip::before { left: auto; right: 18px; }
.skill.has-tip { padding: 4px 6px; margin: -4px -6px; display: grid; gap: 3px; }
.goodat { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }
/* chips wrap on phones, so their tips span the whole row instead of hanging off a chip */
.goodat .chip.has-tip { position: static; box-shadow: none; font-size: 13px; font-weight: 600; }
.goodat .tip::before { display: none; }

/* resource tooltip (HUD materials + snack basket) */
#restip {
  position: fixed; left: 0; top: 0; z-index: 45; width: min(300px, calc(100vw - 16px));
  padding: 10px 12px; border-radius: 14px; background: #4a3b52; color: #fff; box-shadow: var(--shadow);
  font: 500 13px/1.4 var(--font); pointer-events: none;
}
#restip::before { content: ''; position: absolute; left: calc(var(--ax, 50%) - 7px); bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #4a3b52; }
#restip.below::before { bottom: auto; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #4a3b52; }
#restip p { margin: 4px 0 0; }
#restip b { color: #ffd6e2; }
#restip i { color: #d8ccff; }
.restip-head { display: flex; gap: 8px; align-items: center; }
.restip-head > div { display: grid; }
.restip-head small { color: #d8ccff; }
.restip-about { font-style: italic; color: #f3e8ff; }
#res .chip { cursor: help; }

/* dragon card tags: tips span the whole tag row so they never fall off the card */
.tags { position: relative; }
.tags .has-tip { position: static; cursor: help; }
.tags .has-tip:hover, .tags .has-tip.show, .tags .has-tip:focus-visible { background: #ffe3b8; }
.tags .tip { min-width: 0; background: #4a3b52; color: #fff; font: 500 13px/1.4 var(--font); padding: 9px 11px; border-radius: 12px; }
.tags .tip b { color: #ffd6e2; font-weight: 700; }
.tags .tip::before { display: none; }
.legend-title.has-tip { background: #fff1b8; color: #a0701a; margin: 0 0 4px; font-size: 13px; }
.tags .fav { background: #ffd6e2; color: #b53a5c; }
.tags .fav.unknown { background: #f3e6d2; color: var(--muted); }
.btn.fav { border-color: var(--pink); background: #fff0f5; box-shadow: 0 3px 0 var(--pink); position: relative; }
.btn.fav::after { content: '💕'; position: absolute; top: -9px; right: -7px; font-size: 14px; }
.goodat button.chip { cursor: pointer; font-family: inherit; }
.goodat button.chip:hover { border-color: var(--pink); background: #fff0f5; }
.goodat .chip.here { border-color: #8fd6a8; background: #eaf8e4; }
button.skill { width: calc(100% + 12px); text-align: left; font: inherit; color: inherit; border: 2px solid transparent; background: none; cursor: pointer; }
button.skill:hover { border-color: #ffd6e2; }
button.skill.here { border-color: #b6e0a6; background: #f2fbee; }