/*
  ================================================================
   BACKYARD BIRD FARM — style.css
  ================================================================
  The yard and the chickens are painted by game.js on a canvas.
  This file only styles the things that FLOAT on top:
  the glassy buttons, the hint bubble, and the pull-up sheets.

  "Glass" = a see-through, blurry panel (like the controls on an
  iPhone). It lets the farm show through behind it.
  ================================================================
*/

/* ---------- Colors & shared values (change these to re-theme) ---------- */
:root {
  --sky:        #8FD3F4;
  --meadow:     #7FB54A;
  --barn:       #C8452D;
  --barn-deep:  #A5361F;
  --straw:      #F2C14E;
  --ink:        #2F2A24;   /* main text: a warm, soft black */
  --ink-soft:   #75695C;
  --paper:      #FFFFFF;
  --glass:      rgba(255, 251, 242, .74);
  --glass-edge: rgba(255, 255, 255, .72);
  --sheet:      rgba(253, 249, 240, .95);
  --fill:       rgba(120, 104, 84, .12);
  --disabled:   #E4DCCE;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.2, .9, .25, 1.06);
  color-scheme: light;
}

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sky);
}

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ---------- The two drawing boards, stacked full-screen ---------- */
#stage {
  position: fixed;
  inset: 0;
  background: var(--sky);
}
#stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* the game handles every touch itself */
}
.in-coop #sky { opacity: 0; }

/* ---------- Glass: the frosted material every floating control uses ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid var(--glass-edge);
  box-shadow:
    0 8px 28px rgba(46, 34, 14, .16),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s var(--spring), background-color .2s, opacity .2s;
}
button:active:not(:disabled) { transform: scale(.93); }
button:focus-visible { outline: 3px solid var(--straw); outline-offset: 3px; }

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    0
    calc(env(safe-area-inset-left, 0px) + 16px);
  pointer-events: none;        /* let taps pass through the empty space... */
}
.hud > * { pointer-events: auto; }   /* ...but not through the buttons */

.pill {
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 0 14px;
}
.round {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.hud-right { margin-left: auto; display: flex; gap: 10px; }

.count {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  min-width: 1.2ch;
}
.basket-egg { display: block; }
.basket.bump { animation: bump .5s var(--spring); }
@keyframes bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.market-btn {
  font-size: 18px;
  font-weight: 800;
  padding: 0 20px 0 14px;
  color: var(--ink);
}

.back-btn {
  font-size: 18px;
  font-weight: 800;
  padding: 0 20px 0 12px;
  gap: 4px;
}

/* ---------- Title card ---------- */
.title-card {
  position: fixed;
  left: 16px;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 13vh);
  z-index: 5;
  text-align: center;
  pointer-events: none;
  transition: opacity .9s ease, transform .9s var(--spring);
}
.title-card.gone { opacity: 0; transform: translateY(-16px) scale(.98); }
.wordmark {
  margin: 0;
  font-weight: 900;
  font-size: clamp(46px, 8vw, 96px);
  line-height: .9;
  letter-spacing: -.045em;
  color: #FFFFFF;
  text-wrap: balance;
  text-shadow:
    0 2px 0 rgba(40, 80, 120, .12),
    0 14px 44px rgba(40, 80, 130, .35);
}
.tap-hint {
  margin: 22px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(40, 80, 130, .4);
  animation: breathe 2.6s ease-in-out infinite;
}
/* How to play offline: a little glass note under the title */
.offline-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px auto 0;
  max-width: min(520px, 100%);
  padding: 10px 18px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 6px 20px rgba(46, 34, 14, .14);
}
.offline-hint b { font-weight: 900; }
.offline-hint svg { vertical-align: -3px; }
.offline-hint a {
  pointer-events: auto;          /* the title ignores taps, but this link doesn't */
  color: var(--barn);
  font-weight: 900;
  text-decoration: none;
}
.offline-hint a:focus-visible { outline: 3px solid var(--straw); outline-offset: 3px; border-radius: 6px; }

@keyframes breathe {
  0%, 100% { opacity: .95; }
  50%      { opacity: .55; }
}

