:root { --bg:#0e0b16; --bg2:#141020; --panel:#181327; --ink:#ece6ff; --dim:#9a90b8; --acc:#ff7a1a; --acc2:#ffc93c; --line:#2c2440;
  --common:#9aa3b5; --uncommon:#4fd18b; --rare:#4f9dff; --legendary:#ffc93c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin:0; background: radial-gradient(1200px 600px at 70% -10%, #2a1640 0%, transparent 60%), var(--bg); color:var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acc); } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background:#0b0912; padding: 1px 5px; border-radius: 4px; }
.nav { position: sticky; top:0; z-index: 5; display:flex; align-items:center; justify-content: space-between; gap: 16px; padding: 10px 24px;
  background: rgba(14,11,22,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display:flex; align-items:center; gap:8px; font-weight:400; color: var(--ink); text-decoration:none; letter-spacing:.06em; }
.brand img { image-rendering: pixelated; border-radius: 6px; }
.nav nav a { color: var(--dim); text-decoration: none; margin-left: 14px; font-size: 14px; } .nav nav a:hover { color: var(--ink); }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.hero { display:grid; grid-template-columns: 360px 1fr; gap: 36px; align-items: center; padding: 30px 0 40px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }
.hero-art img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2); display:block; }
h1 { font-size: 48px; margin: 0; letter-spacing: .04em; line-height: 1; }
/* Press Start 2P is drawn on an 8px grid: h1 steps in 8px multiples (was clamp(48px, 9vw, 92px)) */
@media (min-width: 712px) { h1 { font-size: 64px; } } @media (min-width: 890px) { h1 { font-size: 80px; } } @media (min-width: 980px) { h1 { font-size: 88px; } }
h1 span { color: var(--acc); text-shadow: 4px 4px 0 #4a1d00; }
.tagline { font-size: 22px; margin: 10px 0; font-weight: 700; }
.lede { color: var(--dim); max-width: 60ch; }
.cta { display:flex; gap: 10px; flex-wrap: wrap; }
.btn { display:inline-block; padding: 10px 18px; border-radius: 10px; background: var(--acc); color:#170900; font-weight: 700; text-decoration:none; }
.btn.ghost { background: transparent; color: var(--ink); border:1px solid var(--line); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 22px 0; }
h2 { margin: 0 0 6px; font-size: 24px; } h3 { margin: 20px 0 8px; font-size: 16px; color: var(--dim); }
.muted { color: var(--dim); } .small { font-size: 13px; }
canvas.pixel { image-rendering: pixelated; border-radius: 12px; border: 1px solid var(--line); display:block; }
canvas.big { width: 100%; max-width: 320px; aspect-ratio: 1; }
.stage-name { margin-top: 10px; text-align:center; }
.pill { display:inline-block; padding: 1px 10px; border-radius: 99px; background: #2c2440; font-size: 13px; font-weight:700; }
.pill.tier { color:#120d1c; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align:left; color: var(--dim); font-weight: 700; border-bottom: 1px solid var(--line); padding: 6px 8px; }
td { border-bottom: 1px dashed var(--line); padding: 6px 8px; vertical-align: top; }
.stat-table td:first-child { color: var(--dim); text-transform: capitalize; width: 30%; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.steps li { margin: 4px 0; }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 14px; }
.card { background: var(--bg2); border:1px solid var(--line); border-radius: 12px; padding: 10px; }
.card canvas { width: 100%; aspect-ratio: 1; }
.card .t { display:flex; justify-content: space-between; align-items:center; margin-top: 8px; font-weight: 700; gap: 6px; }
.card .m { color: var(--dim); font-size: 12px; margin-top: 4px; word-break: break-all; }
.tier-common { background: var(--common); } .tier-uncommon { background: var(--uncommon); } .tier-rare { background: var(--rare); } .tier-legendary { background: var(--legendary); }
.card.preview { border-style: dashed; }
footer { max-width: 1100px; margin: 0 auto; padding: 10px 24px 40px; color: var(--dim); text-align:center; }

.strip6{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.strip6>div{text-align:center;font-size:11px;color:var(--muted,#9aa)}
.strip6 canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#16121f}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.tabs button{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
.tabs button.on{background:#ff9f43;color:#1a1020;border-color:#ff9f43}
.cast-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.cast-row h4{margin:0 0 4px}
.cast-row p{margin:0;font-size:12px}
@media (max-width:640px){.cast-row{grid-template-columns:1fr}.strip6{gap:4px}}

.hero-pets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px}
.hero-pets canvas{width:100%;aspect-ratio:1;image-rendering:pixelated;border-radius:10px;border:1px solid var(--line);background:var(--bg2)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.facts div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px}
.facts b{display:block;margin-bottom:4px}

/* ---- XCPETS promo: meme fonts + Pepe-green dark theme (Google Fonts: Press Start 2P, Bangers, Comic Neue) ---- */
:root { --pixel: 'Press Start 2P', ui-monospace, monospace; --meme: 'Bangers', Impact, 'Arial Black', sans-serif; --comic: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif;
  --bg:#0d1117; --bg2:#111a14; --panel:#18221b; --ink:#e8f5ec; --dim:#93a89a; --line:#2a3a2e;
  --acc:#3ddc84; --acc2:#ffd23f; --green:#3ddc84; --cyan:#33d6ff; --warn:#ff5a5a; --mint:#3ddc84; --sky:#33d6ff; }
body { font-family: var(--comic); font-weight: 700; font-size: 16px; color: var(--ink);
  background: radial-gradient(circle at 15% 10%, #143222 0, transparent 40%), radial-gradient(circle at 85% 30%, #0f2a33 0, transparent 35%), #0d1117; }
a { color: var(--cyan); }
h1, h2, h3, .brand { font-family: var(--pixel); letter-spacing: .02em; line-height: 1.35; }
/* Press Start 2P and Bangers ship only weight 400: never let the browser fake a bold (keeps synthetic italic) */
h1, h2, h3, .brand, .meme, .tagline, .playbar, .bal, .sharedart .qmark, .sharedwrap .stats b { font-synthesis: style; }
.meme, h1.meme { font-family: var(--meme); font-size: clamp(34px, 7vw, 64px); letter-spacing: 3px; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000, 0 0 18px #3ddc8499; line-height: 1.05; }
h2.meme { font-size: clamp(26px, 5vw, 40px); color: var(--acc2); }
.hero h1 span { color: var(--acc2); }
.tagline { font-family: var(--meme); font-size: 30px; letter-spacing: 1px; color: var(--acc2); text-shadow: 2px 2px 0 #000; }
.panel { border: 3px solid #000; box-shadow: 6px 6px 0 #000; border-radius: 18px; }
.btn, button.btn, button.q, a.btn { font-family: var(--comic); font-weight: 700; border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; border-radius: 14px; transition: transform .12s; }
.btn { background: var(--green); color: #04140a; } .btn.ghost { background: var(--cyan); color: #04121a; }
button.q { background: #22332a; color: var(--ink); padding: 6px 10px; }
.btn:hover, button.q:hover, a.btn:hover { animation: wobble .45s ease-in-out; } .btn:active, button.q:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
@keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.04); } 75% { transform: rotate(3deg) scale(1.04); } }
.pill, .chip, .badge { font-family: var(--comic); font-weight: 700; }
.nav { border-bottom: 3px solid #000; background: #0f1813f2; } .nav nav a { font-weight: 700; }
.playbar { font-family: var(--meme); font-size: 22px; letter-spacing: 1px; background: var(--acc2) !important; color: #102010 !important; border: 3px solid #000 !important; text-shadow: none; transform: rotate(-.6deg); }
.bal { font-family: var(--pixel) !important; font-size: 24px !important; color: var(--acc2) !important; text-shadow: 3px 3px 0 #000; }
.pet.card, .card, .invcard { box-shadow: 4px 4px 0 #000; } .pet.card:hover, .card:hover, .invcard:hover { animation: wobble .45s ease-in-out; }
/* landing: shared pet */
.sharedwrap { display:grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.sharedart { position: relative; } .sharedart canvas { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 16px; border: 3px solid #000; box-shadow: 6px 6px 0 #000; display:block; }
.sharedart .qmark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--meme); font-size: 64px; color: var(--acc2); -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; animation: wobble 2.4s infinite; pointer-events:none; }
.sharedwrap .stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.sharedwrap .stats div { background: var(--bg2); border: 3px solid #000; border-radius: 12px; padding: 8px; }
.sharedwrap .stats span { display:block; color: var(--dim); font-size: 12px; } .sharedwrap .stats b { font-family: var(--pixel); font-size: 16px; }
.sharedwrap .progress { height: 16px; background: #0a0f0b; border: 3px solid #000; border-radius: 99px; overflow: hidden; } .sharedwrap .progress div { height:100%; width:0; background: linear-gradient(90deg, var(--green), var(--acc2)); transition: width .8s; }
.live { margin-top: 10px; background: #0f2a1d; border: 3px solid #000; border-radius: 12px; padding: 8px 12px; }
@media (max-width: 640px) { .sharedwrap { grid-template-columns: 1fr; } .sharedart canvas { margin: 0 auto; } .sharedwrap .stats { grid-template-columns: 1fr 1fr; } }
/* 16px pixel numbers don't fit two across on phones: keep two across and drop to 8px (8px grid) */
@media (max-width: 640px) { .sharedwrap .stats b { font-size: 8px; } }

.pill:not(.tier), .chip:not([class*="tier-"]) { background: #1f2d23; } .chip.stg { background:#1d3a24; color:#c8f7d8; }
.tabs button { background:#18221b; color: var(--ink); border-color: var(--line); } .tabs button.on { background: var(--green) !important; color:#04140a !important; border-color:#000 !important; }
.card, .pet, .invcard, .facts > div { background: var(--bg2); }
.risk, .risk-short { color: #ff9a9a !important; } .risk { border-color: var(--warn) !important; background: #1a0f0f; }
.hero h1 span { color: var(--green); } h2 { color: var(--green); } .nav nav a:hover { color: var(--green); }


/* Pet Cemetery (neglect death): My Pets tabs, dead cards, hunger danger chip, tombstone cards */
.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; }
span.chip.danger { background:#d11; color:#fff; } span.chip.warn { background:#2e1414; color:#ff5a5a; } span.chip.dead { background:#2a2a2a; color:#bbb; }
.pet.card.dead { opacity:.75; border-style:dashed; } .pet.card.dead canvas, canvas.dead-sprite { filter: grayscale(1) brightness(.75) contrast(.9); }
.deathnote { background:#2a2a2a; color:#ddd; border-left:4px solid #888; padding:6px 10px; border-radius:6px; }
.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; }

.nav nav a.navico { display:inline-flex; align-items:center; vertical-align:middle; margin-left:12px; line-height:1; } .nav nav a.navico svg { display:block; }
@media (max-width:640px) { .nav nav a.navico { margin-left:10px; } }
/* mobile overflow (2026-10-16): wide tables scroll inside their box with a right-edge hint; long owner addresses are shortened (tap to expand) */
.scrollx { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to left, rgba(24,34,27,1) 30%, rgba(24,34,27,0)) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(61,220,132,.55), rgba(61,220,132,0)) right center / 12px 100% no-repeat scroll; }
.scrollx > table { min-width: 760px; }
code.addr { cursor: pointer; text-decoration: underline dotted; } code.addr.open { word-break: break-all; text-decoration: none; }
/* smooth-perf (2026-10-19): anchor targets land below the sticky nav (--navh is measured by js/v2-pages.js and js/v2.js; 72px until then) */
#cast { scroll-margin-top: calc(var(--navh, 72px) + 8px); }
/* View pets by address (2026-10-19, address-lookup): play.html top bar + home hero. Press Start 2P label on the 8px grid; 16px input so phones don't zoom */
.addrview { flex: 1 1 100%; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.hero .addrview { margin: 16px 0 0; max-width: 480px; }
.addrview .av-lbl { font-family: var(--pixel); font-size: 16px; line-height: 24px; font-synthesis: style; color: var(--green); letter-spacing: 0; }
.addrview .av-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.addrview .av-in { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; font: 16px var(--comic); background: #0a0f0b; color: var(--ink); border: 3px solid #000; border-radius: 10px; box-shadow: 4px 4px 0 #000; padding: 8px 10px; }
.addrview .av-in::placeholder { color: var(--dim); opacity: 1; }
.addrview .av-in:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.addrview .av-in[aria-invalid="true"] { border-color: #ff5a5a !important; }
.addrview .btn { flex: 0 0 auto; padding: 8px 16px; }
.addrview .av-state, .addrview .av-err, .addrview #avHelp { min-width: 0; overflow-wrap: anywhere; }
.addrview .av-addr { word-break: break-all; overflow-wrap: anywhere; }
.addrview .av-state .q { margin-left: 4px; }
.addrview [hidden] { display: none !important; }
@media (max-width: 640px) { .addrview .av-lbl { font-size: 8px; line-height: 16px; } .addrview .btn { padding: 8px 12px; } }

/* view only (address-lookup, owner 2026-10-19): a viewed address hides every owner, burn and equip control; display stays */
html.viewonly #hatchBtn, html.viewonly #dozenBtn, html.viewonly #caseBtn, html.viewonly #cfeedBtn, html.viewonly #crollBtn, html.viewonly [data-camt],
html.viewonly #bFeedHungry, html.viewonly #bDiscSel, html.viewonly #bDelCom, html.viewonly #bDelUnc, html.viewonly #selMode, html.viewonly #selNone,
html.viewonly #bGo, html.viewonly #bSkip, html.viewonly #foGo, html.viewonly #dDiscard, html.viewonly #bAuto, html.viewonly #bOutfit, html.viewonly #oGo, html.viewonly #aeRow,
html.viewonly [data-a], html.viewonly [data-discard], html.viewonly [data-release], html.viewonly [data-keep], html.viewonly [data-aetog],
html.viewonly [data-sfeed], html.viewonly [data-sgrave], html.viewonly [data-goff], html.viewonly [data-offall], html.viewonly [data-offyes], html.viewonly [data-offno],
html.viewonly .frleft, html.viewonly a[href^="play.html#discard-"] { display: none !important; }
html.viewonly .gp-item { pointer-events: none; cursor: default; }