/* XCPETS local game build: real-game widgets + XCPETS pixel theme (assets generated from pet-core at build time). */
:root { --pixline: #2b4a33; }
body { background-color: #0d1117; background-image: none; image-rendering: pixelated; }
/* smooth-perf (2026-10-19): the tiled page background used background-attachment: fixed, which makes the browser repaint the whole page on every
 * scroll frame (janky on phones). The same layers now sit on a fixed, viewport-sized layer behind the content, which scrolls on the GPU; same
 * picture, same place (fixed to the viewport, 192px tiles, .93 dark veil). */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  background-color: #0d1117; background-image: linear-gradient(rgba(13,17,23,.93), rgba(13,17,23,.93)), url(../img/theme/tile.png); background-size: auto, 192px 192px; image-rendering: pixelated; }
.panel { border: 3px solid var(--pixline) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 #000, inset 0 0 0 1px #0a0f0b; }
.sec::before, h2.sec::before, h1.sec::before { content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 10px; vertical-align: -5px; background: center / contain no-repeat; image-rendering: pixelated; }
.sec[data-ico="egg"]::before { background-image: url(../img/theme/egg.png); } .sec[data-ico="flame"]::before { background-image: url(../img/theme/flame.png); }
.sec[data-ico="sword"]::before, .sec[data-ico="gear"]::before { background-image: url(../img/theme/sword.png); } .sec[data-ico="crown"]::before { background-image: url(../img/theme/crown.png); }
.sec[data-ico="trophy"]::before { background-image: url(../img/theme/trophy.png); } .sec[data-ico="pet"]::before { background-image: url(../img/theme/pet.png); }
.ico-flame::before, .ico-egg::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: center / contain no-repeat; image-rendering: pixelated; }
.ico-flame::before { background-image: url(../img/theme/flame.png); } .ico-egg::before { background-image: url(../img/theme/egg.png); }
.pixdiv { height: 24px; margin: 18px auto; max-width: 1100px; background: url(../img/theme/divider.png) center / auto 24px repeat-x; image-rendering: pixelated; opacity: .85; }
.parade { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px auto 0; max-width: 1100px; }
.parade img { width: 40px; height: 40px; image-rendering: pixelated; animation: hop 1.6s steps(2) infinite; } .parade img:nth-child(odd) { animation-delay: .4s; }
@keyframes hop { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .parade img { animation: none; } }
.risk { max-width: 1100px; margin: 16px auto; padding: 10px 14px; border: 2px dashed #ff5a5a; border-radius: 12px; color: #ff9a9a; font-size: 13px; text-align: center; }
.risk-short { display: inline-block; font-size: 12px; color: #ff9a9a; margin: 4px 6px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bal { font: 800 28px/1.1 ui-monospace, Menlo, Consolas, monospace; color: var(--acc2, #33d6ff); } .bal small { font-size: 13px; color: var(--dim); }
.topbar.slim { display:flex; flex-wrap:wrap; gap: 10px 18px; align-items:center; justify-content:space-between; padding: 8px 14px !important; position: static; }
.topbar.slim .bal { font-size: 24px !important; line-height: 1.1; } .topbar.slim .tb-bal { display:flex; flex-wrap:wrap; align-items:baseline; gap: 4px 10px; }
.topbar.slim .tb-bal > div { margin: 0; } .topbar.slim .msg:empty, .topbar.slim #balErr:empty { display:none; }
@media (max-width: 820px) { .topbar.slim { position: static; max-height: none; } }
button { cursor: pointer; font: inherit; } button.q, a.q { background:#1f2d23; color:var(--ink); border:2px solid #000; border-radius:8px; padding:6px 10px; font-size:13px; font-weight:700; text-decoration: none; }
input.amt, select.pick { background:#0a0f0b; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.pets { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin-top: 12px; }
.pet.card { background: var(--bg2); border:3px solid var(--pixline); border-radius: 6px; padding: 10px; cursor:pointer; box-shadow: 3px 3px 0 #000; }
.pet.card:hover, .pet.card:focus { border-color: #3ddc84; outline: none; transform: translateY(-2px); }
.pet .sprite { width:100%; aspect-ratio:1; image-rendering: pixelated; border-radius: 4px; background:#0a0f0b; display:block; }
.pet h4 { margin: 6px 0 2px; } .chips { display:flex; flex-wrap:wrap; gap:4px; }
.chip { font-size:11px; padding:0 7px; border-radius:99px; background:#1f2d23; } .chip.stg { background:#1d3a24; color:#c8f7d8; } .chip.warn { background:#2e1414; color:#ff8a8a; }
.invslot { margin: 12px 0 4px; font-weight: 700; }
.invgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.invcard { background: var(--bg2); border: 3px solid #9aa3b5; border-radius: 6px; padding: 6px; text-align:center; cursor:pointer; font-size: 11px; position: relative; }
.invcard canvas { width: 72px; height: 72px; image-rendering: pixelated; display:block; margin: 0 auto 4px; }
.invcard.t1 { border-color:#4fd18b; } .invcard.t2 { border-color:#4f9dff; } .invcard.t3 { border-color:#ffc93c; box-shadow: 0 0 10px #ffc93c88; }
.invcard .worn { position:absolute; top:4px; right:4px; font-size:10px; background:#1d3a24; color:#c8f7d8; border-radius:8px; padding:0 5px; }
.invcard.res { cursor: default; border-color: #3ddc84; } .invcard.res .ico { font-size: 38px; line-height: 72px; } .invcard.res b { display:block; font-size: 18px; } .invcard span { display:block; }
.reveal { position: fixed; inset: 0; background: rgba(5,8,6,.88); display:none; align-items:center; justify-content:center; z-index: 50; padding: 20px; }
.reveal.on { display:flex; } .reveal .box { background: var(--panel, #18221b); border:3px solid #3ddc84; border-radius: 6px; padding: 22px; text-align:center; max-width: 420px; width:100%; max-height: 92vh; overflow: auto; box-shadow: 6px 6px 0 #000; }
.reveal .box.wide { max-width: 640px; } canvas.big { width: 240px; height: 240px; image-rendering: pixelated; display:block; margin: 8px auto; }
.bigamt { font: 800 30px ui-monospace, monospace; color: #ff9a5a; margin: 6px 0; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display:flex; flex-direction:column; gap:8px; max-width: 360px; }
.toast { background:#16241a; border:2px solid #33d6ff; color: var(--ink); border-radius: 8px; padding: 10px 14px; font-weight:700; box-shadow: 3px 3px 0 #000; }
.msg { min-height: 1.2em; font-size: 13px; } .warn { color:#ff8a8a; } .ok { color:#7fe0a8; }
.bar { height: 10px; background:#0a0f0b; border:1px solid var(--line); border-radius: 99px; overflow:hidden; margin: 6px 0 2px; } .bar > i { display:block; height:100%; background: linear-gradient(90deg, #3ddc84, #33d6ff); }
.logbox { font: 12px ui-monospace, monospace; max-height: 300px; overflow: auto; }
.spin { width:48px; height:48px; border:5px solid #fff3; border-top-color:#3ddc84; border-radius:50%; animation:sp 1s linear infinite; margin: 0 auto; } @keyframes sp { to { transform: rotate(360deg); } }
button.busy { opacity:.6; cursor:wait; } body.loading #pets { opacity: .5; }
.board { width:100%; border-collapse:collapse; font-size:13px; } .board td { padding:4px 6px; border-top:1px solid var(--line); vertical-align: middle; }
.board .end td { color: #3ddc84; font-weight:700; letter-spacing:1px; border-top:0; } .board .gap td { text-align:center; } .badge.bad { background:#2e1414; color:#ff5a5a; border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.note { border: 2px dashed #3ddc84; border-radius: 12px; padding: 10px 14px; color: #c8f7d8; }
.bal { color: #3ddc84 !important; font-size: 32px !important; text-shadow: 3px 3px 0 #000; } .bal.loading { color: var(--dim) !important; font-size: 16px !important; }
.packgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap:6px; max-height: 60vh; overflow:auto; }
.packgrid .egg { border:2px solid var(--line); border-radius:6px; padding:3px; font-size:10px; text-align:center; } .packgrid canvas { width:48px; height:48px; image-rendering:pixelated; }
.packgrid .egg.t1 { border-color:#4fd18b; } .packgrid .egg.t2 { border-color:#4f9dff; } .packgrid .egg.t3 { border-color:#ffc93c; box-shadow:0 0 8px #ffc93c; }
a.txrow { display:block; padding: 6px 8px; margin: 2px 0; border-radius: 6px; color: #33d6ff; text-decoration: underline; text-underline-offset: 3px; font: 13px ui-monospace, monospace; } a.txrow:hover, a.txrow:focus { background: #1f2d23; color: #3ddc84; }

.packgrid .egg.discard { opacity:.45; outline:2px dashed #ff5a5a; } .packgrid .disc { display:block; cursor:pointer; }
.commsprite { width:96px; height:96px; image-rendering:pixelated; display:block; margin:6px auto; border:3px solid #3ddc84; border-radius:8px; background:#2a3a2e; }
.invcard.na { opacity:.4; filter:grayscale(1); } .hiddenbox { grid-column:1/-1; margin-top:8px; font-size:13px; } .hiddenbox summary { cursor:pointer; color:#33d6ff; }
.dtop { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.statbox { flex:1 1 220px; max-width:340px; font: 16px 'Press Start 2P', monospace; font-synthesis: style; }
.statbox .stat { display:flex; align-items:center; gap:8px; margin:5px 0; } .statbox .sk { width:80px; color:#9fdcb4; } .statbox b { min-width:26px; text-align:right; color:#fff; }
.statbox .sbar { flex:1; height:12px; background:#0d1410; border:2px solid #3ddc84; image-rendering:pixelated; } .statbox .sbar i { display:block; height:100%; background:repeating-linear-gradient(90deg,#3ddc84 0 6px,#2bb36a 6px 8px); }
.statbox .tot { justify-content:flex-start; border-top:2px dashed #2a3a2e; padding-top:6px; } .statbox .tot .sk { width:auto; }

/* Pet popup: sprite is the focus; compact pill actions */
#detail .box.wide { max-width: min(96vw, 900px); }
#detail .dtop { flex-direction: column; gap: 8px; }
#detail canvas.hero { width: min(60vh, 90%); height: auto; aspect-ratio: 1; image-rendering: pixelated; image-rendering: crisp-edges; display:block; margin: 4px auto; border: 3px solid #3ddc84; border-radius: 6px; }
#detail .statbox { max-width: min(60vh, 90%); width: 100%; margin: 0 auto; font-size: 8px; display: grid; grid-template-columns: 1fr; }
#detail .statbox .stat { margin: 2px 0; } #detail .statbox .sk { width: 48px; } #detail .statbox .sbar { height: 8px; border-width: 1px; }
#detail .statbox .tot { grid-column: 1 / -1; padding-top: 3px; }
#detail #dInfo p { margin: 4px 0; font-size: 13px; }
#detail .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
#detail .act { font: 600 12px system-ui, sans-serif; padding: 4px 10px; min-height: 32px; border-radius: 999px; border: 2px solid #3ddc84; background: #18221b; color: #e9fbe9; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
#detail .act small { font-size: 10px; color: #9fdcb4; } #detail .act:hover:not([disabled]) { background: #3ddc84; color: #0d1117; } #detail .act:hover small { color: #0d1117; }
#detail .act.ghost { border-color: #ff7a7a; color: #ffb0b0; } #detail .act.busy { opacity: .5; pointer-events: none; } #detail .act[disabled] { opacity: .4; cursor: not-allowed; }
#detail select.pick { font-size: 12px; padding: 4px 6px; min-height: 32px; }
@media (max-width: 600px) { #detail canvas.hero { width: 92vw; max-width: 100%; } #detail .statbox { grid-template-columns: 1fr; } #detail .act { min-height: 36px; } }
#detail .statbox .stat { margin: 1px 0; line-height: 1; min-height: 0; } #detail .statbox { row-gap: 3px; }
/* v3 popup fit: height-clamped square sprite, filled pills, no scroll on desktop */
#detail .box.wide { padding: 12px 16px; max-height: 96vh; }
#detail h2#dTitle { margin: 2px 0 6px; font-size: 16px; }
#detail canvas.hero { --sp: clamp(140px, calc(100vh - 462px), 50vh); width: var(--sp); height: var(--sp); aspect-ratio: auto; max-width: 90%; object-fit: fill; box-sizing: content-box; padding: 0; margin: 2px auto; background: #2a3a2e; }
#detail .statbox { max-width: 420px; }
#detail #dInfo p { margin: 2px 0; font-size: 12px; }
#detail .row { margin: 4px 0; }
#detail .acts { margin: 6px 0 4px; gap: 5px; }
#detail .act { background: #3ddc84; color: #0d1117; border: 2px solid #0d1117; box-shadow: 2px 2px 0 #000; font-weight: 700; }
#detail .act small { color: #0d3a1f; font-weight: 600; }
#detail .act.ghost { background: #ff5a5a; color: #fff; border-color: #0d1117; } #detail .act.ghost small { color: #fff; }
#detail .act:hover:not([disabled]) { filter: brightness(1.12); background: #3ddc84; color: #0d1117; } #detail .act.ghost:hover { background: #ff5a5a; color: #fff; }
#detail .risk-short { font-size: 11px; display: inline; } #detail #dInfo p:last-child { display: inline; margin-left: 8px; }
@media (max-width: 600px) { #detail canvas.hero { --sp: 88vw; max-width: 100%; } }
#detail .statbox .stat { height: 14px; margin: 0; } #detail .statbox .stat b, #detail .statbox .sk { line-height: 14px; }
#detail .statbox { flex: 0 0 auto; align-content: start; }
@media (max-width: 600px) { #detail canvas.hero { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 100%; box-sizing: border-box; } }

/* Community pet at the top of play.html: compact */
#communityPanel.compact { padding: 10px 14px; } #communityPanel.compact h2 { font-size: 16px; margin: 0 0 6px; }
#communityPanel .cgrid { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; row-gap: 4px; align-items: center; }
#communityPanel .cgrid .commsprite { grid-row: 1 / 3; width: 96px; height: 96px; margin: 0; }
#communityPanel .cgrid #community, #communityPanel .cgrid .row { grid-column: 2; margin: 0 !important; }
#communityPanel .cgrid .row { flex-wrap: wrap; gap: 6px; } #communityPanel .cgrid .btn { font-size: 12px; padding: 5px 10px; } #communityPanel .risk-short { font-size: 11px; }
@media (max-width: 520px) { #communityPanel .cgrid { grid-template-columns: 72px 1fr; } #communityPanel .cgrid .commsprite { width: 72px; height: 72px; } }
.petctl { gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } .pager { text-align:center; margin:8px 0; } .pager button { margin:0 6px; } .apibanner { border:2px solid #ff9a5a; background:#2a1a12; color:#ffd8c0; padding:10px 14px; border-radius:8px; margin:10px auto; max-width:1100px; } #reviewBox { border-color:#ffc93c; }
.sharebar { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:6px 0; } .sharebar .act { font: 600 12px system-ui, sans-serif; padding: 4px 10px; min-height: 32px; border-radius: 999px; border: 2px solid #0d1117; background: #33d6ff; color: #0d1117; box-shadow: 2px 2px 0 #000; cursor:pointer; }
html[data-bg=btc] body::before { background-image: linear-gradient(rgba(13,17,23,.93), rgba(13,17,23,.93)), url(../img/theme/tile-btc.png); }
html[data-bg=xcp] body::before { background-image: linear-gradient(rgba(13,17,23,.93), rgba(13,17,23,.93)), url(../img/theme/tile-xcp.png); }
html[data-bg=mix] body::before { background-image: linear-gradient(rgba(13,17,23,.93), rgba(13,17,23,.93)), url(../img/theme/tile-mix.png); }
.bgpick { text-align:center; margin: 4px 0 8px; } .bgpick select { font-size: 12px; background:#18221b; color:#e9fbe9; border:1px solid #3ddc84; border-radius:6px; padding:2px 4px; }
details.traits { margin: 4px auto 0; font: 12px system-ui, sans-serif; text-align: left; max-width: 420px; }
details.traits summary { cursor: pointer; color: #33d6ff; text-align: center; font-weight: 600; }
details.traits table { width: 100%; border-collapse: collapse; margin-top: 4px; } details.traits th { color: #8fb39a; font-weight: 600; padding: 1px 8px 1px 0; white-space: nowrap; vertical-align: top; width: 1%; }
details.traits td { color: #e9fbe9; padding: 1px 0; } details.traits td.dna { font-family: ui-monospace, monospace; font-size: 10px; word-break: break-all; }

/* gear transfer pills (equip/unequip): compact filled, blue to tell them apart from burn actions */
#detail .gearacts, #itemBox .gearacts { margin: 2px 0 4px; gap: 5px; }
#detail .act.gear, #itemBox .act.gear { background: #33d6ff; color: #0d1117; border: 2px solid #0d1117; box-shadow: 2px 2px 0 #000; font: 700 12px system-ui, sans-serif; padding: 3px 10px; min-height: 30px; border-radius: 999px; cursor: pointer; }
#detail .act.gear.un, #itemBox .act.gear.un { background: #b58cff; }
#detail .act.gear small, #itemBox .act.gear small { color: #0d2a3a; font-weight: 600; font-size: 10px; }
#detail .act.gear:hover, #itemBox .act.gear:hover { filter: brightness(1.12); background: #33d6ff; } #detail .act.gear.un:hover, #itemBox .act.gear.un:hover { background: #b58cff; }
#itemBox .gearacts { display: flex; flex-wrap: wrap; justify-content: center; max-height: 40vh; overflow: auto; }
.invcard .worn.bag { background: #33d6ff; color: #0d1117; }

.toast.sticky-err { border-color:#ff5c5c; display:flex; gap:10px; align-items:flex-start; } .toast.sticky-err .errclose { margin-left:auto; flex:none; }

/* Pet Cemetery (neglect death) */
.pet.card.dead { opacity:.7; border-style:dashed; } .pet.card.dead canvas, .dead-sprite { filter: grayscale(1) brightness(.7) contrast(.9); }
.pet.card.dead h4::before { content:'🪦 '; } .chip.dead { background:#2a2a2a; color:#bbb; } .chip.danger { background:#d11; color:#fff; font-weight:bold; }
.deathnote { background:#1d1d1d; border:2px dashed #777; color:#ccc; padding:6px 10px; border-radius:6px; }

/* My Pets tabs + Pet Cemetery tombstones (cemetery.html, My Pets 🪦 tab) */
.pettabs { display:flex; gap:6px; margin:4px 0 10px; flex-wrap:wrap; } .pettabs .tab { font:inherit; font-size:13px; padding:6px 12px; border-radius:10px 10px 0 0; border:2px solid #3a4a3e; border-bottom:none; background:#18221b; color:#cfd8d0; cursor:pointer; }
.pettabs .tab.on { background:#2a3a2e; color:#fff; border-color:#6b8f72; font-weight:bold; }
.tombs { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-top:12px; }
.tomb { position:relative; background:linear-gradient(#5b5f66,#3c3f45); color:#e6e6e6; border:3px solid #24262a; border-radius:70px 70px 8px 8px; padding:22px 12px 12px; text-align:center; box-shadow:0 6px 0 #1b1c1f; }
.tomb::before { content:'R.I.P.'; display:block; font:bold 11px monospace; letter-spacing:3px; color:#c9cbd0; margin-bottom:4px; }
.tomb canvas { width:96px; height:96px; image-rendering:pixelated; filter:grayscale(1) brightness(1.15) contrast(.8); opacity:.6; background:#2b2d31; border-radius:10px; }
.tomb h4 { margin:6px 0 2px; color:#fff; } .tomb h4 a { color:#fff; } .tomb .muted, .tomb .small { color:#c4c6cc; } .tomb .died { margin-top:6px; font-size:12px; color:#ffd7d7; }
.deathnote { background:#2a2a2a; color:#ddd; border-left:4px solid #888; padding:6px 10px; border-radius:6px; }
.sec[data-ico="skull"]::before { background-image: url(../img/theme/skull.png); }
/* a11y (2026-10-16): cast rows use h3 (no skipped heading level) but keep the old h4 look */
.cast-row h3.ch{margin:0 0 4px;font-size:1em;font-family:inherit;color:inherit;letter-spacing:normal;line-height:inherit;font-weight:bold}
/* a11y (2026-10-16): nav tap targets at least 44px tall on phones (spacing only) */
@media (max-width:640px){nav a{display:inline-flex;align-items:center;min-height:44px;min-width:24px}}

/* starve-warning (2026-10-19): neglected pet with gear worn; 8px grid, inherits the page fonts */
.starve { border:2px dashed #ff8a8a; border-radius:8px; padding:8px; margin:8px 0 16px; background:#1d1414; overflow-wrap:anywhere; text-align:left; }
.starve .sec { margin:0 0 8px; } .starve p { margin:0 0 8px; } .starve .bcount b { color:#ff8a8a; }
.starve .bgear { margin:0 0 8px; padding-left:24px; text-align:left; }
.starve .scta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#detail .starve p, #detail #dInfo .starve p:last-child { display:block; margin:0 0 8px; }
.starve .sgrave { margin:8px 0 0; } .tomb .buried { margin-top:8px; color:#ffd7d7; }
.tomb { min-width:0; overflow-wrap:anywhere; } /* the full owner address overflowed a 390px tomb (seen with a forced dead pet; no pet has died on chain yet) */