/* gotchi pages: the landing (a toy box), shop, wardrobe, park, arena,
   boards, graveyard, pet and player pages, rules, faq, admin.
   Tokens come from base.css. Outlines are ink, shadows are hard, sprites are
   integer scaled. Everything outside a screen is cardboard and candy;
   everything inside a screen is LCD. */

/* ------------------------------------------------------------ shared */

:root { --gloss: rgba(255, 255, 255, 0.75); }
:root[data-theme="dark"] { --gloss: rgba(255, 244, 224, 0.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gloss: rgba(255, 244, 224, 0.1); } }

.wrap-narrow { max-width: 820px; }
.sec-title { font-size: 32px; margin-bottom: 6px; }
.sec-sub { color: var(--inksoft); max-width: 60ch; margin-bottom: 20px; }
@media (min-width: 900px) { .sec-title { font-size: 48px; } }

.sticker-text, .phead-title, .wordmark, .final-title {
  color: #fff4e0;
  -webkit-text-stroke: 6px var(--line);
  paint-order: stroke fill;
  text-shadow: 4px 5px 0 var(--line);
  letter-spacing: 0.03em;
}
.phead { padding-top: 28px; padding-bottom: 8px; }
.phead-title { font-size: 48px; margin: 0 0 4px; line-height: 1.05; }
.phead-sub { color: var(--inksoft); max-width: 60ch; margin: 6px 0 0; }
@media (min-width: 900px) { .phead-title { font-size: 64px; } }

.picon { display: inline-block; flex: none; vertical-align: middle; }
.btn .picon { margin: 0 -2px; }

.loading { display: flex; gap: 8px; justify-content: center; padding: 48px 16px; }
.loading i { width: 12px; height: 12px; background: var(--ink); animation: blink 900ms steps(2, jump-none) infinite; }
.loading i:nth-child(2) { animation-delay: 150ms; }
.loading i:nth-child(3) { animation-delay: 300ms; }
.empty-box { background: var(--surface); border: 3px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: var(--radius); }
.empty-box p { margin: 0 0 12px; }
.empty-box p:last-child { margin: 0; }

.chip-ok { background: var(--ok); color: var(--onfill); }
.chip-ok-soft { background: var(--ok); color: var(--onfill); }
.chip-danger { background: var(--danger); color: var(--ondanger); }
.chip-soda { background: var(--soda); color: var(--onfill); }
.burst-sm { --size: 74px; font-size: 11px; padding: 10px; }

/* the grape plastic bezel around every little LCD */
.lcd-bezel, .pcard-screen, .prow-screen {
  display: grid; place-items: center; line-height: 0;
  background: #3a2f48; border: 3px solid var(--line); border-radius: 12px; padding: 5px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .lcd-bezel, :root[data-theme="dark"] .pcard-screen, :root[data-theme="dark"] .prow-screen { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), 0 0 18px rgba(201, 221, 165, 0.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lcd-bezel, :root:not([data-theme="light"]) .pcard-screen, :root:not([data-theme="light"]) .prow-screen { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), 0 0 18px rgba(201, 221, 165, 0.18); } }
.lcd-win { border-radius: 4px; }

/* ------------------------------------------------------------ pet card */

.pcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: var(--border); border-radius: 18px; box-shadow: var(--shadow-sm), var(--inner);
  padding: 10px; text-decoration: none; color: inherit; transition: transform 140ms var(--pop);
}
a.pcard:hover { transform: translateY(-3px) rotate(-0.6deg); }
a.pcard:active { transform: translateY(2px); box-shadow: none; }
.pcard-screen { align-self: center; }
.pcard-body { padding: 8px 2px 0; min-width: 0; }
.pcard-name { font: 700 18px/1.15 var(--font-pixel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-form { font-size: 13px; color: var(--inksoft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-foot { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.pcard-foot .hearts i, .prow-foot .hearts i { width: 12px; height: 11px; }
.pcard-value { margin-top: 6px; font: 700 18px/1 var(--font-pixel); color: var(--ink); }
.pcard.is-mine { background: color-mix(in srgb, var(--gum) 12%, var(--surface)); }
.pcard.is-dead { background: color-mix(in srgb, var(--stone) 30%, var(--surface)); }
.pcard.is-mythic .pcard-screen { border-color: var(--r-mythic); }
.pcard-sm { padding: 8px; border-radius: 14px; }
.pcard-sm .pcard-name { font-size: 16px; }
.loves-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--font-pixel); }
.rank-badge {
  position: absolute; top: -12px; left: -10px; z-index: 2; min-width: 38px; height: 38px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--surface); color: var(--ink); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line);
  font: 700 16px/1 var(--font-pixel);
}
.rank-1 { background: var(--lemon); color: var(--onfill); }
.rank-2 { background: #e6e9ee; color: #2b1d2e; }
.rank-3 { background: #f2c49b; color: #2b1d2e; }
.mine-ribbon {
  position: absolute; top: 12px; right: -7px; z-index: 2; padding: 3px 10px;
  background: var(--gum); color: var(--onfill); border: 2px solid var(--line); border-radius: 6px 0 0 6px;
  font: 700 12px/1.2 var(--font-pixel); transform: rotate(4deg);
}

.pet-grid { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
@media (max-width: 380px) { .pet-grid { gap: 16px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pet-grid .pcard { padding: 8px; } }

/* ranked rows */
.prow {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--surface); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm), var(--inner);
  padding: 10px 14px 10px 10px; text-decoration: none; color: inherit; transition: transform 140ms var(--pop);
}
a.prow:hover { transform: translateX(3px); }
.prow .rank-badge { position: static; }
.prow-name { font: 700 18px/1.15 var(--font-pixel); display: flex; gap: 8px; align-items: center; min-width: 0; }
.prow-name > :first-child { overflow: hidden; text-overflow: ellipsis; }
.you-chip { font-size: 11px; padding: 1px 8px; }
.prow-form { font-size: 13px; color: var(--inksoft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.prow-value { font: 700 20px/1 var(--font-pixel); text-align: right; white-space: nowrap; }
.prow.is-mine { background: color-mix(in srgb, var(--gum) 14%, var(--surface)); border-color: var(--line); }
@media (max-width: 520px) {
  .prow { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; padding: 8px 10px 8px 8px; }
  .prow-value { grid-column: 3; text-align: left; font-size: 16px; margin-top: -4px; }
  .prow .rank-badge { min-width: 32px; height: 32px; font-size: 14px; padding: 0 5px; }
  .prow .rank-badge .picon { display: none; }
}

/* ------------------------------------------------------------ item card */

.r-common { --rc: var(--r-common); }
.r-uncommon { --rc: var(--r-uncommon); }
.r-rare { --rc: var(--r-rare); }
.r-epic { --rc: var(--r-epic); }
.r-legendary { --rc: var(--r-legendary); }
.r-mythic { --rc: var(--r-mythic); }
.icard {
  position: relative; display: flex; flex-direction: column; min-width: 0; text-align: left;
  background: var(--surface); color: var(--ink); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm), var(--inner);
  padding: 18px 10px 10px; font: inherit; transition: transform 140ms var(--pop);
}
button.icard { cursor: pointer; }
button.icard:hover { transform: translateY(-2px) rotate(-0.5deg); }
button.icard:active { transform: translateY(2px); box-shadow: none; }
.icard-hole { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 28px; height: 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); }
.icard-bubble {
  position: relative; display: grid; place-items: center; height: 88px; border-radius: 14px; border: 2px solid var(--line);
  background: linear-gradient(150deg, var(--gloss) 0 16%, transparent 16% 100%), var(--raised);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--rc, var(--r-common)) 50%, transparent);
}
.r-epic .icard-bubble, .r-legendary .icard-bubble, .r-mythic .icard-bubble {
  background: repeating-conic-gradient(from 8deg, color-mix(in srgb, var(--rc) 26%, var(--raised)) 0 12deg, var(--raised) 12deg 24deg);
}
.icard-bubble .burst { position: absolute; top: -12px; right: -10px; }
.icard-name { font: 700 16px/1.15 var(--font-pixel); margin: 8px 0 5px; overflow-wrap: anywhere; }
.icard-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.icard-meta .chip { font-size: 11px; padding: 2px 8px; }
.icard-action { margin-top: auto; padding-top: 10px; display: grid; gap: 6px; }
.icard-action .btn { width: 100%; padding-left: 8px; padding-right: 8px; white-space: normal; text-align: center; line-height: 1.15; font-size: 14px; }
.icard.is-selected { outline: 3px solid var(--soda); outline-offset: 3px; }
.icard.is-equipped { background: color-mix(in srgb, var(--ok) 20%, var(--surface)); }
.icard.is-soldout .icard-bubble canvas { opacity: 0.4; }
.icard-sm { padding: 16px 8px 8px; }
.icard-sm .icard-bubble { height: 64px; }
.icard-sm .icard-name { font-size: 14px; }
.item-grid { display: grid; gap: 16px 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 380px) { .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } }
.price { display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--font-pixel); }
.supply { margin-top: 8px; display: grid; gap: 4px; }
.supply-bar { height: 10px; border: 2px solid var(--line); border-radius: 4px; background: var(--bgalt); overflow: hidden; }
.supply-bar i { display: block; height: 100%; background: var(--tangerine); }
.supply-text { font: 600 12px/1.2 var(--font-pixel); color: var(--inksoft); }
.supply.is-out .supply-text { color: var(--danger); }
.src-line { font: 600 12px/1.3 var(--font-pixel); color: var(--inksoft); }

