/* XRooms: Chrome Y2K. Black like X, silver chrome panels, one acid lime accent. */
:root {
  --bg:#0b0b0c; --ink:#000; --box:#000; --card:#0d0d0d; --line:#333; --line2:#222;
  --text:#e8e8e8; --muted:#8a8a8a; --dim:#5a5a5a; --accent:#c6ff00; --pink:#ff2e88; --cyan:#7ad7ff;
  --chrome:linear-gradient(180deg,#f4f4f4 0%,#bdbdbd 45%,#8a8a8a 50%,#d6d6d6 100%);
  --mi:"Michroma", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --logo:"Rubik Mono One", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:13px/1.45 var(--mono); }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; }
a { color:var(--accent); }
[hidden] { display:none !important; }
canvas.pix, .pix { image-rendering:pixelated; image-rendering:crisp-edges; }
.chrome { background:var(--chrome); border:1px solid var(--ink); box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #555; color:#111; }
.mi { font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; }
.grow { flex:1; }
.row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.muted { color:var(--muted); }

/* pills and chips */
.pill { height:36px; padding:0 16px; border-radius:18px; border:1px solid var(--ink); background:#111; color:#fff; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:10px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.pill.go { background:var(--accent); color:#000; }
.pill.ghost { background:#111; color:var(--accent); border-color:var(--accent); }
.pill.on { background:var(--accent); color:#000; border-color:var(--accent); }
.pill:disabled { opacity:.45; }
.chip { font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; border-radius:14px; padding:7px 12px; border:1px solid var(--ink); background:#cfcfcf; color:#111; white-space:nowrap; }
.chip.on { background:#000; color:var(--accent); }
.chip.dark { background:#111; color:var(--text); }
.chip.dark.on { background:var(--accent); color:#000; }
.tagchip { position:absolute; top:6px; left:6px; font-family:var(--mi); letter-spacing:1px; text-transform:uppercase; font-size:8px; color:#000; background:var(--accent); border-radius:8px; padding:2px 6px; }
.qty { position:absolute; top:6px; right:6px; font-size:10px; font-weight:700; color:#000; background:var(--text); border-radius:8px; padding:0 6px; }

/* logo */
.logo { height:56px; padding:0 20px; border-radius:28px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.logo span { font-family:var(--logo); font-size:26px; color:#111; letter-spacing:-1px; }
.logo i { width:10px; height:10px; border-radius:5px; background:var(--accent); border:1px solid #000; }

/* ---------- landing ---------- */
body.landing { display:grid; place-items:center; min-height:100%; padding:16px;
  background:radial-gradient(800px 420px at 50% -10%, #2a2a2a 0%, transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px), var(--bg); }
.hero { width:100%; max-width:480px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero .logo { height:72px; padding:0 30px; border-radius:36px; }
.hero .logo span { font-size:36px; }
.hero h1 { font-family:var(--mi); text-transform:uppercase; letter-spacing:3px; font-size:20px; margin:24px 0 8px; }
.crew { display:flex; justify-content:center; align-items:flex-end; margin:18px 0 10px; min-height:112px; }
.crew canvas { margin:0 -6px; }
.tag { color:var(--muted); margin:0 0 22px; }
.small { color:var(--dim); font-size:12px; margin-top:18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; width:100%; height:52px; border-radius:26px; border:1px solid #000; background:var(--accent); color:#000; font-family:var(--mi); letter-spacing:3px; text-transform:uppercase; font-size:13px; text-decoration:none; box-shadow:0 0 0 1px var(--accent); }
.btn:disabled { opacity:.6; }

/* ---------- game shell ---------- */
body.game { height:100dvh; display:flex; flex-direction:column; gap:12px; padding:16px; overflow:hidden; }
.topbar { display:flex; align-items:center; gap:12px; flex:none; }
.wallet { display:flex; align-items:center; gap:8px; background:#000; border:1px solid var(--line); border-radius:20px; padding:4px 4px 4px 14px; flex:none; }
.wallet b { font-size:14px; color:var(--accent); white-space:nowrap; }
.claim { height:30px; padding:0 12px; border-radius:15px; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; white-space:nowrap; background:var(--accent); color:#000; border:1px solid #000; }
.claim:disabled { background:#111; color:var(--muted); border-color:var(--line); }
/* shown next to the countdown while the free Bits cool down */
.getbits { position:relative; width:30px; height:30px; flex:none; border-radius:50%; border:1px solid #000; background:var(--accent); padding:0; }
/* the plus is drawn, not typed, so it sits dead centre whatever the font */
.getbits::before, .getbits::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#000; transform:translate(-50%, -50%); }
.getbits::after { transform:translate(-50%, -50%) rotate(90deg); }
.nav { display:flex; gap:5px; margin-left:auto; }
.nav button { font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; color:#111; border-radius:16px; padding:9px 11px; background:var(--chrome); border:1px solid #000; box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 #555; }
.nav button.on { background:var(--accent); box-shadow:none; color:#000; }
.nav button.x { background:#000; color:#fff; border-color:#fff; box-shadow:none; }

.wrap { flex:1; min-height:0; display:flex; gap:12px; }
.side { width:200px; flex:none; display:flex; flex-direction:column; gap:12px; min-height:0; }
.card { border-radius:14px; padding:8px; display:flex; flex-direction:column; gap:8px; flex:none; }
.card .stage { background:#111; border:1px solid #000; border-radius:8px; height:190px; position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background-image:linear-gradient(#232323 1px, transparent 1px), linear-gradient(90deg, #232323 1px, transparent 1px); background-size:30px 40px; }
/* the chibi always fits under the status tag, whatever the card size */
#me { position:absolute; inset:34px 8px 8px; display:flex; align-items:flex-end; justify-content:center; }
#me canvas { height:100% !important; width:auto !important; max-width:100%; object-fit:contain; object-position:bottom; }
.card .name { font-size:13px; color:#111; padding:0 4px 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status { position:absolute; top:8px; left:8px; display:flex; align-items:center; gap:6px; background:#000; border:1px solid var(--line); border-radius:10px; padding:2px 8px 2px 6px;
  font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:8px; color:var(--text); }
.status i { width:8px; height:8px; border-radius:4px; background:var(--accent); }
.box { flex:1; min-height:0; overflow:auto; background:var(--box); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.box h4 { margin:0; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; font-weight:400; color:var(--muted); }
.box hr { border:0; height:1px; background:var(--line2); margin:2px 0; width:100%; }
.box input { width:100%; min-width:0; height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:#111; color:var(--text); }
.legal { font-size:9.5px; color:#7a7a7a; line-height:13px; }
.legal a { color:#b0b0b0; }

/* room log */
#log { display:flex; flex-direction:column; gap:2px; font-size:11px; line-height:16px; overflow:auto; }
#log .sys { color:#666; }
#log b { font-weight:400; }

.frame { flex:1; min-width:0; border-radius:22px; padding:12px; display:flex; flex-direction:column; position:relative; }
.roomview { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.bar { display:flex; align-items:center; gap:10px; color:#111; padding:0 6px; min-height:28px; }
.bar .mi { font-size:11px; }
.bar .meta { font-size:10px; }
.bar .chip { padding:5px 10px; }
.screen { flex:1; min-height:0; background:#000; border:2px solid #111; border-radius:12px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px #444; }
#view { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none;
  background:radial-gradient(700px 400px at 50% 35%, #1c1c1f, #000); }
#chatlog { display:none; position:absolute; left:10px; bottom:10px; pointer-events:none; flex-direction:column; gap:3px; max-width:min(420px, calc(100% - 20px)); }
#chatlog div { background:rgba(0,0,0,.8); border:1px solid var(--line); padding:2px 8px; border-radius:8px; font-size:12px; width:fit-content; max-width:100%; overflow-wrap:anywhere; transition:opacity 1s; }
#chatlog .sys { color:var(--muted); }
#chatlog .fade { opacity:0; }
#editbar { display:none; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
  padding:8px 10px; background:#000; border:1px solid var(--accent); border-radius:18px; width:max-content; max-width:calc(100% - 20px); }
#editbar span { font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:10px; color:var(--accent); margin:0 4px; }
#editbar .pill { height:32px; padding:0 12px; }
#editbar span.pieces { color:#000; background:var(--accent); border-radius:8px; padding:3px 8px; font-size:9px; letter-spacing:1px; }
#editbar span.pieces.full { background:var(--pink); color:#fff; }
body.editing #editbar { display:flex; }
body.editing #chatlog, body.editing #chatform { visibility:hidden; }
#chatform { display:flex; gap:8px; align-items:center; flex:none; }
#chat { flex:1; min-width:0; height:36px; background:#111; color:var(--accent); border:1px solid #000; border-radius:18px; padding:0 16px; outline:none; font-size:16px; }
#chat:focus { box-shadow:0 0 0 1px var(--accent); }
#chatform { position:relative; }
#emoteBtn { flex:none; }
.emotes { position:absolute; right:0; bottom:44px; z-index:5; width:min(360px, 100%); display:flex; flex-direction:column; gap:8px;
  background:#000; border:1px solid var(--accent); border-radius:16px; padding:10px; }
.emotes .head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.emotes .head .mi { font-size:9px; color:var(--muted); }
.emotes .more { border:0; background:none; padding:0; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; color:var(--accent); }
/* three rows show at once; more emotes scroll inside the menu */
.emotes .list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; max-height:118px; overflow-y:auto; }
.emotes .list .chip { width:100%; overflow:hidden; text-overflow:ellipsis; }
.scrollrow { position:relative; flex:none; display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; padding:3px 2px;
  -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); }
.scrollrow::-webkit-scrollbar { display:none; }
.scrollrow > * { flex:none; }

/* ---------- shop / furni / closet ---------- */
.pane { flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.tabs { display:flex; gap:4px; align-items:flex-end; flex:none; }
.tabs button { font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:11px; padding:9px 16px; border-radius:10px 10px 0 0; border:1px solid #000; border-bottom:0; background:#cfcfcf; color:#111; }
.tabs button.on { background:#000; color:var(--accent); }
.tabs .grow { border-bottom:1px solid #000; align-self:stretch; }
.panehead { display:flex; align-items:center; gap:8px; color:#111; padding:0 4px; flex:none; flex-wrap:wrap; }
.panehead > .mi { font-size:12px; margin-right:4px; }
.cats { display:flex; gap:6px; flex-wrap:wrap; flex:none; }
.grid { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows:150px; gap:8px; padding:2px; align-content:start; }
.item { display:flex; flex-direction:column; align-items:stretch; padding:0; background:var(--card); color:var(--text); border-radius:10px; overflow:hidden; position:relative; border:2px solid #111; text-align:left; }
.item.on { border-color:var(--accent); }
.item .pic { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding-top:8px; overflow:hidden; }
.item .pic { background:radial-gradient(closest-side, #262626, transparent); }
.item .pic canvas { max-width:90%; max-height:100%; object-fit:contain; }
.item .lbl { display:flex; justify-content:space-between; align-items:baseline; gap:4px; padding:4px 8px 7px; }
.item .lbl span { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .lbl em { font-style:normal; font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap; }
.item .sub { padding:0 8px 7px; margin-top:-4px; font-size:10px; color:var(--muted); }
.empty { grid-column:1/-1; color:#333; padding:30px 10px; text-align:center; }
.detail { min-height:96px; flex:none; background:#000; border:2px solid #111; border-radius:12px; display:flex; align-items:center; gap:14px; padding:8px 14px; box-shadow:inset 0 0 0 1px #444; }
.detail .pic { width:100px; height:80px; display:flex; align-items:flex-end; justify-content:center; flex:none; overflow:hidden; }
.detail .pic canvas { max-width:100%; max-height:100%; }
.detail .pic.you { height:100px; }
.detail .info { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.detail .info .mi { font-size:13px; color:#fff; }
.detail .info small { font-size:11px; color:var(--muted); }
.detail .info b { font-size:16px; color:var(--accent); }
.detail .acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sticker { position:absolute; top:-10px; right:24px; background:var(--pink); color:#fff; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; padding:5px 10px; transform:rotate(4deg); border:1px solid #000; pointer-events:none; }

/* expansion panel */
.ladder { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
.ladder button { height:30px; padding:0; border-radius:6px; font-size:11px; font-weight:700; background:#000; color:#6a6a6a; border:1px solid #2a2a2a; }
.ladder button.owned { background:#1e1e1e; color:var(--text); border-color:#333; }
.ladder button.cur { border-color:var(--accent); }
.ladder button.view { background:var(--accent); color:#000; border-color:#000; }
.sizeprev { height:132px; flex:none; background:var(--card); border:1px solid var(--line2); border-radius:8px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:14px 8px 6px; }
.sizeprev.next { border-color:var(--accent); }
.sizeprev canvas { max-width:100%; max-height:100%; }
.sizeprev .tagchip { top:6px; left:6px; }
.sizeprev .tagchip.grey { background:#333; color:var(--text); }
.meter { height:6px; background:#1e1e1e; border-radius:3px; overflow:hidden; flex:none; }
.meter i { display:block; height:100%; background:var(--accent); }
.meter.full i { background:var(--pink); }
.kv { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }

/* closet */
body.view-closet .side { width:300px; }
body.view-closet .card { flex:1; min-height:0; }
body.view-closet .card .stage { flex:1; height:auto; min-height:220px; }
body.view-closet .box { flex:none; }
.sw { width:22px; height:22px; border-radius:6px; border:1px solid #000; padding:0; }
.sw.on { outline:2px solid var(--accent); outline-offset:1px; }

/* modal (share, welcome) */
.modal { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.7); display:grid; place-items:center; padding:16px; }
.modal .sheet { width:min(420px, 100%); border-radius:18px; padding:14px; display:flex; flex-direction:column; gap:10px; position:relative; }
.modal .sheet h3 { margin:0; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:13px; color:#111; }
.modal .sheet p { margin:0; color:#222; }
.modal .sheet input { width:100%; height:36px; border-radius:10px; border:1px solid #000; background:#111; color:var(--accent); padding:0 10px; }
.modal .close { position:absolute; right:12px; top:12px; border:0; background:none; color:#111; font-family:var(--mi); letter-spacing:2px; text-transform:uppercase; font-size:9px; }

#toast { position:fixed; left:50%; top:80px; transform:translateX(-50%) translateY(-10px); background:var(--accent); color:#000; border:1px solid #000;
  padding:7px 14px; border-radius:18px; font-family:var(--mi); letter-spacing:1px; font-size:11px; opacity:0; transition:.2s; pointer-events:none; z-index:30; max-width:calc(100% - 32px); text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%); }

.visitor-only { display:none !important; }
body.visitor .visitor-only { display:inline-flex !important; }

/* embed: just the room */
body.embed { padding:0; gap:0; }
body.embed .topbar, body.embed .side, body.embed .bar { display:none; }
body.embed .frame { border-radius:0; padding:8px; }
body.embed #chatlog { display:flex; }

/* ---------- phones (X's in-app browser) ---------- */
@media (max-width: 760px) {
  body.game { padding:8px; gap:8px; }
  .topbar { flex-wrap:wrap; gap:8px; }
  .topbar .logo { height:40px; padding:0 14px; }
  .topbar .logo span { font-size:18px; }
  .wallet { margin-left:auto; }
  .claim .lbl { display:none; }
  .nav { width:100%; margin:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .nav button { padding:9px 2px; font-size:8px; letter-spacing:.5px; white-space:nowrap; overflow:hidden; }
  .wrap { flex-direction:column; overflow:auto; gap:8px; }
  .side { width:auto !important; order:2; }
  body.view-room .side { display:none; }
  body.view-room .wrap { overflow:hidden; }
  .card { display:none; }
  body.view-closet .card { display:flex; flex:none; }
  body.view-closet .card .stage { height:220px; flex:none; }
  .box { flex:none; overflow:visible; }
  .frame { border-radius:16px; padding:8px; flex:none; }
  body.view-room .frame { flex:1; }
  body:not(.view-room) .pane { min-height:72dvh; }
  .grid { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows:128px; }
  .tabs { overflow-x:auto; }
  .tabs button { font-size:9px; letter-spacing:1px; padding:8px 10px; flex:none; }
  #chatlog { display:flex; }
  .bar .meta { display:none; }
  .detail { flex-wrap:wrap; gap:8px; position:sticky; bottom:0; z-index:2; }
  .detail .pic { width:64px; height:64px; }
  .detail .pic.you { width:76px; height:100px; }
  .detail .acts { width:100%; }
  .detail .acts .pill { flex:1; }
  .sticker { display:none; }
}