/* ---------- Coach mark (hint bubble) ---------- */
.coach {
  position: fixed;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(320px, 78vw);
  padding: 12px 18px 12px 14px;
  border-radius: 22px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
  animation: float 2.4s ease-in-out infinite;
}
.coach.below { transform: translate(-50%, 14px); }
.coach-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--barn);
  box-shadow: 0 0 0 0 rgba(200, 69, 45, .5);
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(200, 69, 45, .55); }
  100% { box-shadow: 0 0 0 12px rgba(200, 69, 45, 0); }
}
@keyframes float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -5px; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 78px);
  z-index: 15;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -10px) scale(.96);
  transition: opacity .3s ease, transform .45s var(--spring);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Sheets (iOS-style panels that slide up from the bottom) ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(34, 26, 14, .28);
  opacity: 0;
  transition: opacity .35s ease;
}
.scrim.show { opacity: 1; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 21;
  width: min(700px, 100%);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border-radius: 32px 32px 0 0;
  background: var(--sheet);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 -12px 48px rgba(46, 34, 14, .22);
  transform: translate(-50%, 105%);
  transition: transform .55s var(--spring);
  user-select: none;
}
.sheet.open { transform: translate(-50%, 0); }

.grabber {
  width: 40px;
  height: 5px;
  margin: 2px auto 10px;
  border-radius: 3px;
  background: rgba(60, 50, 40, .22);
  flex: none;
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: none;
  touch-action: none;           /* dragging here pulls the sheet down */
}
.sheet-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill);
  color: var(--ink-soft);
}
.sheet-note {
  margin: 10px 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 60ch;
  flex: none;
}

/* iOS segmented control */
.segmented {
  display: flex;
  padding: 2px;
  border-radius: 11px;
  background: rgba(118, 104, 88, .14);
}
.seg {
  height: 34px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-soft);
}
.seg.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}

/* ---------- Market grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px 2px 6px;
  min-height: 0;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 12px 12px;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 18px rgba(70, 50, 20, .08);
  text-align: center;
  min-width: 0;
}
.tile.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  text-align: left;
  gap: 16px;
  padding: 14px 16px;
}
.tile.wide .tile-text { flex: 1; min-width: 0; }
.tile.locked { opacity: .62; }
.tile canvas { display: block; max-width: 100%; }
.portrait-sm { width: 120px; height: 96px; }
.coop-mini   { width: 132px; height: 104px; flex: none; }
.tile-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 50px;
  line-height: 70px;
  height: 70px;
}
.tile-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.tile-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.tile.wide .tile-sub { justify-content: flex-start; }
.tile.wide .tile-name { font-size: 20px; }

.egg-dot {
  display: inline-block;
  width: 11px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  box-shadow: inset -1.5px -2px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .15);
  vertical-align: -2px;
}

.buy {
  margin-top: 8px;
  width: 100%;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--barn);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.tile.wide .buy { width: auto; min-width: 120px; padding: 0 18px; margin: 0; flex: none; }
.buy:disabled {
  background: var(--disabled);
  color: #978B7A;
  cursor: default;
}
.buy .egg-dot { background: #FFF6E6; }
.buy:disabled .egg-dot { background: #F5EFE4; }

/* ---------- Chicken card ---------- */
.card { max-width: 560px; }
.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card-body {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.portrait-lg {
  width: 190px;
  height: 160px;
  flex: none;
  border-radius: 26px;
  background: linear-gradient(#DDF2FB, #C9E7B0);
}
.card-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}
#nameInput {
  font: inherit;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  padding: 6px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
#nameInput:focus { outline: 3px solid var(--straw); outline-offset: 0; background: var(--paper); }
#nameInput {
  -webkit-user-select: text !important;   /* iPhones need this for typing and deleting to work */
  padding-right: 44px;                     /* room for the clear button */
}
#nameInput::placeholder { color: #B3A898; font-weight: 800; }
.name-row { display: flex; align-items: center; gap: 8px; }
.name-field { position: relative; flex: 1; min-width: 0; }
.name-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #B3A898;
}
.name-clear:active:not(:disabled) { transform: translateY(-50%) scale(.9); }
.name-done {
  flex: none;
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--barn);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 900;
}
/* While typing on a short screen (a phone held sideways), keep the card
   small so it fits above the keyboard */
