[hidden] { display:none !important; }
:root { --bg:#1b1340; --panel:#2a1d5c; --border:#7b6cff; --text:#fff; --yellow:#ffd23f; --green:#3ddc84; --red:#ff5a5a; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Press Start 2P', monospace; font-size:10px; min-height:100vh; padding-bottom:80px; }
img.pixel, .menu img, .hud img, .grid img { image-rendering:pixelated; }
header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:2px solid var(--border); flex-wrap:wrap; }
header .logo { height:34px; image-rendering:pixelated; }
.right { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.notice { background:var(--yellow); color:#000; padding:6px 8px; border-radius:4px; }
.pill { background:var(--panel); border:2px solid var(--border); border-radius:4px; padding:7px 9px; white-space:nowrap; }
#balance { color:var(--yellow); }
.langs { display:flex; gap:4px; }
button { font:inherit; color:#fff; background:var(--panel); border:2px solid var(--border); border-radius:4px; padding:8px 10px; cursor:pointer; }
button:hover:not(:disabled) { filter:brightness(1.2); }
button:disabled { opacity:.45; cursor:default; }
button[aria-pressed="true"] { background:var(--yellow); color:#000; }
button.green { background:#1f7a46; border-color:var(--green); }
button.purple { background:#5a2d9c; }
.login { max-width:720px; margin:24px auto; padding:0 16px; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.login .banner { width:100%; border:3px solid #fff; border-radius:6px; }
.login h1 { font-size:16px; color:var(--yellow); line-height:1.5; }
.login p { line-height:2; }
.wallets { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.wallets button { padding:12px 16px; }
.msg { color:var(--red); min-height:1em; line-height:1.8; }
.hud { display:flex; gap:6px; padding:10px 16px; flex-wrap:wrap; }
.hud > span { background:var(--panel); border:2px solid var(--border); border-radius:4px; padding:7px 9px; white-space:nowrap; }
.hud .gold { color:var(--yellow); }
.hud img { height:12px; vertical-align:-2px; }
.hunt { display:flex; gap:12px; padding:0 16px 16px; align-items:flex-start; flex-wrap:wrap; }
.map { flex:1 1 640px; min-width:0; }
canvas#screen { width:100%; height:auto; image-rendering:pixelated; border:2px solid var(--border); border-radius:4px; display:block; background:#000; }
.hint { font-size:8px; opacity:.7; margin-top:6px; line-height:1.8; }
aside { flex:0 1 360px; width:100%; background:var(--panel); border:2px solid var(--border); border-radius:6px; padding:10px; }
.buttons { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.buttons.center { justify-content:center; }
.list { display:flex; flex-direction:column; gap:6px; max-height:65vh; overflow:auto; }
.hero-row { display:grid; grid-template-columns:30px 1fr auto; gap:8px; align-items:center; background:rgba(0,0,0,.25); border-radius:4px; padding:6px; }
.hero-row img { width:30px; height:32px; object-fit:contain; image-rendering:pixelated; }
.hero-row .name { font-size:8px; line-height:1.6; }
.status { font-size:7px; opacity:.85; line-height:1.6; }
.bar { height:6px; background:#000; border-radius:3px; overflow:hidden; margin-top:3px; }
.bar i { display:block; height:100%; background:var(--green); }
.hero-row button { padding:5px 6px; font-size:7px; }
.r0{color:#ddd}.r1{color:#3ddc84}.r2{color:#4da3ff}.r3{color:#b36bff}.r4{color:#ffd23f}.r5{color:#ff5a5a}
.tab { padding:0 0 16px; }
.tab h2 { font-size:12px; padding:14px 16px; color:#6fe3ff; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; padding:0 16px; }
.hero-card { background:var(--panel); border:2px solid var(--border); border-radius:6px; padding:8px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; }
.hero-card img { width:40px; height:42px; object-fit:contain; }
.hero-card .status { text-align:left; width:100%; }
.hero-card .bar { width:100%; }
.card { background:var(--panel); border:2px solid var(--border); border-radius:6px; padding:16px; margin:16px; display:flex; flex-direction:column; gap:12px; }
.card.center, .card.shop { align-items:center; text-align:center; }
.card p { line-height:2; }
.card h2, .card h3 { color:var(--yellow); padding:0; }
.card .grid { padding:0; width:100%; }
img.big { width:64px; height:auto; }
.price { font-size:14px; color:var(--yellow); }
.small { font-size:8px; opacity:.7; }
table { border-collapse:collapse; width:100%; font-size:8px; }
td, th { padding:6px; border-bottom:1px solid rgba(255,255,255,.15); text-align:left; }
input { font:inherit; width:100%; max-width:520px; padding:10px; background:#000; color:#fff; border:2px solid var(--border); border-radius:4px; }
.menu { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:6px; padding:8px; background:#120c2e; border-top:2px solid var(--border); }
.menu button { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:8px; padding:6px 8px; min-width:62px; }
.menu button img { height:20px; }
.menu button[aria-current="true"] { background:var(--yellow); color:#000; }
@media (max-width:520px) { header .logo { height:26px; } .menu button { min-width:0; flex:1; } }

.houses { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
.house-card { background:rgba(0,0,0,.25); border:2px solid var(--border); border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; }
.house-card.active { border-color:var(--green); box-shadow:0 0 0 2px var(--green) inset; }
.house-card img.house { width:100%; height:110px; object-fit:cover; object-position:top; image-rendering:pixelated; border-radius:4px; }
.house-card .name { color:var(--yellow); }
.house-card .status { text-align:center; }
.house-card .residents { display:flex; flex-wrap:wrap; gap:2px; justify-content:center; min-height:22px; }
.house-card .residents img { width:20px; height:21px; image-rendering:pixelated; }
.explain { padding:0 16px 10px; font-size:8px; line-height:1.8; opacity:.85; }

/* ===== Market (dark, colored labels, orange) ===== */
.mk { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:14px; background:#1e2130; color:#fff; min-height:70vh; padding:16px; }
.mk button { font-family:inherit; font-size:14px; }
.mk-top { display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.mk-tabs { display:flex; gap:4px; }
.mk-tabs button { background:#2c3146; border:1px solid #3a3f54; border-radius:6px; padding:9px 18px; color:#9ca5b4; font-weight:600; }
.mk-tabs button.active { background:#ff973a; border-color:#ff973a; color:#fff; }
.mk-rules { color:#8d95b7; font-size:12px; margin:12px 0; line-height:1.6; }
.mk-body { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; }
.mk-filter { background:#242735; border:1px solid #343849; border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.mk-filter .title { font-weight:700; font-size:16px; }
.mk-filter .sub, .mk .sub { color:#8d95b7; font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.mk-filter label { display:flex; gap:8px; align-items:center; cursor:pointer; }
.mk-filter select { background:#191b24; color:#fff; border:1px solid #3a4060; border-radius:6px; padding:8px; font:inherit; }
.mk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.mk-card { border:1px solid #343849; background:#191b24; padding:9px 7px; cursor:pointer; transition:background .3s; border-radius:4px; }
.mk-card:hover { background:#000; }
.mk .head { display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.mk-card .img { display:flex; justify-content:center; margin:28px 0 20px; }
.mk-card .img img { width:110px; height:144px; object-fit:contain; image-rendering:pixelated; }
.mk-card .img.house img, .mk-detail .img.house img { width:auto; height:144px; image-rendering:pixelated; }
.mk .foot { display:flex; align-items:center; justify-content:center; gap:7px; margin:6px 0 10px; }
.mk .foot img { width:23px; height:25px; }
.mk .foot b { font-size:20px; }
.mk-meta { color:#8d95b7; font-size:12px; text-align:center; line-height:1.6; }
.mk-tag { font-size:12px; font-weight:600; letter-spacing:.04em; color:#fff; padding:5px 8px; border-radius:6px; background:#ff973a; text-transform:uppercase; white-space:nowrap; }
.mk-tag.common { background:#d5d5d5; color:#000; } .mk-tag.rare { background:#3aca22; } .mk-tag.superrare { background:#a507ff; }
.mk-tag.epic { background:#ff00f0; } .mk-tag.legend { background:#ffc207; } .mk-tag.superlegend { background:#ff0759; } .mk-tag.house { background:#35a0d0; }
.mk-pages { display:flex; gap:4px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.mk-pages button { background:#2c3146; border:1px solid #3a3f54; color:#fff; border-radius:4px; padding:6px 10px; }
.mk-pages button.active { background:#ff973a; }
.mk-empty { color:#8d95b7; padding:40px; text-align:center; }
.mk.mk-modal { min-height:0; padding:16px; }
.mk-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.mk-box { background:#242735; border:1px solid #3a4060; border-radius:8px; padding:20px; width:min(640px, 100%); max-height:90vh; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.mk-detail { display:grid; grid-template-columns:160px 1fr; gap:16px; align-items:start; }
.mk-detail .img { background:#191b24; border:1px solid #343849; border-radius:6px; display:flex; justify-content:center; padding:12px; }
.mk-detail .img img { width:120px; height:156px; object-fit:contain; image-rendering:pixelated; }
.mk-stat { display:grid; grid-template-columns:90px 1fr 28px; gap:8px; align-items:center; font-size:13px; margin-top:8px; }
.mk-stat i { height:8px; background:#191b24; border-radius:4px; overflow:hidden; }
.mk-stat b { display:block; height:100%; background:#ff973a; }
.mk-stat em { font-style:normal; text-align:right; font-weight:700; }
.mk-abilities { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mk-abilities span { display:flex; align-items:center; gap:6px; background:#272d47; border-radius:3px; padding:3px 8px 3px 4px; font-size:12px; }
.mk-abilities img { width:22px; height:22px; }
.mk-buttons { display:flex; gap:8px; justify-content:center; }
.mk-buttons button { background:#2c3146; border:1px solid #3a3f54; color:#fff; border-radius:6px; padding:10px 20px; font-weight:700; }
.mk-buttons button.orange { background:#ff973a; border-color:#ff973a; }
.mk-field { display:flex; gap:10px; align-items:center; justify-content:center; font-weight:600; }
.mk-field input { font:inherit; background:#191b24; color:#fff; border:1px solid #3a4060; border-radius:6px; padding:8px; width:180px; max-width:60%; }
.mk-error { color:#ff0759; text-align:center; min-height:1em; }
@media (max-width:640px) { .mk-body { grid-template-columns:1fr; } .mk-detail { grid-template-columns:1fr; } .mk-grid { grid-template-columns:repeat(2, 1fr); } .mk-card .img img { width:80px; height:104px; } }
.hero-card .actions, .house-card .actions { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.mk-filter input[type="checkbox"] { width:auto; }
.legal { text-align:center; padding:18px 16px 8px; font:11px/1.8 system-ui, -apple-system, "Segoe UI", sans-serif; opacity:.75; }
.legal a { color:var(--yellow); }
.lv { font-size:8px; color:var(--yellow); margin-left:4px; }
.up-options { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; max-height:220px; overflow:auto; margin:6px 0; }
.up-op { display:flex; align-items:center; gap:6px; padding:6px; font-size:8px; text-align:left; }
.up-op img { width:28px; height:auto; image-rendering:pixelated; }
.up-op.sel { border-color:var(--yellow); background:#3d2f00; }
.online { color:var(--green); }
#open-codex { font-size:9px; }
.history { max-height:320px; overflow:auto; margin-top:10px; font:12px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
.history-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; padding:5px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.history-row span:first-child { opacity:.7; }
.history-row .pos { color:var(--green); } .history-row .neg { color:var(--red); }
#history-tabs button[aria-pressed="true"] { background:var(--yellow); color:#000; }
#leaderboard { width:100%; border-collapse:collapse; font:13px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
#leaderboard th, #leaderboard td { padding:6px; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; }
#public-name { font:inherit; padding:8px; width:min(260px, 100%); }
.codex details { margin-bottom:10px; }
.codex summary { cursor:pointer; color:var(--yellow); font-size:11px; line-height:1.8; }
.codex-body { font:14px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif; margin-top:10px; }
.codex-body p + p { margin-top:8px; }
.codex-body ul { padding-left:20px; }
.codex-body table { border-collapse:collapse; margin:10px 0; font-size:13px; display:block; overflow-x:auto; max-width:100%; }
.codex-body th, .codex-body td { border:1px solid rgba(255,255,255,.15); padding:4px 8px; white-space:nowrap; text-align:left; }
.msg.ok { color:var(--green); }
.sound { font-size:13px; padding:5px 8px; }
.sound[aria-pressed="true"] { background:var(--panel); color:#fff; }
.zoom-hint { display:none; }
@media (max-width:720px) {
  .zoom-hint { display:block; }
  .map.zoom .frame { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .map.zoom canvas#screen { width:760px; max-width:none; }
}
.msg a { color:var(--yellow); }
.nft-tag { white-space:nowrap; font-size:7px; color:var(--green); text-decoration:none; border:1px solid var(--green); border-radius:3px; padding:1px 3px; }
span.nft-tag { color:var(--yellow); border-color:var(--yellow); }
