/* DiscoPets game pages (D51): shared pieces plus each area's own background.
   Link after /pets/pets.css. */

/* ---------- area backgrounds (tiled, web 1.0 style) ---------- */
.meadow.area-wild {
  background-color: #2f6e2a;
  background-image: linear-gradient(var(--meadow-sky-top), var(--meadow-sky) 150px, transparent 150px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23245a21' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M14 30q8-14 16 0q-8 6-16 0z'/%3E%3Cpath d='M54 70q8-14 16 0q-8 6-16 0z'/%3E%3Cpath d='M22 30v8M62 70v8'/%3E%3C/g%3E%3Ccircle cx='58' cy='20' r='3' fill='%23ffd94a' opacity='.5'/%3E%3Ccircle cx='16' cy='66' r='2.5' fill='%23ff8fb8' opacity='.5'/%3E%3C/svg%3E");
}
.meadow.area-market {
  background-color: #f2c75c;
  background-image: linear-gradient(var(--meadow-sky-top), var(--meadow-sky) 150px, transparent 150px),
    repeating-linear-gradient(90deg, rgba(232,113,90,.35) 0 28px, rgba(255,253,245,.35) 28px 56px);
}
.meadow.area-cottage {
  background-color: #fbe3ea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='0' width='14' height='64' fill='%23f6cdd9'/%3E%3Cg transform='translate(40 20)'%3E%3Ccircle r='4' fill='%23ff8fb8'/%3E%3Ccircle r='1.6' fill='%23ffd94a'/%3E%3C/g%3E%3Cg transform='translate(40 52)'%3E%3Cpath d='M-3 0h6M0 -3v6' stroke='%239b59b6' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.meadow.area-meadow {
  background-color: #2d2150;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23fff3b0'%3E%3Cpath d='M20 10l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3Ccircle cx='70' cy='30' r='1.6'/%3E%3Ccircle cx='50' cy='70' r='1.2'/%3E%3Cpath d='M76 66l1.3 3 3 1.3-3 1.3-1.3 3-1.3-3-3-1.3 3-1.3z' fill='%23ff8fb8'/%3E%3C/g%3E%3C/svg%3E");
}
.meadow.area-town {
  background-color: #cdbfa6;
  background-image: linear-gradient(var(--meadow-sky-top), var(--meadow-sky) 150px, transparent 150px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cg fill='%23d9ccb4' stroke='%23b3a386' stroke-width='2'%3E%3Crect x='2' y='2' width='26' height='16' rx='6'/%3E%3Crect x='32' y='2' width='26' height='16' rx='6'/%3E%3Crect x='-13' y='22' width='26' height='16' rx='6'/%3E%3Crect x='17' y='22' width='26' height='16' rx='6'/%3E%3Crect x='47' y='22' width='26' height='16' rx='6'/%3E%3C/g%3E%3C/svg%3E");
}
.meadow.area-map {
  background-color: #f3e3bd;
  background-image: linear-gradient(var(--meadow-sky-top), var(--meadow-sky) 150px, transparent 150px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 90q30-30 60-10t60-20' fill='none' stroke='%23c9a86a' stroke-width='3' stroke-dasharray='6 8'/%3E%3Cpath d='M86 24l6 6M92 24l-6 6' stroke='%23e8715a' stroke-width='3'/%3E%3C/svg%3E");
}
.area .pets-nav a { background: var(--meadow-cloud); }
.area-meadow .pets-nav a, .area-wild .pets-nav a { box-shadow: 0 0 0 2px var(--meadow-ink); }

.area-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 10px 0 0; }
.area-nav a {
  font-weight: 700; font-size: 15px; text-decoration: none; color: var(--meadow-ink);
  padding: 2px 10px; background: var(--meadow-sun); border: 2px solid var(--meadow-ink); border-radius: 12px 14px 10px 13px;
}
.area-nav a[aria-current="page"] { background: var(--meadow-flower); }
.area-intro { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.area-intro p { margin: 0; }
.panel-note { margin: 0 0 12px; }

/* ---------- common bits ---------- */
.beats-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap;
  padding: 0 8px; background: var(--meadow-sun); border: 2px solid var(--meadow-ink); border-radius: 10px; }
.beat-note { width: 12px; height: 12px; flex: none; }
.row-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.btn-doodle.small { font-size: 15px; padding: 3px 12px; margin-top: 0; }
.btn-doodle[disabled] { opacity: .55; cursor: not-allowed; }
button:disabled { cursor: wait; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.shop-card {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px;
  background: var(--meadow-cloud); border: 3px solid var(--meadow-ink); border-radius: var(--wobble);
  box-shadow: 3px 3px 0 var(--meadow-ink);
}
.shop-card img { width: 120px; height: 120px; object-fit: contain; }
.shop-card .name { font-weight: 700; font-size: 18px; }
.shop-card .meta { font-size: 14px; color: #4a4856; }
.shop-card.owned { background: #eaf6e1; }
.shop-card .btn-doodle { margin-top: 4px; }
.empty-note { text-align: center; color: #4a4856; }
progress.bar, .glyph-bar {
  -webkit-appearance: none; appearance: none; vertical-align: middle;
  width: 100%; height: 14px; border: 2px solid var(--meadow-ink); border-radius: 8px;
  background: var(--meadow-cloud); overflow: hidden;
}
.glyph-bar { width: 9em; max-width: 100%; }
progress.bar::-webkit-progress-bar, .glyph-bar::-webkit-progress-bar { background: var(--meadow-cloud); }
progress.bar::-webkit-progress-value, .glyph-bar::-webkit-progress-value { background: var(--meadow-grass); }
progress.bar::-moz-progress-bar, .glyph-bar::-moz-progress-bar { background: var(--meadow-grass); }

/* pet tiles (cottage, pickers) */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pet-tile {
  position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 8px; cursor: pointer;
  font: inherit; color: var(--meadow-ink); text-align: center;
  background: var(--meadow-cloud); border: 3px solid var(--meadow-ink); border-radius: var(--wobble);
  box-shadow: 3px 3px 0 var(--meadow-ink);
}
.pet-tile:hover { background: var(--meadow-sun); }
.pet-tile img { width: 88px; height: 88px; object-fit: contain; }
.pet-tile strong { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-tile span { font-size: 12px; color: #4a4856; }
.pet-tile .tag { position: absolute; top: 4px; left: 4px; font-size: 11px; font-weight: 700; padding: 0 5px;
  background: var(--meadow-sun); border: 2px solid var(--meadow-ink); border-radius: 8px; color: var(--meadow-ink); }
.pet-tile .tag.right { left: auto; right: 4px; background: var(--meadow-flower); }
.pick-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; }
.pick-search, .game-input {
  font: inherit; color: var(--meadow-ink); background: var(--meadow-cloud);
  border: 3px solid var(--meadow-ink); border-radius: 12px 16px 10px 14px; padding: 4px 10px;
}
.pet-grid.pick .pet-tile img { width: 72px; height: 72px; }

/* reveal of a new pet */
.reveal { text-align: center; }
.reveal + .reveal { margin-top: 16px; padding-top: 12px; border-top: 2px dashed rgba(43, 42, 51, .4); }
.reveal-heading { margin: 0; font-size: 22px; font-weight: 700; }
.reveal-img { width: 240px; height: 240px; max-width: 100%; object-fit: contain;
  background: radial-gradient(circle at 50% 60%, #fff3b0 0 50%, transparent 52%); }
#sheet-body > .reveal-img { display: block; margin: 0 auto; }
.reveal-name { font-size: 20px; font-weight: 700; }
.reveal .chips { margin: 6px 0; }
.holo-glow { filter: drop-shadow(0 0 10px #ffd1e8) drop-shadow(0 0 6px #cfe6ff); }
@media (prefers-reduced-motion: no-preference) {
  .reveal-img { animation: reveal-pop .45s ease-out; }
}
@keyframes reveal-pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.searching { text-align: center; padding: 20px 0; }
.searching svg { width: 120px; height: 90px; }
@media (prefers-reduced-motion: no-preference) {
  .searching svg { animation: rustle .35s ease-in-out infinite alternate; }
}
@keyframes rustle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* toast */
#game-toast {
  position: fixed; left: 50%; top: 14px; z-index: 9800; transform: translate(-50%, -140%);
  max-width: min(90vw, 520px); padding: 8px 14px; font-weight: 700; text-align: center;
  background: var(--meadow-sun); color: var(--meadow-ink); border: 3px solid var(--meadow-ink);
  border-radius: 14px 18px 12px 16px; box-shadow: 3px 3px 0 var(--meadow-ink); transition: transform .2s;
}
#game-toast.show { transform: translate(-50%, 0); }
#game-toast.error { background: var(--meadow-flower); }

/* ---------- the sheet ---------- */
.sheet {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  margin: auto; color: var(--meadow-ink); font-size: 17px;
}
.sheet::backdrop { background: rgba(43, 42, 51, .5); }
.sheet .doodle-title { position: sticky; top: -16px; z-index: 3; }
.sheet .doodle-title h2 { font-family: var(--font-label); font-weight: 700; font-size: 20px; }
.sheet-close {
  font: inherit; font-size: 24px; line-height: 1; cursor: pointer; flex: none;
  width: 34px; height: 34px; padding: 0; background: var(--meadow-cloud); color: var(--meadow-ink);
  border: 3px solid var(--meadow-ink); border-radius: 12px 14px 10px 13px;
}
.sheet-close:hover { background: var(--meadow-flower); }
.sheet-status { margin: 0 0 6px; font-size: 15px; color: #4a4856; }
.sheet-status:empty { display: none; }
.sheet-status.error { color: #9b2d20; font-weight: 700; }
.sheet .notice { font-size: 18px; }
.sheet-form { display: grid; gap: 10px; }
.sheet-form .btn-doodle { justify-self: start; }
.field { display: grid; gap: 3px; margin: 4px 0; }
.field span { font-weight: 700; }
.field small { font-size: 14px; color: #4a4856; }
.field input, .field select {
  font: inherit; color: var(--meadow-ink); background: var(--meadow-cloud); width: 100%; box-sizing: border-box;
  border: 3px solid var(--meadow-ink); border-radius: 12px 16px 10px 14px; padding: 5px 10px;
}
.sheet-options { margin: 0 0 12px; padding: 6px 10px; border: 2px dashed rgba(43, 42, 51, .45); border-radius: 12px; }
.sheet-options summary { cursor: pointer; font-weight: 700; }

.message + .message { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(43, 42, 51, .4); }
.message h3 { margin: 4px 0 6px; font-size: 20px; }
.message-author { margin: 0; font-size: 15px; color: #4a4856; }
.message-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message .big { font-size: 26px; font-weight: 700; }
.message-img { display: block; width: 100%; max-width: 260px; height: auto; margin: 8px auto; }
.message-fields { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 14px; margin: 10px 0; }
.message-fields dt { font-weight: 700; }
.message-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-footer { margin: 8px 0 0; font-size: 14px; color: #4a4856; }
.message-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.message-controls .field { flex: 1 1 100%; margin: 0; }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.activity {
  font: inherit; text-align: left; color: var(--meadow-ink); cursor: pointer; text-decoration: none; display: block;
  background: var(--meadow-cloud); padding: 10px 12px;
  border: 3px solid var(--meadow-ink); border-radius: var(--wobble); box-shadow: 3px 3px 0 var(--meadow-ink);
}
.activity strong, .activity span { display: block; }
.activity span { font-size: 15px; color: #4a4856; margin-top: 2px; }
.activity:hover { background: var(--meadow-sun); }
.activity:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--meadow-ink); }
.activity:focus-visible, .pet-tile:focus-visible, .sheet-close:focus-visible, .shop-card button:focus-visible {
  outline: 3px solid var(--meadow-ink); outline-offset: 3px;
}

@media (max-width: 480px) {
  .sheet { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .shop-card img { width: 90px; height: 90px; }
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ---------- shared page bits ---------- */
.hint-inline { font-size: 15px; font-weight: 400; }
.doodle-title h2 { font-size: 20px; }
.play-login { max-width: 560px; margin-left: auto; margin-right: auto; text-align: center; }
.toggle {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--meadow-ink);
  padding: 2px 10px; background: var(--meadow-cloud); border: 2px solid var(--meadow-ink); border-radius: 12px 14px 10px 13px;
}
.toggle[aria-pressed="true"], .toggle.on { background: var(--meadow-sun); }
.check { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.chip.live { background: var(--meadow-flower); }
.away-list { display: grid; gap: 8px; margin-bottom: 10px; }
.away { display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: var(--meadow-paper);
  border: 2px solid var(--meadow-ink); border-radius: 14px 18px 12px 16px; }
.away img { width: 64px; height: 64px; object-fit: contain; }
.away strong, .away span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .wobble { animation: rustle .6s ease-in-out infinite alternate; }
}

/* ---------- quests ---------- */
.quest-note { margin: 0 0 10px; padding: 6px 10px; font-weight: 700; background: var(--meadow-sun);
  border: 2px solid var(--meadow-ink); border-radius: 12px 14px 10px 13px; }
.quest-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.quest-head h3 { margin: 0; font-size: 20px; }
.quest-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.quest { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: var(--meadow-cloud); border: 3px solid var(--meadow-ink); border-radius: var(--wobble); }
.quest-icon { width: 44px; height: 44px; }
.quest-text strong, .quest-text span { display: block; }
.quest-text span { font-size: 15px; color: #4a4856; }
.quest-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.quest-progress small { font-size: 13px; white-space: nowrap; }
.quest-side { display: grid; justify-items: end; gap: 4px; }
.quest-reward { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap;
  padding: 0 8px; background: var(--meadow-sun); border: 2px solid var(--meadow-ink); border-radius: 10px; }
.quest-state { font-size: 13px; font-weight: 700; }
.quest.ready { background: #fff3b0; }
.quest.ready .quest-state { padding: 0 6px; border-radius: 8px; background: var(--meadow-flower); border: 2px solid var(--meadow-ink); }
.quest.claimed { opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .quest.ready .quest-icon { animation: quest-bounce 1.2s ease-in-out infinite; }
}
@keyframes quest-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- trade ---------- */
.trade-card + .trade-card { margin-top: 14px; padding-top: 12px; border-top: 2px dashed rgba(43, 42, 51, .4); }
.trade-card h3 { margin: 0 0 8px; }
.trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-side { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; padding: 8px;
  background: var(--meadow-paper); border: 2px solid var(--meadow-ink); border-radius: 14px 18px 12px 16px; }
.trade-side a { display: grid; justify-items: center; color: var(--meadow-ink); }
.trade-side img { width: 96px; height: 96px; object-fit: contain; }
.trade-side .field { justify-self: stretch; text-align: left; }
.trade-pet { display: grid; justify-items: center; min-height: 60px; }
.trade-pet img { width: 80px; height: 80px; object-fit: contain; }

/* ---------- wild ---------- */
.habitat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.habitat-card { display: grid; align-content: start; background: var(--meadow-cloud); border: 3px solid var(--meadow-ink);
  border-radius: var(--wobble); box-shadow: 3px 3px 0 var(--meadow-ink); overflow: hidden; }
.habitat-card .habitat { border: 0; border-bottom: 3px solid var(--meadow-ink); border-radius: 0; box-shadow: none; min-height: 120px; }
.habitat-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
.habitat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mastery { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; }
.finds .hint { display: block; margin-bottom: 4px; }
.find-strip { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.find-strip img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; border: 2px solid var(--meadow-ink); background: var(--meadow-paper); }
.find-strip img.rar-3 { background: var(--rarity-3); }
.find-strip img.rar-4 { background: var(--rarity-4); }
.find-strip img.rar-0 { background: var(--rarity-0); }
.find-strip .more { font-weight: 700; font-size: 14px; }
.choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.choice-list .habitat { font: inherit; font-weight: 700; color: var(--meadow-ink); cursor: pointer; min-height: 90px; text-align: left; }
.searching .bush { width: 120px; height: 120px; }

/* ---------- cottage ---------- */
.team-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.team-slot { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; font: inherit; color: var(--meadow-ink);
  background: var(--meadow-paper); border: 3px solid var(--meadow-ink); border-radius: var(--wobble); cursor: pointer; }
.team-slot:hover { background: var(--meadow-sun); }
.team-slot img { width: 80px; height: 80px; object-fit: contain; }
.team-slot strong { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-slot.empty { border-style: dashed; cursor: default; min-height: 110px; align-content: center; color: #6e6c78; background: transparent; }
.team-slot .tag { position: absolute; top: 4px; left: 4px; font-size: 11px; font-weight: 700; padding: 0 5px;
  background: var(--meadow-sun); border: 2px solid var(--meadow-ink); border-radius: 8px; }
.boost-mode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
#pet-filters { margin-bottom: 12px; }
.pet-sheet { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.pet-facts .pet-stats { margin: 8px 0; }
.pet-facts .chips { justify-content: flex-start; margin: 0; }
.evo { display: grid; gap: 4px; font-weight: 700; }
.pet-actions { justify-content: flex-start; margin-top: 12px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.style-tile { display: grid; justify-items: center; gap: 2px; padding: 6px; font: inherit; font-size: 14px; color: var(--meadow-ink); cursor: pointer;
  background: var(--meadow-cloud); border: 3px solid var(--meadow-ink); border-radius: 14px 18px 12px 16px; }
.style-tile.on { background: var(--meadow-sun); }
.style-tile img { width: 64px; height: 64px; object-fit: contain; }
.style-tile .none { font-size: 40px; line-height: 64px; height: 64px; }
.swap-list { display: grid; gap: 8px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-card { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px; font-size: 14px;
  border: 2px dashed rgba(43, 42, 51, .45); border-radius: 14px 18px 12px 16px; color: #6e6c78; }
.badge-card.earned { border: 2px solid var(--meadow-ink); background: var(--meadow-paper); color: var(--meadow-ink); }
.badge-card .medal { width: 48px; height: 48px; }
.badge-card strong { font-size: 16px; }

/* ---------- meadow ---------- */
.dance-floor { background: #3a2b66; color: #fffdf5; }
.dance-floor .doodle-title { color: var(--meadow-ink); }
.dance-floor a { color: #fff3b0; }
.dance-floor .hint { color: #e0d8f5; }
#floor { display: grid; justify-items: center; text-align: center; gap: 8px; }
.disco-ball { width: 110px; height: 110px; }
@media (prefers-reduced-motion: no-preference) {
  .disco-ball { animation: disco-spin 3s ease-in-out infinite alternate; }
}
@keyframes disco-spin { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.floor-note { font-weight: 700; margin: 0; }
.big-button { font-size: 20px; padding: 8px 22px; }
.sum { font-family: var(--font-label); font-weight: 700; font-size: 44px; letter-spacing: .04em; }
.answer-row { display: grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 10px; width: 100%; max-width: 360px; }
.answer { font: inherit; font-size: 28px; font-weight: 700; padding: 10px 0; cursor: pointer; color: var(--meadow-ink);
  background: var(--meadow-sun); border: 3px solid var(--meadow-ink); border-radius: 16px 20px 14px 22px; box-shadow: 3px 3px 0 #1a1430; }
.answer:hover { background: var(--meadow-flower); }
.dance-floor .reveal-img { background: radial-gradient(circle at 50% 60%, #6c58a8 0 50%, transparent 52%); }
.daily-box { display: grid; justify-items: center; text-align: center; gap: 6px; }
.gift { width: 90px; height: 90px; }
.recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recent-list li { display: flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 2px dotted rgba(43, 42, 51, .3); }
.recent-list img { width: 48px; height: 48px; object-fit: contain; }
.recent-list small { color: #4a4856; margin-left: 4px; }

/* ---------- finished hatches and expeditions (D52) ---------- */
.results:has(.result-list[hidden]) { display: none; }
.result-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 340px)); justify-content: center; gap: 14px; }
.result-card { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px;
  background: #fff3b0; border: 3px solid var(--meadow-ink); border-radius: var(--wobble); box-shadow: 3px 3px 0 var(--meadow-ink); }
.result-card p { margin: 0; }
.result-card .reveal-img { width: 140px; height: 140px; background: radial-gradient(circle at 50% 60%, #fffdf5 0 50%, transparent 52%); }
.result-card .bonus { font-weight: 700; }

/* ---------- town ---------- */
.notice-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px;
  padding: 12px; background: #c99a3d; border: 3px solid var(--meadow-ink); border-radius: 12px; }
.notice-card { padding: 10px 12px; background: var(--meadow-paper); border: 2px solid var(--meadow-ink);
  box-shadow: 2px 3px 0 rgba(43, 42, 51, .6); transform: rotate(-1deg); }
.notice-card:nth-child(2) { transform: rotate(1.2deg); }
.notice-card h3 { margin: 0 0 6px; }
.notice-card p { margin: 4px 0; }
.town-top a { display: contents; color: var(--meadow-ink); text-decoration: none; }

@media (max-width: 640px) {
  .team-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pet-sheet { grid-template-columns: 1fr; justify-items: center; }
  .trade-sides { grid-template-columns: 1fr; }
}