/* ------------------------------------------------------------ feed */

.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-line { align-items: flex-start; }
.feed-icon { flex: none; padding-top: 2px; }
.feed-text { min-width: 0; overflow-wrap: anywhere; }
.feed-name { font-weight: 800; }
.feed-line time { padding-top: 3px; }
.feed-line.is-dead .feed-text { color: var(--inksoft); }

/* ------------------------------------------------------------ tombstones */

.tomb { display: flex; flex-direction: column; min-width: 0; }
.tomb-grid .tomb-stone, .tomb-row .tomb-stone { flex: 1 1 auto; }
.tomb-stone {
  position: relative; text-align: center; color: var(--ink); background: var(--stone);
  border: var(--border); border-bottom: 0; border-radius: 120px 120px 0 0 / 76px 76px 0 0;
  padding: 26px 14px 12px;
  box-shadow: inset -10px 0 0 var(--stonedeep), inset 0 5px 0 rgba(255, 255, 255, 0.22);
}
.tomb-ghost { display: flex; justify-content: center; min-height: 48px; align-items: flex-end; animation: ghost 2.4s steps(2, jump-none) infinite; }
.tomb-name { font: 700 24px/1.1 var(--font-pixel); margin: 8px 0 2px; overflow-wrap: anywhere; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25); }
.tomb-name a { text-decoration: none; }
.tomb-meta { font: 600 14px/1.3 var(--font-pixel); margin: 0 0 8px; }
.tomb-epitaph { font-weight: 800; font-size: 14px; line-height: 1.4; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--stonedeep) 35%, transparent); }
.tomb-date { font-size: 13px; margin: 0 0 8px; }
.tomb-tx { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.3 var(--font-pixel); background: var(--danger); color: var(--ondanger); padding: 4px 10px; border-radius: 999px; border: 2px solid var(--line); text-decoration: none; }
.tomb-tx:hover { filter: brightness(1.08); }
.tomb-grass {
  height: 12px; border-left: 3px solid var(--line); border-right: 3px solid var(--line);
  background: var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' shape-rendering='crispEdges'%3E%3Cpath fill='%237CD66B' d='M0 3h1V1h1v2h1V0h1v3h2V2h1v1h1v3H0z'/%3E%3Cpath fill='%235FB552' d='M0 5h8v1H0z'/%3E%3C/svg%3E") 0 100% / 16px 12px repeat-x;
}
.tomb-foot {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  background: #6b4a33; color: #fff4e0; border: var(--border); border-top: 0; border-radius: 0 0 14px 14px; padding: 8px 10px; box-shadow: var(--shadow-sm);
}
.tomb-flowers { display: inline-flex; gap: 6px; align-items: center; font: 600 13px/1 var(--font-pixel); }
.flower-btn.is-done { background: var(--ok); color: var(--onfill); }
.tomb-sm .tomb-stone { padding: 20px 8px 10px; border-radius: 90px 90px 0 0 / 60px 60px 0 0; }
.tomb-sm .tomb-name { font-size: 18px; }
.tomb-sm .tomb-meta { font-size: 12px; }
.tomb-sm .tomb-foot { justify-content: center; }
.tomb-grid { display: grid; gap: 20px 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 480px) { .tomb-grid { grid-template-columns: 1fr; } }
@keyframes ghost { 50% { transform: translateY(-3px); } }

/* ------------------------------------------------------------ share sheet */