@media (max-height: 560px) {
  .card.editing .portrait-lg,
  .card.editing .card-mood,
  .card.editing .card-stats,
  .card.editing .grow-bar { display: none; }
  .card.editing { padding-bottom: 12px; }
}

/* ---------- "Turn your phone sideways" (phones held upright) ---------- */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 699px) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    text-align: center;
    color: var(--ink);
    background: rgba(143, 211, 244, .9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .rotate-hint svg { animation: tilt 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
  .rotate-hint p { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
}
@keyframes tilt {
  0%, 30%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
.card-mood  { margin: 4px 0 0; font-size: 19px; font-weight: 800; }
.card-stats { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.grow-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--fill);
  overflow: hidden;
}
.grow-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--straw), #F5A623);
  transition: width .4s ease;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 520px) {
  .sheet { padding-left: 16px; padding-right: 16px; }
  .sheet-head h2 { font-size: 26px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .tile.wide { flex-direction: column; text-align: center; }
  .tile.wide .tile-sub { justify-content: center; }
  .tile.wide .buy { width: 100%; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .tap-hint, .coach, .coach-dot, .rotate-hint svg { animation: none; }
  .sheet, .toast, .title-card { transition-duration: .01s; }
}

/* ---------- Farm button (which farm you're on) ---------- */
.farm-btn {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  padding: 0 20px 0 14px;
  color: var(--ink);
  max-width: 42vw;
}
.farm-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a little red dot when eggs are waiting at a farm you're NOT on */
.farm-btn.has-eggs::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--barn);
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* ---------- Market: a heading for each farm ---------- */
.grid-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.grid-head:first-child { padding-top: 0; }
.grid-head span { font-size: 14px; font-weight: 800; color: var(--ink-soft); letter-spacing: 0; }
.buy.unlock { background: var(--ink); }

/* ---------- Map of farms ---------- */
.farm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 4px 6px;
  min-height: 0;
}
.farm-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 12px;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 18px rgba(70, 50, 20, .08);
}
.farm-card.here { box-shadow: 0 0 0 3px var(--straw), 0 6px 18px rgba(70, 50, 20, .1); }
.farm-mini {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 18px;
}
.farm-card.locked .farm-mini { filter: saturate(.3) brightness(1.06); }
.farm-name { padding: 2px 6px 0; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.farm-sub  { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); min-height: 1.4em; }
.farm-card .buy { margin-top: 4px; }
.buy.visit { background: #3E8E4A; }
.buy.here-btn:disabled { background: var(--straw); color: var(--ink); }

/* ---------- Sticker book button (a red dot when there's a new sticker) ---------- */
.book-btn { position: relative; }
.book-btn.new::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--barn);
  box-shadow: 0 0 0 2px #FFFFFF;
}
.book-btn.wiggle { animation: wiggle .7s var(--spring); }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.1); }
  60% { transform: rotate(9deg) scale(1.08); }
}

/* a scrolling area inside a sheet */
.sheet-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
  padding: 2px 2px 6px;
}

