/* Your Pig — the shelf's dressing room and shop. */
:root {
  --ink:   #f6efe4;
  --dim:   #b3a695;
  --bg:    #16120e;
  --panel: #231c16;
  --line:  #3b2f25;
  --gold:  #ffc65c;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 30;
  background: var(--gold); color: #241700; padding: .5rem .8rem; border-radius: 0 0 .5rem 0; }
.skip-link:focus { left: 0; }
.bar { display: flex; align-items: center; gap: .9rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--line); background: #1a140f; position: sticky; top: 0; z-index: 8; }
.bar h1 { font-size: 1.1rem; margin: 0; }
.bar .home { color: var(--dim); text-decoration: none; font-size: .9rem; }
.bar .home:hover { color: var(--ink); }
.bar .purse { margin-left: auto; background: #2e2419; border: 1px solid var(--line);
  border-radius: .6rem; padding: .25rem .7rem; color: var(--gold); font-weight: 800; }
.bar .tag { color: var(--dim); font-size: .78rem; margin: 0; }
main { padding: 1rem; max-width: 56rem; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.2rem 1.4rem; margin: 0 0 1.1rem; box-shadow: 0 16px 40px #0007; }
.panel h2 { margin: 0 0 .3rem; font-size: 1.4rem; }
.panel h3 { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--gold); }
.lede { color: var(--dim); margin: .2rem 0 .8rem; }
.hint { color: var(--dim); font-size: .88rem; }
.makerow { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; }
.stage { background: #1b150f; border: 1px solid var(--line); border-radius: .9rem; padding: .6rem; }
#pig { display: block; width: 320px; height: 300px; max-width: 100%; }
.controls { flex: 1 1 18rem; min-width: 15rem; }
.controls label { display: block; font-size: .85rem; color: var(--dim); margin-bottom: .25rem; }
#pig-name { width: 100%; background: #171108; color: var(--ink); border: 1px solid var(--line);
  border-radius: .5rem; padding: .5rem .7rem; font: inherit; }
.swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.sw { border: 2px solid var(--line); background: #2a2118; color: var(--ink); border-radius: .6rem;
  padding: .4rem .6rem; font: inherit; font-size: .85rem; cursor: pointer; display: flex;
  align-items: center; gap: .4rem; }
.sw:hover { border-color: #6b563c; }
.sw.on { border-color: var(--gold); background: #3a2d1b; }
.sw .dot { width: 1rem; height: 1rem; border-radius: 50%; display: inline-block; }
.sw .price { color: var(--gold); font-weight: 700; }
.sw[disabled] { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.btn { background: var(--gold); color: #241700; border: 0; border-radius: .7rem;
  padding: .55rem 1rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn.big { padding: .75rem 1.4rem; font-size: 1.05rem; }
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.perks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.perk { background: #2a2118; border: 1px solid var(--line); border-radius: .7rem; padding: .7rem .9rem; }
.perk b { display: block; }
.perk span { display: block; color: var(--dim); font-size: .84rem; margin: .15rem 0 .5rem; }
.perk.owned { border-color: #5e8f5e; }
.ledger { display: grid; gap: .3rem; }
.ledger div { display: flex; justify-content: space-between; gap: 1rem; background: #2a2118;
  border-radius: .5rem; padding: .35rem .7rem; font-size: .86rem; }
.ledger .up { color: #9fe09a; }
.ledger .down { color: #ffb0a0; }
@media (max-width: 620px) { main { padding: .6rem; } .panel { padding: .9rem 1rem; } }

.userrow { display: flex; gap: .5rem; align-items: center; }
.userrow input { flex: 1 1 auto; min-width: 7rem; }
.dim { color: var(--dim); font-weight: 400; }
.user-yes { color: #9fe09a; }
.user-no { color: #ffb0a0; }
.user-hmm { color: var(--gold); }

/* 🏆 the trophy room */
.trophy-game { margin-bottom: 1rem; }
.trophy-game:last-child { margin-bottom: 0; }
.trophies { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.trophy {
  background: #241c15; border: 1px solid var(--line); border-radius: .6rem;
  padding: .5rem .6rem; opacity: .55;
}
.trophy.won { opacity: 1; border-color: var(--gold); background: #2e2416; }
.trophy .ticon { font-size: 1.5rem; line-height: 1.2; display: block; }
.trophy b { display: block; font-size: .92rem; }
.trophy span { display: block; color: var(--dim); font-size: .78rem; margin-top: .1rem; }
.trophy .bar {
  display: block; height: 4px; margin-top: .4rem; border-radius: 2px;
  background: #1a140e; overflow: hidden;
}
.trophy .bar i { display: block; height: 100%; background: var(--gold); }

/* 🎲 today's twists */
#twist-list { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.twist {
  background: #241c15; border: 1px solid var(--line); border-radius: .7rem;
  padding: .6rem .7rem;
}
.twist.played { border-color: #5e8f5e; }
.twist .ticon { font-size: 1.6rem; line-height: 1.2; display: block; }
.twist b { display: block; }
.twist span { display: block; color: var(--dim); font-size: .82rem; margin: .1rem 0 .3rem; }
.twist .where { display: block; font-style: normal; color: var(--gold); font-size: .74rem; }

/* 🎡 the daily prize wheel (v1.3) */
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.wheel-panel { border-color: #6b4a1e; background: radial-gradient(120% 90% at 30% 0%, #3a2a14 0%, var(--panel) 60%); }
.wheel-panel.ready { box-shadow: 0 0 0 2px #ffc65c55, 0 16px 40px #0007; }
.wheel-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.wheelrow { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.wheelbox { position: relative; flex: 0 1 360px; max-width: 100%; margin: 0 auto; }
#wheel { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; cursor: pointer; margin: 0 auto; }
.wheelside { flex: 1 1 15rem; min-width: 0; }
.btn.spin { font-size: 1.4rem; padding: .8rem 1.8rem; width: 100%; max-width: 22rem; }
.btn.spin.ready { animation: spinme 1.1s ease-in-out infinite; }
@keyframes spinme { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 #ffc65c00; } 50% { transform: scale(1.04); box-shadow: 0 0 22px 4px #ffc65c88; } }
.wheel-state { margin: .7rem 0 0; color: var(--ink); }
.wheel-state .clock { font-variant-numeric: tabular-nums; color: var(--gold); font-size: 1.15rem; }
.rares { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
.rare-tile { background: #241c15; border: 1px dashed var(--line); border-radius: .6rem; padding: .35rem .4rem; text-align: center; opacity: .6; }
.rare-tile.got { opacity: 1; border-style: solid; border-color: #9a6ad8; background: #2c1f3a; }
.rare-tile.worn { border-color: var(--gold); }
.rare-tile .ricon { display: block; font-size: 1.4rem; line-height: 1.3; }
.rare-tile .rname { display: block; font-size: .74rem; color: var(--dim); }
.rare-tile.got .rname { color: var(--ink); }
.sw.rare { border-color: #6a4a8e; background: #2c1f3a; }
.sw.rare.on { border-color: var(--gold); background: #3d2a52; }
.sw .ricon { font-size: 1.05rem; }
/* what you won, over the wheel */
.wheel-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 19rem);
  background: #1c140d; border: 3px solid var(--gold); border-radius: 1.1rem; padding: 1rem 1rem .9rem; text-align: center;
  box-shadow: 0 0 0 6px #0006, 0 18px 50px #000a; animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; z-index: 5; }
.wheel-pop[hidden] { display: none; }
.wheel-pop.rare { border-color: #c58bff; background: radial-gradient(circle at 50% 30%, #3d2160, #1c140d 70%); }
.wheel-pop.jackpot { background: radial-gradient(circle at 50% 30%, #5a3e0a, #1c140d 70%); }
@keyframes popin { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.pop-kind { margin: 0; color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.pop-big { margin: .1rem 0; font-size: 2rem; font-weight: 900; line-height: 1.15; }
.wheel-pop.rare .pop-big { font-size: 1.5rem; }
#pop-pig { display: block; width: 150px; height: auto; margin: .2rem auto; }
#pop-pig[hidden] { display: none; }
.pop-what { margin: .2rem 0 .7rem; color: var(--dim); font-size: .9rem; }
.pop-row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
.purse.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.25); } }
.wheel-panel.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.stage.flash { animation: flash 1.2s; }
@keyframes flash { 30% { box-shadow: 0 0 0 4px var(--gold), 0 0 30px var(--gold); } }
@media (prefers-reduced-motion: reduce) {
  .btn.spin.ready, .wheel-pop, .purse.bump, .wheel-panel.shake, .stage.flash { animation: none; }
}

/* 🐾 your pet (v1.4) */
.petlink { color: var(--gold); font-weight: 700; white-space: nowrap; }
.pet-panel { border-color: #3f6a3a; background: radial-gradient(120% 90% at 70% 0%, #1f3a1e 0%, var(--panel) 60%); }
.petrow { display: flex; flex-direction: column; gap: 1rem; }
.yard { position: relative; width: 100%; }
#pet-yard { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .9rem;
  border: 2px solid #4f7a3e; cursor: pointer; background: #7ccc5a; touch-action: pan-y; }
#pet-yard:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.petside { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.petside > div { min-width: 0; }
@media (max-width: 620px) { .petside { grid-template-columns: 1fr; gap: .4rem; } }
.petside label { display: block; font-size: .85rem; color: var(--dim); margin-bottom: .25rem; }
#pet-name { width: 100%; background: #171108; color: var(--ink); border: 1px solid var(--line);
  border-radius: .5rem; padding: .5rem .7rem; font: inherit; }
.pet-level { margin: .6rem 0 .3rem; }
.pet-level b { color: var(--gold); font-size: 1.1rem; }
.meter { height: .7rem; background: #15100b; border: 1px solid var(--line); border-radius: .4rem; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: .35rem; transition: width .4s ease-out; }
.meter.xp { height: .9rem; }
.meter.xp i { background: linear-gradient(90deg, #ffc65c, #ffe9a0); }
.meter.full i { background: linear-gradient(90deg, #f08a3a, #ffbe6a); }
.meter.joy i { background: linear-gradient(90deg, #ff4f86, #ff9ac0); }
.meters { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; align-items: center; margin: .5rem 0; font-size: .88rem; }
.hint.tight { margin: .2rem 0; }
.pet-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.pet-acts .btn { flex: 1 1 8rem; min-height: 46px; font-size: 1.02rem; }
.pet-tricks { display: flex; gap: .4rem; flex-wrap: wrap; }
.pet-tricks .btn { min-height: 42px; padding: .4rem .7rem; font-size: .9rem; }
.pet-tricks .btn.locked { opacity: .5; }
.pet-tricks small { color: var(--dim); font-weight: 400; }
.pet-say { min-height: 1.5em; margin: .5rem 0 0; color: #ffe9b0; font-weight: 600; }
#pet-card.looking .meter, #pet-card.looking .meters { opacity: .4; }
.pet-kinds { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); }
.pet-kind { background: #2a2118; border: 2px solid var(--line); color: var(--ink); border-radius: .8rem;
  padding: .5rem .4rem; font: inherit; cursor: pointer; text-align: center; min-height: 44px; }
.pet-kind:hover { border-color: #6b563c; }
.pet-kind.on { border-color: var(--gold); background: #3a2d1b; }
.pet-kind.mine { border-style: solid; box-shadow: inset 0 0 0 1px #5e8f5e; }
.pet-kind .picon { display: block; font-size: 1.8rem; line-height: 1.2; }
.pet-kind b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-kind .pprice { display: block; font-size: .8rem; color: var(--gold); font-weight: 700; }
.pet-adopt { margin: 0 0 .8rem; padding: .7rem; border: 2px dashed #9fe09a; border-radius: .9rem; background: #1d2a17; }
.pet-adopt[hidden] { display: none; }
.pet-adopt .btn { width: 100%; animation: spinme 1.6s ease-in-out infinite; }
.pet-adopt .btn[disabled] { animation: none; }
.pet-adopt .hint { margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) { .pet-adopt .btn { animation: none; } }
.pet-pop { border-color: #9fe09a; }
@media (prefers-reduced-motion: reduce) { .meter i { transition: none; } }

/* ✨ evolution, 🧸 toys, ⛏️ the dig, 🛍️ the shop and 📖 the album (v1.4, part two) */
.pet-evo { margin: 0 0 .4rem; color: #c8a8ff; font-size: .88rem; font-weight: 700; }
.pet-toys { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.pet-toys[hidden] { display: none; }
.pet-toys .btn { min-height: 42px; padding: .4rem .8rem; font-size: .92rem; background: #9fe09a; color: #10260c; }
.pet-more { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.pet-more .btn { min-height: 42px; padding: .4rem .8rem; font-size: .92rem; }
.pet-more .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.pet-more .btn[hidden] { display: none; }
.pet-dig { margin-top: .5rem; padding: .6rem; border: 2px dashed #a8703c; border-radius: .8rem; background: #2a1d10; }
.pet-dig[hidden] { display: none; }
.pet-dig-spots { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.pet-dig-spots .btn { min-height: 44px; padding: .3rem; font-size: .95rem; }
.pet-dig-spots .btn.dug { font-size: 1.3rem; opacity: .8; }
.pet-shop { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.shop-item { background: #2a2118; border: 1px solid var(--line); border-radius: .8rem; padding: .55rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.shop-item.owned { border-color: #5e8f5e; }
.shop-item.worn { border-color: var(--gold); background: #33281a; }
.shop-item .sicon { font-size: 1.6rem; line-height: 1.2; }
.shop-item b { font-size: .92rem; }
.shop-item .swhat { color: var(--dim); font-size: .78rem; flex: 1; }
.shop-item .btn { margin-top: .3rem; min-height: 40px; }
.pet-album { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.album-card { background: linear-gradient(#24331f, #231c16 55%); border: 1px solid var(--line); border-radius: .9rem; padding: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.album-card.out { border-color: var(--gold); }
.album-card.buddy { border-color: #9fe09a; }
.album-pic { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.album-card b { display: block; font-size: 1rem; }
.album-card .aform { display: block; color: #c8a8ff; font-size: .84rem; font-weight: 700; }
.album-card .astats { display: block; color: var(--dim); font-size: .78rem; }
.album-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.album-row .btn { flex: 1 1 5rem; min-height: 40px; }
#pet-pop-pic { display: block; width: 150px; height: auto; margin: .2rem auto; }
#pet-pop-pic[hidden] { display: none; }
.pet-pop.evolve { border-color: #c58bff; background: radial-gradient(circle at 50% 30%, #4a2a78, #1c140d 70%); }

/* ⚔️ pig battles (v1.5) */
.bar { flex-wrap: wrap; row-gap: .4rem; }
@media (max-width: 480px) {
  .bar { gap: .5rem; padding: .55rem .6rem; }
  .bar h1 { font-size: 1rem; }
  .bar .home { font-size: .82rem; }
  .battle-link .txt, .battle-link .new { display: none; }
  .battle-link { padding: .2rem .45rem; font-size: 1rem; }
}
.battle-link { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: .6rem;
  border: 2px solid #ff8a5a; background: #3a1a10; color: #ffd8c0; font-weight: 800; text-decoration: none; font-size: .9rem;
  animation: spinme 1.6s ease-in-out infinite; }
.battle-link:hover, .battle-link:focus-visible { background: #5a2414; color: #fff; }
.new { display: inline-block; margin-left: .3rem; padding: .05rem .3rem; border-radius: .3rem; background: #ff5a3a; color: #fff;
  font: 900 .6rem/1.3 system-ui, sans-serif; letter-spacing: .05em; vertical-align: middle; }
.battle-panel { border-color: #8a3a22; background: radial-gradient(120% 90% at 50% 0%, #3a1a14 0%, var(--panel) 60%); }
.arena { position: relative; width: 100%; }
#battle-arena { display: block; width: 100%; height: auto; aspect-ratio: 720 / 400; border-radius: .9rem; border: 2px solid #5a2a1a;
  background: #120c22; box-shadow: inset 0 0 0 1px #0008; }
.battle-pop { width: min(94%, 22rem); border-color: #ff8a5a; }
.battle-pop.won { border-color: var(--gold); background: radial-gradient(circle at 50% 30%, #5a3e0a, #1c140d 70%); }
.battle-pop.champ { border-color: #ffe14a; box-shadow: 0 0 0 6px #0006, 0 0 40px #ffd24a88; }
.battle-pop.lost { border-color: #ff8a7a; background: radial-gradient(circle at 50% 30%, #4a1a14, #1c140d 70%); }
.battle-pop .pop-big { font-size: 1.45rem; }
.battle-pop-what span { display: block; margin: .15rem 0; color: var(--ink); }
.battle-say { min-height: 1.5em; margin: .5rem 0 .3rem; color: #ffe9b0; font-weight: 700; }
.battle-moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.btn.move { position: relative; overflow: hidden; min-height: 54px; padding: .45rem .5rem; font-size: 1rem; line-height: 1.15;
  background: #ff8a5a; color: #2a0f06; }
.btn.move::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: var(--cd, 0%); background: #0007; transition: width .08s linear; }
.btn.move span { font-size: 1.15rem; }
.btn.move kbd { display: inline-block; margin-left: .2rem; padding: 0 .3rem; border-radius: .3rem; background: #0002; font: 800 .75rem ui-monospace, monospace; }
.btn.move.special { background: #c58bff; color: #1d0a33; }
.btn.move.special.ready { background: linear-gradient(90deg, #ffe14a, #ff5fa2, #5ad1ff, #ffe14a); background-size: 300% 100%;
  animation: specialready 1.4s linear infinite, spinme 1.1s ease-in-out infinite; }
@keyframes specialready { to { background-position: 300% 0; } }
.btn.move.guard { background: #5ad1ff; color: #06202c; }
.btn.move[disabled] { opacity: .45; }
.battle-go-row .btn.big { min-height: 50px; }
.battle-how { margin: .4rem 0 0; color: var(--dim); font-size: .9rem; }
.battle-how summary { cursor: pointer; color: var(--gold); font-weight: 700; min-height: 32px; }
.ladder { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr)); }
.rival { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .45rem .55rem;
  background: #2a2118; border: 2px solid var(--line); border-radius: .85rem; color: var(--ink); font: inherit; cursor: pointer; text-align: center; min-height: 44px; }
.rival canvas { width: 96px; height: 84px; }
.rival b { font-size: .92rem; }
.rival small { color: var(--dim); font-size: .74rem; line-height: 1.25; }
.rival .rstate { font-style: normal; font-size: .76rem; color: var(--gold); font-weight: 700; margin-top: .15rem; }
.rival .rnum { position: absolute; top: .35rem; left: .45rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: #0005; font-weight: 900; font-size: .8rem; }
.rival.on { border-color: var(--gold); background: #3a2d1b; box-shadow: 0 0 0 2px #ffc65c44; }
.rival.beaten { border-color: #5e8f5e; }
.rival.beaten.on { border-color: var(--gold); }
.rival.locked { opacity: .55; cursor: not-allowed; }
.rival.boss { background: linear-gradient(#3a1410, #2a2118 70%); border-color: #a8302a; }
.rival.boss.on { border-color: #ffe14a; }
.rival[disabled] { cursor: not-allowed; }
.battle-record { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); }
.rec { background: #2a2118; border: 1px solid var(--line); border-radius: .7rem; padding: .45rem .55rem; }
.rec span { font-size: 1.2rem; margin-right: .25rem; }
.rec b { font-size: 1.05rem; }
.rec small { display: block; color: var(--dim); font-size: .76rem; }
@media (max-width: 620px) {
  .battle-moves { grid-template-columns: repeat(2, 1fr); }
  .btn.move { min-height: 52px; font-size: .95rem; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-link { font-size: .82rem; padding: .25rem .5rem; }
  .battle-pop { padding: .7rem .7rem .6rem; }
  .battle-pop .pop-big { font-size: 1.15rem; }
  .battle-pop-what span { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-link, .btn.move.special.ready { animation: none; }
  .btn.move::after { transition: none; }
}

/* ✨ v1.6 (7 November 2026): the NEW strip, 👑 growing up, 🏡 the house, 🌱 the garden, 🎮 mini-games, 🗺️ adventures */
.newbar { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: .45rem; align-items: stretch; margin: 0 0 1.1rem; }
.newbar-tag { display: grid; place-items: center; padding: 0 .5rem; border-radius: .7rem; background: #ff5a3a; color: #fff;
  font: 900 .78rem/1.1 system-ui, sans-serif; letter-spacing: .05em; writing-mode: horizontal-tb; }
.newtile { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .45rem .3rem; min-height: 44px; min-width: 0;
  border-radius: .8rem; border: 2px solid #6b4a1e; background: linear-gradient(#3a2a14, #241c15); color: var(--ink); text-decoration: none; text-align: center; }
.newtile:hover, .newtile:focus-visible { border-color: var(--gold); background: linear-gradient(#4a3618, #2a2016); }
.newtile .ni { font-size: 1.5rem; line-height: 1.15; }
.newtile b { font-size: .86rem; line-height: 1.15; }
.newtile small { font-size: .72rem; color: var(--gold); line-height: 1.2; }
.newtile.hot { border-color: #9fe09a; animation: spinme 1.4s ease-in-out infinite; }
@media (max-width: 620px) {
  .newbar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
  .newbar-tag { display: none; }
  .newtile { padding: .35rem .15rem; }
  .newtile .ni { font-size: 1.3rem; }
  .newtile b { font-size: .7rem; }
  .newtile small { font-size: .64rem; }
}
.panel.arrive { animation: arrive 1.1s ease-out; }
@keyframes arrive { 0% { box-shadow: 0 0 0 4px var(--gold), 0 16px 40px #0007; } 100% { box-shadow: 0 0 0 0 #ffc65c00, 0 16px 40px #0007; } }

/* 👑 Pig Grows Up */
.grow-box { margin-top: 1rem; padding: .8rem 1rem; border: 2px solid #8a6a1e; border-radius: .9rem; background: radial-gradient(120% 90% at 20% 0%, #3a2c10, #221a12 70%); }
.grow-box h3 { margin: 0; }
.grow-stage { margin: .3rem 0 .3rem; }
.grow-stage b { color: var(--gold); font-size: 1.15rem; }
.meter.grow { height: 1rem; }
.meter.grow i { background: linear-gradient(90deg, #ffd24a, #ff8a3a, #ff5fa2); }
.grow-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: .5rem 0; }
.grow-card { display: flex; flex-direction: column; align-items: center; padding: .3rem .25rem .4rem; border-radius: .7rem; border: 2px solid var(--line); background: #2a2118; text-align: center; min-width: 0; }
.grow-card canvas { width: 100%; max-width: 132px; height: auto; aspect-ratio: 132 / 112; }
.grow-card b { font-size: .84rem; line-height: 1.2; }
.grow-card small { font-size: .72rem; color: var(--dim); }
.grow-card.got { border-color: #5e8f5e; }
.grow-card.now { border-color: var(--gold); background: #3a2d1b; box-shadow: 0 0 0 2px #ffc65c44; }
.grow-how { margin: .3rem 0; }
.grow-row { margin-top: .3rem; }
.grow-row .btn { min-height: 44px; }
.grow-tummy { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--dim); flex: 1 1 10rem; }
.grow-tummy .meter { flex: 1 1 6rem; display: block; }
#maker .stage { position: relative; }
.grow-float { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); color: #ffe14a; font-weight: 900; font-size: 1.3rem;
  text-shadow: 0 2px 0 #3a1a00, 0 0 12px #000; pointer-events: none; animation: growfloat 1.5s ease-out forwards; white-space: nowrap; }
@keyframes growfloat { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -70px); } }
.party { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: rgba(8, 4, 16, .82); padding: .8rem; }
.party[hidden] { display: none; }
#party-cv { display: block; width: min(100%, 960px); height: auto; aspect-ratio: 720 / 405; border-radius: 1rem; border: 3px solid var(--gold); box-shadow: 0 0 60px #ffd24a55; }
.party-pop { position: static; transform: none; width: min(100%, 26rem); animation: none; }
.party-pop[hidden] { display: none; }
@media (max-width: 620px) { .grow-card b { font-size: .72rem; } .grow-card small { font-size: .64rem; } .grow-box { padding: .7rem .7rem; } }

/* 🏡 the Pig House */
.house-panel { border-color: #8a5a2b; background: radial-gradient(120% 90% at 30% 0%, #3a2414 0%, var(--panel) 60%); }
#house-cv, #garden-cv, #arcade-cv, #trip-map { display: block; width: 100%; height: auto; aspect-ratio: 720 / 400; border-radius: .9rem; border: 2px solid #5a3a1a; touch-action: pan-y; }
#house-cv { cursor: grab; background: #3a2414; }
#house-cv.holding { touch-action: none; }
#house-cv:focus-visible, #garden-cv:focus-visible, #arcade-cv:focus-visible, #trip-map:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.house-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 0; padding: .45rem .55rem; border: 2px dashed var(--gold); border-radius: .8rem; background: #2a2016; }
.house-tools[hidden] { display: none; }
.house-tools .btn { min-height: 44px; padding: .4rem .7rem; }
.house-tools .btn[hidden] { display: none; }
.house-sel { color: var(--gold); margin-right: .2rem; }
.house-pad { display: inline-flex; gap: .3rem; }
.house-pad .btn { min-width: 44px; }
.house-acts .btn { min-height: 44px; }
.house-acts .btn[hidden] { display: none; }
.house-acts .btn.ghost[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.house-acts .btn:not(.ghost)[aria-pressed="true"] { background: #ff8fb8; color: #2a0614; }
.house-shop .house-btns { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; }
.house-shop .house-btns .btn { flex: 1 1 4.5rem; margin-top: 0; min-height: 40px; padding: .35rem .4rem; }
.house-shop.paint { grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); }
.house-sw { display: block; width: 100%; height: 2rem; border-radius: .4rem; border: 1px solid #0006; }

/* 🌱 the Garden */
.garden-panel { border-color: #4f7a3e; background: radial-gradient(120% 90% at 70% 0%, #1f3a1e 0%, var(--panel) 60%); }
#garden-cv { cursor: pointer; background: #6cc04a; }
.garden-seeds { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); }
.btn.seed { display: flex; flex-direction: column; align-items: center; gap: .05rem; background: #2a2118; color: var(--ink); border: 2px solid var(--line); min-height: 44px; padding: .4rem .3rem; }
.btn.seed .sicon { font-size: 1.5rem; line-height: 1.2; }
.btn.seed b { font-size: .9rem; }
.btn.seed small { font-size: .74rem; color: var(--dim); font-weight: 600; }
.btn.seed.on { border-color: var(--gold); background: #3a2d1b; }
.btn.seed.locked { opacity: .55; }
.garden-beds { display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn.bed { min-height: 46px; background: #5a3416; color: #ffe9b0; padding: .35rem .3rem; font-size: .95rem; }
.btn.bed.empty { background: #3a2a18; color: var(--ink); }
.btn.bed.dry { background: #2a6ab0; color: #fff; }
.btn.bed.ready { background: #9fe09a; color: #10260c; animation: spinme 1.3s ease-in-out infinite; }
.btn.bed .t { font-variant-numeric: tabular-nums; }
.garden-pantry { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn.food { min-height: 46px; background: #ff8a5a; color: #2a0f06; font-size: 1.05rem; }
.btn.food small { font-weight: 600; font-size: .78rem; }
@media (max-width: 620px) { .btn.bed { font-size: .84rem; } }

/* 🎮 Mini-games */
.arcade-panel { border-color: #3a5a9a; background: radial-gradient(120% 90% at 50% 0%, #142040 0%, var(--panel) 60%); }
.arcade-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .6rem; }
.btn.arcade-game { display: flex; flex-direction: column; align-items: center; gap: .1rem; background: #2a2118; color: var(--ink); border: 2px solid var(--line); min-height: 44px; padding: .5rem .4rem; }
.btn.arcade-game .sicon { font-size: 1.8rem; line-height: 1.1; }
.btn.arcade-game small { color: var(--dim); font-weight: 600; font-size: .78rem; }
.btn.arcade-game .abest { font-style: normal; color: var(--gold); font-size: .78rem; }
.btn.arcade-game.on { border-color: var(--gold); background: #3a2d1b; }
#arcade-cv { cursor: pointer; background: #7cc8ff; }
#arcade-cv.playing { touch-action: none; }
.arcade-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .5rem; }
.arcade-pad[hidden] { display: none; }
.arcade-pad .btn.move { min-height: 58px; font-size: 1.1rem; user-select: none; -webkit-user-select: none; touch-action: none; }

/* 🗺️ Adventures */
.trip-panel { border-color: #2a6a8a; background: radial-gradient(120% 90% at 50% 0%, #10303a 0%, var(--panel) 60%); }
#trip-map { cursor: pointer; background: #4a9ad8; }
.trip-places { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin-top: .5rem; }
.btn.trip-place { display: flex; flex-direction: column; align-items: center; gap: .05rem; background: #2a2118; color: var(--ink); border: 2px solid var(--line); min-height: 44px; padding: .45rem .3rem; }
.btn.trip-place .sicon { font-size: 1.6rem; line-height: 1.2; }
.btn.trip-place small { color: var(--dim); font-weight: 600; font-size: .76rem; }
.btn.trip-place .go { font-style: normal; color: var(--gold); font-size: .82rem; }
.btn.trip-place.on { border-color: var(--gold); background: #3a2d1b; }
.btn.trip-place.locked { opacity: .55; }
.trip-album { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.postcard-thumb { padding: 0; border: 2px solid var(--line); border-radius: .6rem; background: #fbf3e0; cursor: pointer; overflow: hidden; min-height: 44px; }
.postcard-thumb:hover, .postcard-thumb:focus-visible { border-color: var(--gold); }
.postcard-thumb canvas { display: block; width: 100%; height: auto; aspect-ratio: 240 / 150; }
.trip-pop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 4, .75); padding: .8rem; }
.trip-pop[hidden] { display: none; }
.trip-card { width: min(100%, 32rem); background: #1c140d; border: 3px solid var(--gold); border-radius: 1.1rem; padding: .9rem; text-align: center; box-shadow: 0 18px 50px #000a; }
.trip-pop.flip .trip-card { animation: postflip .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes postflip { from { transform: rotateY(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
#trip-card { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; border-radius: .6rem; margin: .4rem 0; }
.trip-card .pop-row .btn { min-height: 44px; }
.trip-card .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .newtile.hot, .btn.bed.ready, .panel.arrive, .trip-pop.flip .trip-card, .grow-float { animation: none; }
}
.trip-album > p, .garden-pantry > p { grid-column: 1 / -1; }