.share-sheet { display: grid; gap: 14px; }
.share-preview { border: var(--border); border-radius: 14px; overflow: hidden; background: var(--bgalt); line-height: 0; box-shadow: var(--shadow-sm); }
.share-card-img { width: 100%; height: auto; }
.share-fallback { display: grid; place-items: center; padding: 18px; background: #3a2f48; }
.share-post { background: var(--raised); border: 2px dashed var(--line); border-radius: 12px; padding: 10px 14px; }
.share-post-label { font-size: 12px; color: var(--inksoft); margin-bottom: 4px; }
.share-post-text { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.share-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.share-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) { .share-actions { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ capsule pull */

.pull-stage { position: relative; display: grid; justify-items: center; text-align: center; padding-top: 4px; }
.pull-art { position: relative; width: 220px; height: 210px; }
.pull-capsule { position: absolute; left: 50%; top: 58px; width: 100px; height: 90px; margin-left: -50px; }
.pull-half { position: absolute; inset: 0; transition: transform 260ms var(--pop), opacity 200ms steps(2, jump-none); }
.pull-half svg { width: 100px; height: auto; }
.pull-top { clip-path: inset(0 0 50% 0); }
.pull-bot { clip-path: inset(50% 0 0 0); }
.is-shaking .pull-capsule { animation: shake var(--spd, 120ms) steps(2, jump-none) infinite; }
.is-split .pull-top { transform: translate(-46px, -40px) rotate(-28deg); opacity: 0; }
.is-split .pull-bot { transform: translate(46px, 36px) rotate(22deg); opacity: 0; }
.pull-prize { position: absolute; inset: 0; display: grid; place-items: center; transform: scale(0); transition: transform 240ms var(--pop); }
.is-revealed .pull-prize { transform: scale(1); }
.pull-burst, .pull-burst-ink { position: absolute; inset: 0; clip-path: polygon(50% 0, 58% 22%, 75% 7%, 72% 28%, 93% 25%, 80% 42%, 100% 50%, 80% 58%, 93% 75%, 72% 72%, 75% 93%, 58% 78%, 50% 100%, 42% 78%, 25% 93%, 28% 72%, 7% 75%, 20% 58%, 0 50%, 20% 42%, 7% 25%, 28% 28%, 25% 7%, 42% 22%); }
.pull-burst-ink { background: var(--line); animation: spin 8s steps(32) infinite; }
.pull-burst { inset: 6px; background: var(--rc); animation: spin 8s steps(32) infinite; }
.pull-item { position: relative; z-index: 1; animation: wobble 900ms steps(4) infinite; }
.pull-info { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 180ms, transform 220ms var(--pop); display: grid; justify-items: center; gap: 8px; }
.is-revealed .pull-info { visibility: visible; opacity: 1; transform: none; }
.pull-line { font: 600 16px/1.3 var(--font-pixel); margin: 0; }
.pull-name { font-size: 32px; margin: 0; }
.pull-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.pull-bonus { display: flex; align-items: center; gap: 6px; font-weight: 800; margin: 0; }
.pull-fair { margin: 4px 0 0; }
@keyframes shake { 0% { transform: translateX(calc(var(--amp, 3px) * -1)) rotate(-5deg); } 100% { transform: translateX(var(--amp, 3px)) rotate(5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ landing */

.home .section { padding: 48px 0; }
.hero { padding: 20px 0 36px; border-bottom: var(--border); }

.wordmark { display: inline-block; font: 700 64px/1 var(--font-pixel); }
.wordmark-xl { font-size: 64px; }
.wm-i { position: relative; display: inline-block; }
.wm-i::after { content: ""; position: absolute; left: 50%; top: 0.06em; width: 0.16em; height: 0.16em; transform: translateX(-50%); background: var(--gum); outline: 3px solid var(--line); box-shadow: 4px 5px 0 3px var(--line); animation: beat 4s steps(1, end) infinite; }
.pack .wm-i::after { background: #d6246e; }
@media (min-width: 900px) { .wordmark-xl { font-size: 96px; } }
@keyframes beat { 0%, 84%, 88%, 92%, 100% { transform: translateX(-50%) scale(1); } 86%, 90% { transform: translateX(-50%) scale(1.3); } }

.pack {
  position: relative; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "window" "body";
  margin-top: 8px; padding: 44px 16px 20px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gum) 70%, #7a1845) 0 1.6px, transparent 2px) 0 0 / 11px 11px, var(--gum);
  color: var(--onfill); border: var(--border); border-radius: 28px; box-shadow: 0 8px 0 var(--line), var(--inner);
}
.pack-hole { position: absolute; top: 12px; left: 50%; width: 84px; height: 20px; transform: translateX(-50%); border-radius: 999px; background: var(--bg); border: 3px solid var(--line); box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.12); }
.pack-head { grid-area: head; text-align: center; display: grid; justify-items: center; gap: 12px; }
.pack-headline {
  display: inline-block; margin: 0; font-size: 32px; line-height: 1.1; color: var(--ink);
  background: var(--surface); border: var(--border); border-radius: 14px; padding: 10px 16px; box-shadow: 0 5px 0 var(--line); transform: rotate(-1.5deg);
}
.pack-window { grid-area: window; position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; }
.blister-slot { width: 100%; min-width: 0; display: grid; place-items: center; }

.blister {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 400px; min-height: 360px; padding: 26px 18px;
  border: 3px solid var(--line); border-radius: 56px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.62) 0 14%, rgba(255, 255, 255, 0.16) 14% 56%, rgba(255, 255, 255, 0.34) 56% 60%, rgba(255, 255, 255, 0.12) 60% 100%);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.3), inset 0 -10px 0 rgba(43, 29, 46, 0.12), 0 6px 0 var(--line);
}
.blister::before { content: ""; position: absolute; top: 18px; left: 22px; width: 18px; height: 70px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); transform: rotate(18deg); pointer-events: none; }
.pack-burst { position: absolute; top: -26px; right: -4px; --size: 104px; z-index: 3; font-size: 13px; }
.pack-caption { margin: 8px 0 0; font-weight: 700; font-size: 16px; text-align: center; }
.pack-note { margin: 0; text-align: center; font-weight: 700; opacity: 0.85; }
.pack-body { grid-area: body; background: var(--surface); color: var(--ink); border: var(--border); border-radius: 20px; padding: 18px; box-shadow: 0 5px 0 var(--line); }
.pack-sub { font-size: 17px; font-weight: 700; margin: 0 0 16px; }
.pack-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pack-ctas .btn { flex: 1 1 auto; }
.barcode-label { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--raised); min-width: 0; }
.barcode { flex: none; width: 58px; height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 6px, var(--ink) 6px 9px, transparent 9px 10px, var(--ink) 10px 11px, transparent 11px 13px); }
.barcode-soon { font-weight: 700; font-size: 16px; }
.barcode-ca { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.barcode-ca code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1 var(--font-pixel); }