/* ---------- Incubator ---------- */
.hatch-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 12px;
  border-radius: 24px;
  background: linear-gradient(#FFF7EA, #FFFFFF);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 18px rgba(70, 50, 20, .08);
}
.slot.empty { background: var(--fill); box-shadow: none; }
.slot.ready { box-shadow: 0 0 0 3px var(--straw), 0 6px 22px rgba(242, 193, 78, .45); }
.slot-egg { width: 150px; height: 120px; max-width: 100%; display: block; cursor: pointer; touch-action: manipulation; }
.slot-label { font-size: 15px; font-weight: 900; text-align: center; min-height: 1.3em; }
.slot-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.slot-bar span { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, #F2C14E, #F28A2E); transition: width .4s ease; }
.slot.empty .slot-bar { visibility: hidden; }
.slot-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: #3E3A36;
  color: #FFF4D6;
  font-size: 15px;
  font-weight: 800;
}
.hatch-pick { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; }
.pick-head { flex-basis: 100%; font-size: 18px; font-weight: 900; }
.pick-empty { flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.pick-egg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 12px rgba(70, 50, 20, .08);
  font-size: 15px;
  font-weight: 800;
}
.pick-egg:disabled { opacity: .45; }
.pick-egg .egg-dot { width: 18px; height: 23px; }
.pick-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--barn);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 900;
}
.pick-cost .egg-dot { width: 10px; height: 13px; background: #FFF6E6; }

/* ---------- Candling (dark room, glowing egg) ---------- */
.candle {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: radial-gradient(circle at 50% 55%, #3A2616 0%, #120B06 70%);
  color: #FFE9C2;
  text-align: center;
}
#candleCanvas { width: 240px; height: 280px; max-height: 55vh; max-width: 100%; }
.candle-text { margin: 0; max-width: 34ch; font-size: 19px; font-weight: 800; line-height: 1.35; text-wrap: balance; }
.candle-done {
  height: 46px;
  padding: 0 28px;
  border-radius: 16px;
  background: #FFE9C2;
  color: #3A2616;
  font-size: 17px;
  font-weight: 900;
}

/* ---------- Sticker book ---------- */
.book-count {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--straw);
  font-size: 14px;
  font-weight: 900;
}
.book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 22px;
  background: var(--paper);
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 8px 18px rgba(70, 50, 20, .12);
  text-align: center;
  transform: rotate(-1.5deg);
}
.sticker:nth-child(3n) { transform: rotate(1.2deg); }
.sticker:nth-child(4n) { transform: rotate(-.6deg); }
.sticker.missing {
  background: transparent;
  border: 3px dashed rgba(120, 104, 84, .35);
  box-shadow: none;
  transform: none;
}
.sticker-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 50px;
  line-height: 76px;
  height: 76px;
}
.sticker.missing .sticker-emoji, .sticker.missing canvas { filter: grayscale(1); opacity: .35; }
.sticker-name { font-size: 15px; font-weight: 900; text-wrap: balance; }
.sticker-fact { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-soft); text-wrap: pretty; }
.sticker.missing .sticker-name { color: var(--ink-soft); }

/* ---------- Dress-up buttons on the bird card ---------- */
.dress { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dress-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dress-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--fill);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 24px;
  display: grid;
  place-items: center;
}
.dress-btn.none { font-family: var(--font); font-size: 13px; font-weight: 900; color: var(--ink-soft); }
.dress-btn.on { background: var(--paper); box-shadow: 0 0 0 3px var(--straw); }
@media (max-height: 560px) {
  .card.editing .dress { display: none; }
}