/* a still stand in for the demo device until device.js is here */
.fb-device {
  position: relative; width: 262px; height: 300px; padding: 44px 26px 20px; display: grid; justify-items: center; align-content: start; gap: 18px;
  border: 3px solid var(--line); border-radius: 48% 48% 46% 46% / 52% 52% 44% 44%;
  background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.85) 0 9%, transparent 9.5%), linear-gradient(180deg, #ff8cc1, #ff5ca8);
  box-shadow: inset -12px -14px 0 rgba(214, 36, 110, 0.35), 0 6px 0 var(--line);
}
.fb-loop { position: absolute; top: -18px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border: 5px solid var(--lemon); outline: 3px solid var(--line); border-radius: 999px; }
.fb-face { background: #ffd9ea; border: 3px solid var(--line); border-radius: 22px; padding: 6px 10px 10px; display: grid; justify-items: center; gap: 4px; }
.fb-print { font-size: 12px; color: #2b1d2e; }
.fb-screen { line-height: 0; border: 3px solid var(--line); border-radius: 6px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3); }
.fb-screen canvas { width: 192px; height: 144px; }
.fb-buttons { display: flex; gap: 18px; }
.fb-buttons i { width: 30px; height: 30px; border-radius: 999px; background: var(--lemon); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
@media (max-width: 359px) { .fb-device { transform: scale(0.9); } }

@media (min-width: 900px) {
  .hero { padding: 28px 0 48px; }
  .pack { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "head window" "body window"; align-items: start; padding: 64px 40px 40px; gap: 28px 40px; }
  .pack-head { text-align: left; justify-items: start; align-self: end; }
  .pack-headline { font-size: 48px; }
  .pack-window { align-self: center; }
  .blister { min-height: 460px; }
}

/* phones: give the demo device every pixel we can */
@media (max-width: 520px) {
  .hero .wrap { padding: 0 8px; }
  .pack { padding: 44px 4px 14px; border-radius: 24px; }
  .blister { padding: 22px 0 14px; border-radius: 40px; min-height: 0; }
  .pack-head, .pack-body { margin: 0 6px; }
}
@media (max-width: 370px) { .hero .wrap { padding: 0 6px; } }

/* the one rule: a warning label */
.rule-sec { padding-top: 40px; }
.warn {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
  background: var(--surface); border: var(--border); border-radius: 20px; padding: 20px 20px 20px 42px; box-shadow: var(--shadow), var(--inner); overflow: hidden;
}
.warn-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-right: 3px solid var(--line); background: repeating-linear-gradient(-45deg, var(--danger) 0 9px, var(--lemon) 9px 18px); }
.warn-kicker { margin: 0; font: 700 16px/1 var(--font-pixel); letter-spacing: 0.06em; color: var(--danger); }
.warn-title { font-size: 24px; margin: 6px 0 10px; }
.warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.warn-list li { position: relative; padding-left: 20px; font-weight: 700; }
.warn-list li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; background: var(--danger); }
@media (max-width: 420px) { .warn-icon svg { width: 40px; height: auto; } }
@media (min-width: 900px) { .warn { padding: 28px 32px 28px 56px; } .warn-stripe { width: 30px; } .warn-title { font-size: 32px; } }

/* stats on little LCDs */
.stats-sec { padding-top: 32px; }
.lcd-stats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lcd-stat { background: var(--surface); border: var(--border); border-radius: 16px; padding: 8px 8px 6px; box-shadow: var(--shadow-sm), var(--inner); min-width: 0; }
.lcd-num {
  background-color: var(--lcd0); color: var(--lcd3); border: 3px solid var(--line); border-radius: 8px; padding: 10px 4px 8px; text-align: center;
  font: 700 24px/1 var(--font-pixel); text-shadow: 2px 2px 0 rgba(31, 46, 27, 0.15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: linear-gradient(rgba(157, 184, 120, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 184, 120, 0.16) 1px, transparent 1px);
  background-size: 3px 3px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.14);
}
.lcd-label { margin-top: 6px; text-align: center; font: 600 13px/1.2 var(--font-pixel); }
.lcd-stat.is-dead .lcd-label { color: var(--danger); }
.gen-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; padding: 12px 16px; background: var(--lemon); color: var(--onfill); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.gen-icons { display: flex; gap: 6px; align-items: flex-end; }
.gen-text { flex: 1 1 260px; display: grid; gap: 2px; font-weight: 700; }
.gen-text b { font-size: 18px; }
.gen-count { display: grid; gap: 4px; font-weight: 700; }
.gen-bar { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; width: 220px; max-width: 100%; padding: 3px; background: var(--lcd0); border: 2px solid var(--line); border-radius: 6px; }
.gen-bar i { height: 10px; background: rgba(157, 184, 120, 0.45); }
.gen-bar i.on { background: var(--lcd3); }
@media (min-width: 900px) { .lcd-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lcd-num { font-size: 32px; } }

/* how it works */
.how-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 28px; }
.how-step { position: relative; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--inner); padding: 22px 20px 18px; }
.how-step h3 { margin: 0 0 6px; }
.how-step p { margin: 0; }
.how-n { position: absolute; top: -16px; left: -10px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--lemon); color: var(--onfill); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line); font: 700 24px/1 var(--font-pixel); }
.how-art { height: 112px; display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin-bottom: 14px; padding: 10px; background: var(--bgalt); border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.how-art .hearts { align-self: center; }
.how-art .hearts i { width: 20px; height: 18px; }
@media (min-width: 900px) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* species lineup */
.species-sec .wrap { display: grid; }
.species-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: 20px 6px 10px;
  background: var(--surface); color: var(--ink); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm), var(--inner);
  font: inherit; cursor: pointer; transition: transform 140ms var(--pop);
}
.sp-card:hover { transform: translateY(-2px); }
.sp-card[aria-pressed="true"] { background: var(--lemon); color: var(--onfill); transform: translateY(-3px) rotate(-1.5deg); }
.sp-hole { position: absolute; top: 6px; width: 24px; height: 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--bgalt); }
.sp-art { height: 56px; display: flex; align-items: flex-end; }
.sp-name { font: 700 16px/1 var(--font-pixel); }
.sp-tags .chip { font-size: 11px; padding: 1px 7px; }
.sp-bio { display: none; margin: 0; font-size: 13px; text-align: center; line-height: 1.35; }
.forms-panel { margin-top: 18px; background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--inner); padding: 18px; min-width: 0; }
.forms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 4px; }
.forms-head h3 { margin: 0; font-size: 32px; }
.forms-bio { margin: 0 0 14px; font-weight: 700; }
.forms-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.form-fig { margin: 0; text-align: center; min-width: 0; }
.form-sprite { height: 88px; display: flex; align-items: flex-end; justify-content: center; padding: 6px; background: var(--bgalt); border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 12px; }
.form-fig figcaption { display: grid; gap: 2px; margin-top: 6px; }
.form-fig b { font: 700 15px/1.1 var(--font-pixel); }
.form-fig figcaption span { font-size: 12px; color: var(--inksoft); line-height: 1.3; }
.forms-panel > .small { margin: 14px 0 0; }
@media (min-width: 1000px) {
  .species-sec .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 28px; align-items: start; }
  .species-sec .sec-title, .species-sec .sec-sub { grid-column: 1 / -1; }
  .species-grid { gap: 14px; }
  .forms-panel { margin-top: 0; position: sticky; top: calc(var(--navh) + 16px); }
  .sp-bio { display: block; }
}

/* bond hearts ladder */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tier { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; background: var(--surface); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm), var(--inner); padding: 12px 16px; }
.tier-min { font: 700 16px/1.1 var(--font-pixel); text-align: right; }
.tier-body { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.tier-5 { background: #2b1d2e; color: #fff4e0; }
.tier-5 .hearts i::after { background: #2b1d2e; }
.tier-5 .hearts.gold i.on::after { background: var(--gold); }
.tier-5 .hearts i { background: #fff4e0; }
.tiers-note { margin-top: 14px; }
@media (min-width: 900px) {
  .tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 12px; }
  .tier { grid-template-columns: 1fr; align-content: start; text-align: left; }
  .tier-min { text-align: left; font-size: 16px; }
  .tier-1 { min-height: 170px; } .tier-2 { min-height: 200px; } .tier-3 { min-height: 230px; } .tier-4 { min-height: 260px; } .tier-5 { min-height: 290px; }
}

/* live: receipt feed and park strip */
.live-grid { display: grid; gap: 28px; }
.receipt { position: relative; align-self: start; background: var(--raised); border: var(--border); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 16px 16px 6px; }
.receipt-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 3px double var(--line); }
.receipt-head h2 { margin: 0; font-size: 24px; }
.live-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--danger); border: 2px solid var(--line); animation: blink 1.2s steps(2, jump-none) infinite; }
.receipt-body { max-height: 440px; overflow-y: auto; }
.receipt-tear { position: absolute; left: -3px; right: -3px; bottom: -12px; height: 12px; background: linear-gradient(-45deg, transparent 6px, var(--raised) 6px) 0 0 / 12px 12px repeat-x, linear-gradient(45deg, transparent 6px, var(--raised) 6px) 0 0 / 12px 12px repeat-x; }
.park-card { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--inner); padding: 16px 16px 0; overflow: hidden; min-width: 0; }
.park-card .sec-title { font-size: 24px; margin: 0; }
.park-card .sec-sub { margin: 0; }
.park-strip { margin: 14px -16px 0; border-top: var(--border); line-height: 0; min-height: 120px; }
.park-strip .empty { line-height: 1.5; }
.park-canvas { display: block; }
@media (min-width: 900px) { .live-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; } }

/* graveyard preview */
.tomb-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
@media (min-width: 900px) { .tomb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* faq */
.faq-list { display: grid; gap: 10px; margin-bottom: 16px; }
.faq-item { background: var(--surface); border: var(--border); border-radius: 16px; box-shadow: var(--shadow-sm), var(--inner); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 44px; font: 700 18px/1.25 var(--font-pixel); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; margin-left: auto; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center / 14px 4px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 4px 14px no-repeat; transition: transform 160ms var(--pop); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.faq-item > p { margin: 0; padding: 12px 16px 16px; }
.faq-n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--lemon); color: var(--onfill); border: 2px solid var(--line); font-size: 14px; }
.faq-page { padding-top: 12px; }
.faq-more { margin-top: 20px; }

/* final call */
.final-sec { padding: 56px 0 16px; }
.final-in { display: grid; justify-items: center; text-align: center; gap: 18px; }
.final-egg { animation: wobble 1.6s steps(4) infinite; }
.final-title { font-size: 48px; margin: 0; }
@media (min-width: 900px) { .final-title { font-size: 64px; } }

/* ------------------------------------------------------------ dialogs with a band */

.band-dialog .band-head { display: flex; align-items: center; gap: 10px; margin: -22px -22px 16px; padding: 14px 56px 14px 22px; border-bottom: var(--border); border-radius: calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0; background: var(--gum); color: var(--onfill); }
.band-dialog .band-head h2 { margin: 0; font-size: 24px; }
.band-burn .band-head { background: var(--tangerine); }
.band-danger .band-head { background: var(--danger); color: var(--ondanger); }
.band-body .stack > p { margin: 0; }
.burn-final { font-weight: 800; color: var(--danger); }
.modal-card:has(.band-dialog) > .modal-x { z-index: 2; background: var(--surface); }

/* ------------------------------------------------------------ shop */

.pre-note { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 10px 14px; background: var(--lemon); color: var(--onfill); border: var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); font: 600 16px/1.3 var(--font-pixel); }
.shop-top { padding-top: 16px; }
.cur-row { display: grid; gap: 14px; }
.cur-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cur { border: var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm), var(--inner); color: var(--onfill); min-width: 0; }
.cur-bits { background: var(--soda); }
.cur-credit { background: var(--tangerine); }
.cur-signin { background: var(--surface); color: var(--ink); display: grid; gap: 10px; justify-items: start; }
.cur-signin p { margin: 0; font-weight: 700; }
.cur-top { display: flex; align-items: center; gap: 10px; }
.cur-n { font: 700 24px/1 var(--font-pixel); }
.cur-label { font: 600 13px/1.2 var(--font-pixel); }
.cur-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.4; font-weight: 700; }
@media (max-width: 380px) { .cur-top { flex-direction: column; align-items: flex-start; } .cur-desc { display: none; } }
@media (min-width: 900px) { .cur-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .cur-n { font-size: 32px; } }

.burn-panel { background: var(--surface); border: var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm), var(--inner); display: grid; gap: 10px; min-width: 0; }
.burn-head { display: flex; gap: 12px; align-items: center; }
.burn-head h3 { margin: 0; font-size: 24px; }
.burn-head p { margin: 0; color: var(--inksoft); }
.burn-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.burn-input { position: relative; flex: 1 1 180px; display: flex; align-items: center; min-width: 0; }
.burn-input .input { padding-right: 72px; }
.burn-input .btn { position: absolute; right: 7px; }
.burn-panel .hint { margin: 0; }
.burn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 600 14px/1.3 var(--font-pixel); }
.burn-steps:empty { display: none; }
.burn-steps li { display: flex; gap: 8px; align-items: center; }
.burn-steps li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--tangerine); border: 2px solid var(--line); }
.burn-steps li.is-bad { color: var(--danger); }
.burn-steps li.is-bad::before { background: var(--danger); }
.burn-claim summary { cursor: pointer; font: 600 14px/1.2 var(--font-pixel); color: var(--inksoft); padding: 6px 0; min-height: 32px; }
.burn-claim .burn-row { margin-top: 6px; }
.burn-claim .input { flex: 1 1 200px; min-width: 0; }
.input-sm { min-height: 40px; font-size: 14px; padding: 8px 12px; }

.shop-tabs { position: sticky; top: var(--navh); z-index: 20; margin-top: 24px; padding: 10px 0; background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: var(--border); border-top: var(--border); }
.tabs-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -4px; scroll-padding: 16px; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll .tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
@media (min-width: 1100px) { .tabs-scroll { flex-wrap: wrap; overflow: visible; } }
.shop-shelf { padding-top: 22px; }
.shelf-note { margin: 0 0 14px; }

.machines { display: grid; gap: 18px; }
@media (min-width: 900px) { .machines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.machine { display: grid; gap: 12px; align-content: start; background: var(--gum); color: var(--onfill); border: var(--border); border-radius: 26px 26px 18px 18px; padding: 16px; box-shadow: var(--shadow), var(--inner); }
.machine-capsule_premium { background: var(--lemon); }
.machine-egg_mystery { background: var(--soda); }
.machine h3 { margin: 0; font-size: 24px; text-align: center; }
.machine-dome { display: grid; place-items: center; height: 150px; border: 3px solid var(--line); border-radius: 80px 80px 16px 16px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.7) 0 14%, rgba(255, 255, 255, 0.28) 14% 100%); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.3); }
.machine-art { animation: wobble 2.4s steps(4) infinite; }
.machine:hover .machine-art { animation-duration: 600ms; }
.odds { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; background: var(--surface); color: var(--ink); border: var(--border); border-radius: 14px; }
.odds-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.odds-row .chip { font-size: 11px; justify-self: start; }
.odds-bar { height: 10px; border: 2px solid var(--line); border-radius: 3px; background: var(--bgalt); overflow: hidden; }
.odds-bar i { display: block; height: 100%; background: var(--rc, var(--r-common)); }
.odds-row b { font: 700 14px/1 var(--font-pixel); text-align: right; }
.machine .small.muted { color: inherit; opacity: 0.85; margin: 0; font-weight: 700; }
.my-eggs { margin-top: 28px; }