/* ---------- Roosters & hens (the flock button and sheet) ---------- */
.flock-btn { font-size: 17px; font-weight: 900; color: var(--ink); gap: 7px; padding: 0 16px 0 14px; }
.flock-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #A9A39A;
  box-shadow: 0 0 0 2px #FFFFFF;
  flex: none;
}
.flock-counts { display: flex; gap: 10px; flex-wrap: wrap; }
.flock-count {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 12px rgba(70, 50, 20, .08);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-soft);
}
.flock-count b { font-size: 22px; font-weight: 900; color: var(--ink); }
.flock-emoji { font-size: 22px; }
.flock-status { margin: 16px 0 6px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.flock-say { margin: 12px 0 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.gauge { position: relative; padding-top: 6px; max-width: 560px; }
.gauge-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.zone.red { background: #E0533D; }
.zone.amber { background: #F2A33A; }
.zone.green { background: #43A849; }
.gauge-marker {
  position: absolute;
  top: 0;
  width: 8px;
  height: 28px;
  margin-left: -4px;
  border-radius: 4px;
  background: var(--ink);
  box-shadow: 0 0 0 2px #FFFFFF;
  transition: left .5s var(--spring);
}
.gauge-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.flock-shop { margin-top: 4px; }

/* the Hens / Roosters switch in the Market */
.sex-picker { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sex-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink-soft); flex: 1 1 240px; }

/* picking the dad in the incubator */
.dad-row { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dad-label { font-size: 15px; font-weight: 900; color: var(--ink-soft); margin-right: 2px; }
.mom-label { flex-basis: 100%; }
.dad-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: 20px;
  background: var(--fill);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.dad-chip .egg-dot { width: 14px; height: 14px; border-radius: 50%; }
.dad-chip.on { background: var(--paper); box-shadow: 0 0 0 3px var(--straw); }
/* Small phones held sideways: squeeze the top buttons a little */
@media (max-width: 720px) {
  .hud { gap: 8px; }
  .hud-right { gap: 8px; }
  .flock-btn { font-size: 15px; padding: 0 12px 0 10px; gap: 5px; }
  .market-btn span { display: none; }
  .market-btn { padding: 0 14px; }
  .farm-btn { max-width: 28vw; }
}

/* ---------- Genes: flock rows, the incubator's odds, gene chips ---------- */
.flock-rows { display: flex; flex-direction: column; gap: 18px; }
.flock-row { padding: 14px 16px; border-radius: 18px; background: var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 14px rgba(70, 50, 20, .07); }
.flock-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.flock-kind { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.flock-row .flock-status { margin: 0; font-size: 17px; }
.flock-row .flock-count { box-shadow: none; background: var(--fill); padding: 6px 12px; }
.flock-row .gauge { margin-top: 12px; }
.flock-row .flock-say { margin-top: 10px; font-size: 15px; }
.flock-ideal { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.grid-sub {
  grid-column: 1 / -1;
  padding: 6px 4px 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 136px; overflow-y: auto; flex: 1 1 300px; padding: 2px; }
.dad-row { align-items: flex-start; }
.dad-row .dad-label { width: 38px; padding-top: 10px; }
.odds { flex-basis: 100%; padding: 12px 14px; border-radius: 16px; background: var(--fill); }
.odds-head { font-size: 16px; font-weight: 900; margin-bottom: 8px; }
.odds-row { display: grid; grid-template-columns: 44px 90px 1fr; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; padding: 2px 0; }
.odds-pct { text-align: right; font-weight: 900; }
.odds-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.odds-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #F2C14E, #F28A2E); }
.odds-label { color: var(--ink); }
.odds-note { margin: 8px 0 0; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.pick-egg.go { flex-basis: 100%; justify-content: center; height: 54px; font-size: 17px; background: var(--straw); }
.pick-egg.go:disabled { background: var(--disabled); }
.genes { margin-top: 10px; }
.gene-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gene-chip {
  padding: 4px 10px;
  border-radius: 12px;
  background: #E9F2E0;
  color: #2F5A22;
  font-size: 13px;
  font-weight: 800;
}
.gene-chip.carried { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px rgba(120, 104, 84, .35); border: 0; }
.gene-chip.plain { background: var(--fill); color: var(--ink-soft); }
@media (max-height: 560px) {
  .card.editing .genes { display: none; }
}

/* ---------- Family tree ---------- */
.tree-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.tree-kinds { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; flex: none; -webkit-overflow-scrolling: touch; }
.tree-kind {
  flex: none; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--fill);
  font-size: 15px; font-weight: 800; color: var(--ink-soft); white-space: nowrap;
}
.tree-kind.on { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 3px var(--straw); }
.tree-body { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; min-height: 0; padding: 2px 2px 8px; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 30px; padding-left: 14px; border-left: 3px solid rgba(120, 104, 84, .22); }
.tree li { position: relative; padding: 5px 0; }
.tree ul > li::before {        /* the little branch into each bird */
  content: ""; position: absolute; left: -14px; top: 38px; width: 14px; height: 3px; background: rgba(120, 104, 84, .22);
}
.tree-node {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; padding: 6px 12px 6px 6px; border-radius: 18px;
  background: var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 12px rgba(70, 50, 20, .07); text-align: left;
}
.tree-node.wild { background: #EEF5E4; }
.tree-node.cross { background: #FFF6DC; }
.tree-node.locked .tree-pic, .tree-card.locked .tree-big { filter: grayscale(1) brightness(1.15); opacity: .45; }
.tree-node.locked b { color: var(--ink-soft); }
.tree-pic { width: 64px; height: 52px; flex: none; border-radius: 12px; background: rgba(120, 104, 84, .07); }
.tree-text { display: flex; flex-direction: column; min-width: 0; }
.tree-text b { font-size: 15px; font-weight: 900; line-height: 1.2; }
.tree-text small { font-size: 12px; font-weight: 700; color: var(--ink-soft); line-height: 1.25; }
.tree-back { align-self: flex-start; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--fill); font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.tree-card { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.tree-big { width: 200px; height: 160px; border-radius: 20px; background: var(--paper); flex: none; }
.tree-info { flex: 1 1 260px; min-width: 0; }
.tree-info h3 { margin: 2px 0 4px; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.tree-tag { display: inline-block; padding: 3px 10px; border-radius: 10px; background: var(--fill); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.tree-origin { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink-soft); }
.tree-fact { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.tree-egg { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 15px; font-weight: 800; }
.tree-egg .egg-dot { width: 16px; height: 20px; }
.tree-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.tree-links .field-label { width: 100%; }
.tree-link { height: 34px; padding: 0 12px; border-radius: 17px; background: var(--paper); box-shadow: 0 0 0 1.5px rgba(120, 104, 84, .25); font-size: 14px; font-weight: 800; }
.tree-link.locked { color: var(--ink-soft); }
.tree-how { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--fill); font-size: 14px; font-weight: 800; line-height: 1.35; }
.odds-name { margin: -2px 0 8px; font-size: 15px; font-weight: 900; color: var(--ink); }

/* ---------- Finding a bird a new home ---------- */
.rehome-btn {
  margin-top: 12px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--fill);
  font-size: 15px; font-weight: 800; color: var(--ink-soft);
}
.rehome-btn.arm { background: #F7D9CF; color: #9A3A22; }
.rehome-btn.small { height: 36px; font-size: 14px; margin-top: 10px; }
@media (max-height: 560px) {
  .card.editing .rehome-btn { display: none; }
}
.tree-kinds { scrollbar-width: none; }
.tree-kinds::-webkit-scrollbar { display: none; }

/* ---------- Market: small tiles, and a page for each bird ---------- */
#marketGrid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
#marketGrid.detail { display: block; }
.tile.mini { padding: 8px 6px 10px; gap: 2px; border-radius: 18px; cursor: pointer; }
.tile.mini .tile-name { font-size: 14px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; }
.portrait-mini { width: 96px; height: 76px; }
.price-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 10px; border-radius: 10px;
  background: var(--barn); color: #FFFFFF; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.price-pill .egg-dot { width: 9px; height: 12px; background: #FFF6E6; }
.tile.mini.locked .price-pill { background: var(--disabled); color: var(--ink-soft); }
.tile.breed-only { background: #EEF5E4; justify-content: center; }
.tile.breed-only .tile-emoji { font-size: 34px; }
.tile-toy { width: 64px; height: 56px; }
.shop-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.shop-pics { display: flex; gap: 8px; flex: none; }
.shop-pics figure { margin: 0; text-align: center; font-size: 13px; font-weight: 900; color: var(--ink-soft); }
.shop-pic { width: 150px; height: 120px; border-radius: 18px; background: var(--paper); display: block; }
.shop-carries { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: #FFF3D6; font-size: 14px; font-weight: 800; line-height: 1.35; }
.shop-flock { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-soft); line-height: 1.35; }
.shop-buys { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.buy.big { flex: 1 1 150px; width: auto; height: 50px; margin-top: 0; font-size: 16px; gap: 10px; }
.buy-price { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9px; background: rgba(255, 255, 255, .22); }
.buy-price .egg-dot { width: 9px; height: 12px; background: #FFF6E6; }
.shop-locked { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 14px; font-weight: 800; }
@media (max-width: 520px) {
  #marketGrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .portrait-mini { width: 84px; height: 66px; }
  .shop-pic { width: 128px; height: 104px; }
}
/* Phones held sideways are short: fit more birds on the screen */
@media (max-height: 560px) {
  .sheet { max-height: 94%; }
  .sheet-head h2 { font-size: 22px; }
  #marketNote { display: none; }
  #marketGrid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
  .tile.mini { padding: 6px 4px 8px; border-radius: 14px; }
  .portrait-mini { width: 70px; height: 54px; }
  .tile.mini .tile-name { font-size: 12.5px; min-height: 2.2em; }
  .price-pill { font-size: 12.5px; padding: 2px 8px; }
  #marketGrid .grid-head { font-size: 16px; padding-top: 4px; }
  .shop-pic { width: 112px; height: 90px; }
  .tree-pic { width: 52px; height: 42px; }
}

/* ---------- The incubator's controls ---------- */
.hatch-machine { display: block; width: 320px; height: 150px; margin: 0 auto 6px; max-width: 100%; }
.inc-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin-bottom: 12px; }
.inc-group { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 3px 10px rgba(70,50,20,.07); }
.inc-label { font-size: 14px; font-weight: 900; color: var(--ink-soft); }
.inc-val { min-width: 58px; text-align: center; font-size: 16px; font-weight: 900; color: #2F8A3A; font-variant-numeric: tabular-nums; }
.inc-val.small { min-width: 0; font-size: 13px; }
.inc-val.bad { color: #C8452D; }
.inc-btn { height: 36px; padding: 0 12px; border-radius: 18px; background: var(--fill); font-size: 14px; font-weight: 900; color: var(--ink); }
.inc-btn.round { width: 36px; padding: 0; font-size: 20px; }
.inc-btn:disabled { opacity: .45; }
.inc-status { flex-basis: 100%; margin: 0; text-align: center; font-size: 15px; font-weight: 800; }
.slot.clear { opacity: .7; }
.slot-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.slot-btn.light { background: var(--fill); color: var(--ink); }

/* ---------- Chores ---------- */
.chore-btn { position: relative; }
.chore-badge {
  position: absolute; right: -4px; bottom: -4px; padding: 1px 6px; border-radius: 9px; background: var(--barn); color: #FFFFFF;
  font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px #FFFFFF;
}
.chore-btn.all-done .chore-badge { background: #43A849; }
.chore-list { display: flex; flex-direction: column; gap: 10px; }
.chore { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--paper); font-size: 17px; font-weight: 800; }
.chore.done { color: var(--ink-soft); }
.chore.done .chore-text { text-decoration: line-through; }
.chore-check { font-size: 20px; }
.chore-n { margin-left: auto; font-size: 15px; font-weight: 900; color: var(--ink-soft); }

/* ---------- County Fair ---------- */
.fair-card { background: #FFF3D6; justify-content: center; }
.fair-emoji { font-size: 54px; line-height: 1; margin: 8px 0; }
.ribbon-wall { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ribbon-count { padding: 6px 12px; border-radius: 14px; background: var(--paper); font-size: 17px; font-weight: 900; }
.fair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.judge-card { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.judge-row { grid-template-columns: 120px 1fr 52px; }
.judge-wait { font-size: 16px; font-weight: 800; color: var(--ink-soft); }
.judge-result { margin-top: 14px; padding: 14px; border-radius: 20px; background: var(--paper); text-align: center; }
.judge-ribbon { font-size: 64px; line-height: 1; animation: wiggle .7s var(--spring); }
.judge-result h3 { margin: 6px 0 2px; font-size: 24px; font-weight: 900; }
.judge-score { margin: 0 0 8px; font-weight: 800; color: var(--ink-soft); }
.judge-note { margin: 4px 0; font-size: 15px; font-weight: 700; font-style: italic; }
.judge-table { margin: 10px auto; max-width: 380px; text-align: left; }
.judge-line { padding: 4px 10px; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.judge-line.you { background: #FFF3D6; color: var(--ink); }

/* ---------- A bird's family tree ---------- */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rehome-btn.on { background: #E9F2E0; color: #2F5A22; }
.ped { margin-top: 10px; }
.ped-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ped-row.two { grid-template-columns: repeat(2, 1fr); width: 70%; margin: 0 auto; }
.ped-row.one { grid-template-columns: 1fr; width: 45%; margin: 0 auto; }
.ped-box { position: relative; padding: 6px 6px 6px 8px; border-radius: 12px; background: var(--paper); min-width: 0; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 3px 8px rgba(70,50,20,.06); }
.ped-box.unknown { background: var(--fill); box-shadow: none; }
.ped-box b { font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-box small { font-size: 11px; font-weight: 700; color: var(--ink-soft); line-height: 1.2; overflow: hidden; }
.ped-role { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.ped-dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: #CCC; box-shadow: 0 0 0 1.5px #FFFFFF; }
.ped-lines { text-align: center; font-size: 14px; color: var(--ink-soft); line-height: 1.2; }
.ped-note { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 720px) {
  .farm-btn span { display: none; }
  .farm-btn { padding: 0 14px; }
}