.svc-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; background: var(--surface); border: var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-sm), var(--inner); }
.svc-icon { width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 14px; background: var(--raised); }
.svc-text h3 { margin: 0 0 4px; font-size: 18px; }
.svc-text p { margin: 0 0 6px; font-size: 14px; color: var(--inksoft); }
.svc-action { grid-column: 1 / -1; }
.svc-action .btn { width: 100%; }
.svc-dead { grid-column: 1 / -1; display: grid; gap: 8px; background: color-mix(in srgb, var(--stone) 25%, var(--surface)); border: var(--border); border-radius: 18px; padding: 12px 14px; }
.svc-dead .row b { flex: 1; }

/* ------------------------------------------------------------ wardrobe */

.wr-body { padding-top: 12px; }
.wr-picker { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 12px; margin: 0 -2px 8px; }
.wr-picker::-webkit-scrollbar { display: none; }
.wr-pet { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px 6px 8px; border: var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line); font: 700 16px/1 var(--font-pixel); cursor: pointer; }
.wr-pet canvas { max-height: 40px; width: auto; }
.wr-pet.is-on { background: var(--gum); color: var(--onfill); }
.wr-pet.is-dead { background: var(--stone); color: var(--onfill); }
.wr-grid-main { display: grid; gap: 24px; }
.wr-left { min-width: 0; }
.wr-dressing { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.wr-stage { display: grid; justify-items: center; gap: 12px; }
.wr-preview { width: 100%; max-width: 100%; display: grid; place-items: center; }
.wr-shell {
  padding: 22px 20px 26px; border: 3px solid var(--line); border-radius: 40px;
  background: radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.7) 0 7%, transparent 7.5%), var(--shell, var(--gum));
  box-shadow: inset -10px -12px 0 rgba(0, 0, 0, 0.14), 0 6px 0 var(--line);
}
.wr-bezel { line-height: 0; border: 3px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3); }
.wr-lcd { max-width: 100%; height: auto; }
.wr-preview[class*="fr-"]:not(.fr-none) { padding: 12px; border: 3px solid var(--line); border-radius: 50px; box-shadow: 0 6px 0 var(--line); }
.wr-preview[class*="fr-"]:not(.fr-none) .wr-shell { box-shadow: inset -10px -12px 0 rgba(0, 0, 0, 0.14); }
.fr-wood { background: repeating-linear-gradient(90deg, #a0673d 0 8px, #8a5530 8px 16px); }
.fr-silver { background: repeating-linear-gradient(135deg, #e6e9ee 0 10px, #b9c0ca 10px 20px); }
.fr-gold { background: repeating-linear-gradient(135deg, #ffe08a 0 10px, #ffb526 10px 20px); }
.fr-holo { background: conic-gradient(#ff8fb1 0 60deg, #ffd43b 60deg 120deg, #7cd66b 120deg 180deg, #38b6ff 180deg 240deg, #a55cff 240deg 300deg, #ff8fb1 300deg); }
.fr-flame { background: repeating-linear-gradient(-45deg, #ff8c2b 0 10px, #ffd43b 10px 20px); }
.fr-veteran { background: repeating-linear-gradient(90deg, #3a3346 0 10px, #5e566a 10px 20px); }
.name-tag { padding: 6px 18px; border: var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); font: 700 24px/1.1 var(--font-pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-neon { background: #1a1320; color: #5cf2ff; text-shadow: 2px 2px 0 #ff5ca8; }
.tg-pixel { background: var(--lcd0); color: var(--lcd3); }
.tg-rainbow { background: linear-gradient(90deg, #ff8fb1 0 20%, #ffd43b 20% 40%, #9be58a 40% 60%, #6ec9ff 60% 80%, #c4a0ff 80%); color: #2b1d2e; }
.tg-gold { background: #ffb526; color: #2b1d2e; }
.tg-streak { background: var(--tangerine); color: var(--onfill); }
.wr-charm { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--lemon); color: var(--onfill); font: 700 16px/1 var(--font-pixel); }
.wr-slots { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.wr-slot { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; min-height: 76px; border: var(--border); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line); cursor: pointer; font: inherit; }
.wr-slot.is-on { background: var(--lemon); color: var(--onfill); transform: translateY(-2px); }
.wr-slot-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 8px; background: var(--raised); }
.wr-slot-icon canvas { max-width: 36px; max-height: 36px; }
.wr-slot-empty { width: 14px; height: 14px; border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 3px; }
.wr-slot-name { font: 600 12px/1.1 var(--font-pixel); }
.wr-items-head { margin-bottom: 12px; }
.wr-items-head h2 { margin: 0; font-size: 24px; }
.wr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wr-actions .btn { flex: 1 1 auto; }
.gift-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--raised); border: 2px solid var(--line); border-radius: 12px; }
.gift-warn { color: var(--danger); font-weight: 800; }
@media (min-width: 560px) { .wr-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .wr-grid-main { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: 32px; }
  .wr-left { position: sticky; top: calc(var(--navh) + 16px); }
}

/* ------------------------------------------------------------ park */

.park-meta { margin-top: 10px; }
.park-world { margin-top: 16px; border-top: var(--border); border-bottom: var(--border); background: var(--bgalt); }
.park-stage { position: relative; line-height: 0; display: flex; justify-content: center; overflow: hidden; }
.park-pop {
  position: absolute; z-index: 5; line-height: 1.4; padding: 14px; background: var(--surface); color: var(--ink);
  border: var(--border); border-radius: 18px; box-shadow: var(--shadow), var(--inner); animation: popin 220ms var(--pop);
}
.park-pop .modal-x { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 18px; }
.park-pop-top { display: flex; gap: 10px; align-items: center; padding-right: 30px; }
.park-pop-sprite { flex: none; width: 56px; height: 56px; display: grid; place-items: end center; background: var(--bgalt); border: 2px solid var(--line); border-radius: 12px; padding: 4px; }
.park-pop-sprite canvas { max-width: 48px; max-height: 48px; }
.park-pop-name { font: 700 20px/1.1 var(--font-pixel); display: block; }
.park-pop-row { margin-top: 10px; gap: 8px; }
.park-pop-actions { margin-top: 12px; gap: 8px; }
.park-pop-actions .btn { flex: 1; }
.park-list { padding-top: 32px; }
.park-list-title { font-size: 24px; margin-bottom: 18px; }

/* ------------------------------------------------------------ arena */

.arena-top { display: grid; gap: 14px; padding-top: 12px; }
.arena-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: #3a2f48; color: #fff4e0; border: var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.arena-clock-label { font-weight: 700; font-size: 16px; }
.arena-clock-lcd { flex: 1 1 auto; text-align: center; padding: 8px 14px; background: var(--lcd0); color: var(--lcd3); border: 3px solid var(--line); border-radius: 10px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.18); font: 700 32px/1 var(--font-pixel); letter-spacing: 0.06em; text-shadow: 2px 2px 0 rgba(31, 46, 27, 0.15); background-image: linear-gradient(rgba(157, 184, 120, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 184, 120, 0.16) 1px, transparent 1px); background-size: 3px 3px; }
.arena-rules { background: var(--surface); border: var(--border); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-sm), var(--inner); }
.arena-rules p { margin: 8px 0 0; }
.arena-rules .row { gap: 6px 8px; }
.arena-divs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (min-width: 900px) { .arena-top { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: stretch; } .arena-clock-lcd { font-size: 48px; } }
.arena-events { padding-top: 28px; }
.ev-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ev { display: grid; gap: 12px; align-content: start; background: var(--surface); border: var(--border); border-radius: 20px; padding: 14px; box-shadow: var(--shadow), var(--inner); min-width: 0; }
.ev-head { display: flex; gap: 12px; align-items: center; margin: -14px -14px 0; padding: 14px; border-bottom: var(--border); border-radius: 17px 17px 0 0; color: var(--onfill); }
.ev-race .ev-head { background: var(--soda); }
.ev-quiz .ev-head { background: var(--lemon); }
.ev-tug .ev-head { background: var(--tangerine); }
.ev-pageant .ev-head { background: var(--gum); }
.ev-head h2 { margin: 0; font-size: 32px; }
.ev-head p { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.ev-icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--raised); border: 3px solid var(--line); border-radius: 14px; }
.ev-counts { display: grid; gap: 6px; }
.ev-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-count b { font: 700 16px/1 var(--font-pixel); }
.ev-enter { display: grid; gap: 8px; }
.ev-enter .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.15; }
.ev-enter .btn canvas, .ev-in canvas { max-height: 24px; width: auto; }
.ev-in { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 12px; font: 600 14px/1.2 var(--font-pixel); }
.ev-in .chip { margin-left: auto; }
.arena-signin { margin-top: 16px; text-align: center; }
.arena-results { padding-top: 40px; }
.podium-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .podium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.podium-set { background: var(--bgalt); border: var(--border); border-radius: 20px; padding: 14px 12px 0; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; }
.podium-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.podium-head h3 { margin: 0; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; }
.pod { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.pod-pet { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: inherit; min-width: 0; max-width: 100%; }
.pod-screen { padding: 3px; border-radius: 10px; max-width: 100%; }
.pod-screen canvas { max-width: 100%; height: auto; }
.pod-name { font: 700 14px/1.1 var(--font-pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 12px; color: var(--inksoft); }
.pod-block { width: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 10px; border: var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; font: 700 16px/1 var(--font-pixel); color: #2b1d2e; }
.pod-1 .pod-block { height: 104px; background: #ffd43b; }
.pod-2 .pod-block { height: 80px; background: #e6e9ee; }
.pod-3 .pod-block { height: 64px; background: #f2c49b; }
.pod.is-mine .pod-name { color: var(--gumdeep); }
.pod-share { margin-bottom: 6px; order: -1; }

/* ------------------------------------------------------------ graveyard */

.grave-meta { margin-top: 14px; gap: 10px; }
.grave-count { font-size: 14px; padding: 5px 12px; }
.grave-fence {
  height: 30px; margin-top: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15' shape-rendering='crispEdges'%3E%3Cpath fill='%232B1D2E' d='M5 0h2v1h1v2H7v12H5V3H4V1h1zM0 7h12v2H0zM0 12h12v2H0z'/%3E%3C/svg%3E") 0 0 / 24px 30px repeat-x;
}
.grave-ground { background: color-mix(in srgb, var(--stone) 22%, var(--bg)); border-top: var(--border); padding: 28px 0 40px; }
:root[data-theme="dark"] .grave-fence { filter: invert(0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grave-fence { filter: invert(0.9); } }
.grave-more { display: flex; justify-content: center; margin-top: 24px; }

/* ------------------------------------------------------------ boards */

.boards-controls { display: grid; gap: 10px; padding-top: 12px; }
.boards-species { max-width: 240px; }
@media (min-width: 900px) { .boards-controls { grid-template-columns: minmax(0, 1fr) 240px; align-items: center; } }
.boards-mine { margin: 14px 0 0; gap: 8px; }
.boards-mine:empty { display: none; }
.boards-mine .chip { text-decoration: none; min-height: 32px; }
.boards-list { padding-top: 28px; }
.boards-top { display: grid; gap: 24px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.boards-top-1 { grid-column: 1 / -1; justify-self: center; width: min(100%, 260px); }
.boards-top .pcard { height: 100%; }
.boards-top-1 .pcard { background: color-mix(in srgb, var(--lemon) 30%, var(--surface)); }
@media (min-width: 700px) {
  .boards-top { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .boards-top-1 { grid-column: 2; grid-row: 1; width: auto; transform: translateY(-16px); }
  .boards-top-2 { grid-column: 1; grid-row: 1; }
  .boards-top-3 { grid-column: 3; grid-row: 1; }
}
.boards-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ------------------------------------------------------------ public pet page */

.gp { display: grid; gap: 20px; padding-top: 24px; }
.gp-left { display: grid; gap: 14px; justify-items: center; align-content: start; min-width: 0; }
.gp-pack {
  position: relative; width: 100%; display: grid; place-items: center; padding: 48px 12px 24px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gum) 70%, #7a1845) 0 1.6px, transparent 2px) 0 0 / 11px 11px, var(--gum);
  border: var(--border); border-radius: 28px; box-shadow: 0 8px 0 var(--line);
}
.gp.is-dead .gp-pack { background: radial-gradient(circle, color-mix(in srgb, var(--stone) 70%, #2b1d2e) 0 1.6px, transparent 2px) 0 0 / 11px 11px, var(--stone); }
.gp-burst { position: absolute; top: 10px; right: 8px; --size: 88px; z-index: 3; font-size: 13px; }
.gp-device { display: grid; place-items: center; width: 100%; min-width: 0; }
.gp-fallback .wr-bezel canvas { max-width: 100%; height: auto; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.gp-actions .btn { flex: 1 1 160px; }
.gp-dl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gp-right { display: grid; gap: 16px; align-content: start; min-width: 0; }
.gp-head { display: grid; gap: 6px; }
.gp-chips { gap: 6px; }
.gp-name { font-size: 48px; margin: 4px 0 0; color: #fff4e0; -webkit-text-stroke: 6px var(--line); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--line); overflow-wrap: anywhere; }
.gp-species { margin: 0; font-size: 16px; }
.gp-line { margin: 0; color: var(--inksoft); font-weight: 700; }
.gp-owner { margin: 0; }
.gp-owner a { font: 600 15px/1 var(--font-pixel); }
.gp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gp-fact { display: grid; gap: 6px; align-content: start; padding: 10px 12px; background: var(--surface); border: var(--border); border-radius: 14px; box-shadow: var(--shadow-sm), var(--inner); min-width: 0; }
.gp-fact-label { font: 600 12px/1 var(--font-pixel); color: var(--inksoft); }
.gp-fact b { font: 700 16px/1.1 var(--font-pixel); }
@media (min-width: 600px) { .gp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gp-card { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--inner); padding: 16px; min-width: 0; }
.gp-card h2 { font-size: 24px; margin: 0 0 12px; }
.gp-card .spread h2 { margin: 0; }
.gp-card .spread { margin-bottom: 12px; }
.gp-stats { display: grid; gap: 12px; }
@media (min-width: 600px) { .gp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gp-weight { margin: 10px 0 0; }
.gp-outfit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gp-outfit li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--rc, var(--r-common)) 45%, transparent); }
.gp-outfit-icon { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; }
.gp-outfit-icon canvas { max-width: 44px; max-height: 44px; }
.gp-outfit-name { font: 700 14px/1.15 var(--font-pixel); overflow-wrap: anywhere; }
.gp-outfit .chip { justify-self: start; font-size: 11px; padding: 1px 7px; }
.gp-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border: 2px solid var(--line); border-radius: 999px; background: var(--lemon); color: var(--onfill); font: 600 13px/1.2 var(--font-pixel); box-shadow: 0 2px 0 var(--line); }
.gp-history { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 0; border-left: 3px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.hist { position: relative; display: flex; gap: 12px; align-items: baseline; padding: 7px 0; }
.hist::before { content: ""; position: absolute; left: -22px; top: 13px; width: 12px; height: 12px; border: 2px solid var(--line); border-radius: 3px; background: var(--lemon); }
.hist.is-dead::before { background: var(--danger); }
.hist time { flex: none; width: 52px; font: 600 12px/1 var(--font-pixel); color: var(--inksoft); }
.hist.is-dead { font-weight: 800; }
.gp-death { display: flex; flex-direction: column; }
.gp-death-stone { text-align: center; color: var(--ink); background: var(--stone); border: var(--border); border-bottom: 0; border-radius: 160px 160px 0 0 / 70px 70px 0 0; padding: 30px 16px 14px; box-shadow: inset -10px 0 0 var(--stonedeep), inset 0 5px 0 rgba(255, 255, 255, 0.22); }
.gp-death-stone h2 { margin: 0 0 6px; font-size: 24px; }
.gp-death-cause { font: 700 16px/1.2 var(--font-pixel); margin: 0 0 10px; }
.gp-tx { display: grid; justify-items: center; gap: 6px; }
.gp-cta { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px; background: var(--lemon); color: var(--onfill); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.gp-cta p { margin: 0; font-size: 24px; font-weight: 700; }
@media (min-width: 900px) {
  .gp { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); grid-template-areas: "left head" "left right"; grid-template-rows: auto 1fr; gap: 16px 36px; align-items: start; }
  .gp-head { grid-area: head; }
  .gp-right { grid-area: right; }
  .gp-left { grid-area: left; position: sticky; top: calc(var(--navh) + 16px); }
  .gp-name { font-size: 64px; }
}

/* ------------------------------------------------------------ player page */

.user-id { display: flex; gap: 14px; align-items: center; min-width: 0; }
.user-mark { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: var(--surface); border: var(--border); border-radius: 20px; box-shadow: var(--shadow-sm); }
.user-title { font-size: 32px; overflow-wrap: anywhere; }
.user-sub { gap: 8px; }
.user-actions { margin-top: 14px; gap: 8px; }
.user-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; max-width: 640px; }
.user-body { padding-top: 16px; }
.user-badges { margin-bottom: 8px; }
.user-sec { font-size: 24px; margin: 28px 0 16px; }
@media (min-width: 900px) { .user-title { font-size: 48px; } }

/* ------------------------------------------------------------ rules */

.rules-intro p { font-size: 18px; font-weight: 700; max-width: 62ch; margin: 10px 0 0; }
.rules-body { display: grid; gap: 20px; padding-top: 20px; }
.rules-toc { background: var(--surface); border: var(--border); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-sm), var(--inner); }
.rules-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rules-toc a { display: inline-block; padding: 5px 10px; border: 2px solid var(--line); border-radius: 999px; background: var(--bg); text-decoration: none; font: 600 13px/1.2 var(--font-pixel); }
.rules-toc a:hover { background: var(--lemon); color: var(--onfill); }
.rules-main { display: grid; gap: 18px; min-width: 0; }
.rules-sec { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow), var(--inner); padding: 18px 18px 8px; scroll-margin-top: calc(var(--navh) + 16px); min-width: 0; }
.rules-sec h2 { font-size: 24px; margin: -18px -18px 14px; padding: 12px 18px; background: var(--gum); color: var(--onfill); border-bottom: var(--border); border-radius: 17px 17px 0 0; scroll-margin-top: calc(var(--navh) + 16px); }
.rules-sec:nth-child(4n + 2) h2 { background: var(--soda); }
.rules-sec:nth-child(4n + 3) h2 { background: var(--lemon); }
.rules-sec:nth-child(4n + 4) h2 { background: var(--tangerine); }
.rules-sec h3 { font-size: 24px; margin: 18px 0 8px; }
.rules-sec p, .rules-sec li { max-width: 70ch; }
.rules-sec ul, .rules-sec ol { padding-left: 22px; margin: 0 0 14px; }
.rules-sec li { margin: 4px 0; }
.rules-sec li::marker { color: var(--gumdeep); }
.rules-sec code { font: 600 0.92em/1 var(--font-pixel); background: var(--bgalt); padding: 2px 6px; border-radius: 6px; }
.rules-table { overflow-x: auto; margin: 0 0 14px; }
.rules-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.rules-table th, .rules-table td { border: 2px solid var(--line); padding: 6px 10px; text-align: left; }
.rules-table th { background: var(--bgalt); font-family: var(--font-pixel); }
@media (min-width: 1000px) {
  .rules-body { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .rules-toc { position: sticky; top: calc(var(--navh) + 16px); max-height: calc(100vh - var(--navh) - 32px); overflow-y: auto; }
  .rules-toc ol { flex-direction: column; flex-wrap: nowrap; }
  .rules-toc a { display: block; border-radius: 10px; }
}

/* ------------------------------------------------------------ not found */

.nf { display: grid; justify-items: center; text-align: center; gap: 14px; padding-top: 56px; padding-bottom: 24px; }
.nf-tomb { animation: wobble 2s steps(4) infinite; }
.nf-body { max-width: 40ch; }
.nf-actions { justify-content: center; }

/* ------------------------------------------------------------ admin */

.adm { padding-top: 24px; }
.adm h1 { font-size: 32px; }
.adm-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.adm-card { display: grid; gap: 10px; min-width: 0; }
.adm-card h2 { font-size: 24px; margin: 0; }
.adm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-out { margin: 0; max-height: 320px; overflow: auto; background: var(--bgalt); border: 2px solid var(--line); border-radius: 10px; padding: 8px; font: 500 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-out:empty { display: none; }
.adm-pets { display: grid; gap: 8px; }
.adm-pet { display: grid; gap: 6px; padding: 8px; border: 2px dashed var(--line); border-radius: 10px; }

/* ------------------------------------------------------------ fixes for shared pieces */

/* a long CA must shrink, never push the page sideways */
.footer .row, .footer .ca { min-width: 0; max-width: 100%; }
.footer .ca code { min-width: 0; flex: 1 1 auto; }
.tomb-row > .empty, .tomb-grid > .empty, .tomb-grid > .empty-box, .pet-grid > .empty-box, .item-grid > .empty-box { grid-column: 1 / -1; }