/* Ainer home = room (TASK-2026-10-27-AINER step 2). Kit per docs/SPEC-AINER-ART.md: page #11131c, card #232838,
   Chakra Petch text (owner #49; the art stays pixel), amber = action, cyan = info / power. Phone first, wide from the same parts. */
/* owner #50: Jersey 15 (OFL, self-hosted latin) sized up to read as big as Chakra Petch */
@font-face { font-family: "Ainer Display"; src: url(fonts/jersey15-latin.woff2?v=M6TY61Ag7y) format("woff2"); font-display: swap; size-adjust: 128%; }
/* Chakra Petch 500 / 700 (SIL OFL 1.1) self-hosted (owner #276): no render-blocking Google round trip, works where Google is blocked */
@font-face { font-family: "Chakra Petch"; font-weight: 500; src: url(fonts/chakra-petch-500-vietnamese.woff2?v=XIsnxO0-mt) format("woff2"); font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; src: url(fonts/chakra-petch-500-latin-ext.woff2?v=e8913l9Hxd) format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; src: url(fonts/chakra-petch-500-latin.woff2?v=_W-HpVDXqY) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; src: url(fonts/chakra-petch-700-vietnamese.woff2?v=_Ki0p5gOrq) format("woff2"); font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; src: url(fonts/chakra-petch-700-latin-ext.woff2?v=nMYHjR1JdC) format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; src: url(fonts/chakra-petch-700-latin.woff2?v=0J9sKDFYpc) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --vw: 1vw; --vh: 1dvh; /* the viewport units of the design: fixed under html.fit (fit.js) */
  --bg: #11131c; --card: #232838; --card-2: #1a1e2b; --line: #39405a; --ink: #0b0d1a;
  --text: #e8edf8; --muted: #8f99b3; --amber: #f0a01e; --amber-d: #8a4a0c; --cyan: #2ed2ee; --green: #5cc860;
  --wall: #2e3b70; --wall-d: #1f2850; --floor: #4e2e1a; --floor-l: #7a4a2a;
  --f-display: "Ainer Display", "Chakra Petch", system-ui, sans-serif; /* owner #50: a little pixel, still readable */ --f-body: "Chakra Petch", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 0.95rem/1.4 var(--f-body); }
button { font: 700 0.95rem var(--f-display); letter-spacing: 0.03em; color: var(--text); background: var(--card); border: 2px solid var(--line);
  border-radius: 0.5rem; min-height: 2.75rem; padding: 0 0.9rem; cursor: pointer; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button.act { background: var(--amber); color: var(--ink); border-color: var(--amber-d); box-shadow: inset 0 -0.2rem 0 var(--amber-d); }
.app { container-type: inline-size; max-width: 75rem; margin: 0 auto; padding: 0.75rem; display: grid; gap: 0.75rem;
  padding-top: calc(0.75rem + var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)); }

/* top bar + power panel */
.top { display: flex; align-items: center; gap: 0.5rem; }
.logo { font: 700 1.3rem var(--f-display); letter-spacing: 0.06em; margin-right: auto; }
.chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem;
  padding: 0.35rem 0.6rem; font: 700 0.95rem var(--f-display); white-space: nowrap; }
.power { background: var(--card); border: 2px solid #1d6a7c; border-radius: 0.6rem; padding: 0.6rem 0.8rem; display: grid; gap: 0.2rem; }
.power h2 { margin: 0; font: 700 0.95rem var(--f-display); color: #b8a8ff; letter-spacing: 0.05em; }
.power .big { font: 700 1.35rem var(--f-display); color: var(--cyan); }
.power .sub { color: var(--muted); font-size: 0.85rem; }

/* sprites: one sheet, frames side by side, played with steps() (4 frames x 0.1 s) */
.spr { position: absolute; width: calc(var(--g) * var(--s) * 1px); height: calc(var(--g) * var(--s) * 1px); background-repeat: no-repeat;
  background-size: calc(var(--g) * var(--n) * var(--s) * 1px) 100%; image-rendering: pixelated; image-rendering: crisp-edges;
  animation: spr calc(var(--n) * 0.1s) steps(var(--n)) infinite; }
@keyframes spr { to { background-position-x: calc(var(--g) * var(--n) * var(--s) * -1px); } }
@media (prefers-reduced-motion: reduce) { .spr { animation: none; } }

/* the room: wall + floor in art pixels x the zoom (--s); pans sideways on a phone */
.stagewrap { background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; overflow: hidden; position: relative; }
.stage { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; cursor: grab; scrollbar-width: thin; }
.stage.drag { cursor: grabbing; }
.room { position: relative; height: calc(var(--h) * var(--s) * 1px); width: calc(var(--w) * var(--s) * 1px); margin: 0 auto; }
.wall { position: absolute; inset: 0 0 auto 0; height: calc(var(--wall) * var(--s) * 1px);
  background: repeating-linear-gradient(90deg, var(--wall) 0 calc(31px * var(--s)), var(--wall-d) 0 calc(32px * var(--s))); }
.wall::after { content: ""; position: absolute; inset: auto 0 0 0; height: calc(3px * var(--s)); background: var(--ink); }
.window { position: absolute; top: calc(10px * var(--s)); height: calc(26px * var(--s)); width: calc(56px * var(--s)); background: #0b1330;
  border: calc(2px * var(--s)) solid var(--ink); box-shadow: inset 0 0 0 calc(2px * var(--s)) #44569a; }
.floor { position: absolute; inset: calc(var(--wall) * var(--s) * 1px) 0 0 0;
  background: repeating-linear-gradient(0deg, var(--floor) 0 calc(11px * var(--s)), #3d2414 0 calc(12px * var(--s))),
    var(--floor); }
.spot { position: absolute; border: calc(1px * var(--s)) dashed #ffffff33; border-radius: calc(3px * var(--s)); }
.rack { position: absolute; width: calc(128px * var(--s)); height: calc(128px * var(--s)); }
.rack > .spr { left: 0; top: 0; }
.zoom { position: absolute; right: 0.4rem; top: 0.4rem; display: flex; gap: 0.3rem; z-index: 2; }
.zoom button { min-height: 2.5rem; min-width: 2.5rem; padding: 0; font-size: 1.1rem; background: #11131ccc; }
.bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.app > .bar { position: sticky; bottom: 0; z-index: 3; background: var(--bg); padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom)); }
.bar .rooms { display: flex; align-items: center; gap: 0.35rem; margin-right: auto; color: var(--muted); }
.bar .rooms b { font: 700 1rem var(--f-display); color: var(--text); background: var(--card); border: 2px solid var(--line); border-radius: 0.4rem; padding: 0.3rem 0.6rem; }

/* edit mode: the rack-slot blueprint */
.bp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; padding: 0.6rem; border-radius: 0.6rem;
  background: var(--card-2) repeating-linear-gradient(0deg, transparent 0 23px, #ffffff10 0 24px), repeating-linear-gradient(90deg, transparent 0 23px, #ffffff10 0 24px); }
@container (min-width: 40rem) { .bp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 64rem) { .bp { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.slot { background: #1b1f2dee; border: 2px solid var(--line); border-radius: 0.5rem; min-height: 11rem; display: grid; place-items: center;
  gap: 0.3rem; padding: 0.4rem; text-align: center; }
.slot .rk { position: relative; width: 128px; height: 128px; --s: 1; }
.slot small { color: var(--muted); }
.slot .name { font: 700 0.9rem var(--f-display); }

/* sheets: fit the screen, sticky X, scroll inside (scroll on every device) */
.sheet { position: fixed; inset: 0; background: #000a; display: grid; align-items: end; justify-items: center; z-index: 10; }
.sheet .box { background: var(--card); border: 2px solid var(--line); border-radius: 0.8rem 0.8rem 0 0; width: min(100%, 40rem);
  max-height: calc(88 * var(--vh)); overflow-y: auto; overscroll-behavior: contain; padding: 0 0.8rem 0.8rem; }
@container (min-width: 40rem) { .sheet { align-items: center; } }
.sheet .head { position: sticky; top: 0; background: var(--card); display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0 0.5rem; z-index: 1; }
.sheet .head h3 { margin: 0 auto 0 0; font: 700 1.05rem var(--f-display); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.tabs button { flex: 1; }
.tabs button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.list { display: grid; gap: 0.45rem; }
.row { display: flex; align-items: center; gap: 0.6rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.5rem; padding: 0.4rem 0.5rem; }
.pic { position: relative; width: 48px; height: 48px; flex: none; }
.row .txt { flex: 1; min-width: 0; }
.row .txt b { display: block; font: 700 0.95rem var(--f-display); }
.row .txt span { color: var(--muted); font-size: 0.82rem; }
.row .pw { color: var(--cyan); }
.row button { min-height: 2.5rem; }
.empty { color: var(--muted); text-align: center; padding: 1rem; }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--card); border: 2px solid var(--cyan); border-radius: 0.5rem;
  padding: 0.5rem 0.9rem; font: 700 0.95rem var(--f-display); z-index: 20; white-space: nowrap; }

/* the new-player welcome card (Telegram join) */
.welcome { text-align: center; padding-bottom: 1rem; border-radius: 0.8rem; }
.welcome .wl-pic { position: relative; width: 128px; height: 128px; margin: 1rem auto 0.4rem; }
.welcome h3 { font: 700 1.3rem var(--f-display); margin: 0 0 0.4rem; }
.welcome p { color: var(--muted); margin: 0 0 0.8rem; }
.welcome .terms { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-bottom: 0.6rem; min-height: 2.75rem; }
.welcome .terms input { width: 1.25rem; height: 1.25rem; }
.welcome .err { color: #ff6b6b; margin: 0 0 0.5rem; }
.welcome button { width: 100%; }

/* the AI lab (step 2b): watt meter, rig builder, warnings */
.watt { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.watt .meter { flex: 1; height: 0.6rem; background: var(--ink); border: 2px solid var(--line); border-radius: 0.3rem; overflow: hidden; }
.watt .meter i { display: block; height: 100%; background: var(--green); }
.watt .meter i.hot { background: #ff6b6b; }
.watt b { font: 700 0.85rem var(--f-display); color: var(--text); white-space: nowrap; }
.off .spr { filter: grayscale(1) brightness(0.5); animation: none; }
.warn { color: #ffb347; }
.sheet h4 { font: 700 0.95rem var(--f-display); margin: 0.8rem 0 0.4rem; color: #b8a8ff; }

.row button + button { margin-left: 0.3rem; }

/* step 2d (owner #43): one clear screen — slim header, one power card, the lab in the middle, a bottom tab bar */
.app { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); gap: 0.6rem; }
.power { padding: 0.55rem 0.75rem; gap: 0.15rem; }

.power .big { font-size: 1.5rem; }
.power .edge { font: 700 0.85rem var(--f-display); color: var(--green); background: #5cc86022; border-radius: 0.3rem; padding: 0.05rem 0.4rem; }
.watt { margin-top: 0.1rem; }
.zoom button { min-height: 2.25rem; min-width: 2.25rem; }
.wide { width: 100%; margin-bottom: 0.6rem; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #0b0d16f2; border-top: 2px solid var(--line); padding: 0.3rem 0.3rem calc(0.3rem + env(safe-area-inset-bottom)); }
.tabbar button { border: 0; background: none; min-height: 3.25rem; display: grid; place-items: center; gap: 0.05rem; font-size: 0.78rem; color: var(--muted); padding: 0; }
.tabbar button .ic { font-size: 1.25rem; line-height: 1; }
.tabbar button[aria-current="page"] { color: var(--amber); }
/* Build = a short station list */
.slist { display: grid; gap: 0.45rem; }
.srow { display: flex; align-items: center; gap: 0.6rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.55rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; text-align: left; width: 100%; min-height: 4.25rem; font: inherit; }
.srow .pic { width: 56px; height: 56px; }
.srow .txt { flex: 1; min-width: 0; }
.srow .txt b { display: block; font: 700 0.95rem var(--f-display); }
.srow .txt span { color: var(--muted); font-size: 0.8rem; }
.srow .go { color: var(--muted); font-size: 1.2rem; }
.srow.empty { border-style: dashed; justify-content: center; color: var(--amber); font: 700 0.95rem var(--f-display); }
.app { grid-template-columns: minmax(0, 1fr); }
.app > * { min-width: 0; }
.toast { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
.av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 0.5rem; overflow: hidden; border: 2px solid var(--line);
  background: radial-gradient(circle at 50% 40%, #4aa8ff66, #1a1e2b 70%); }

/* owner #46: the Lab = the Hamster / Notcoin band order, one phone screen, heights from cqh (PROTOCOL-LAYOUT) */
html, body { height: 100%; }
.app { position: fixed; inset: 0; container-type: size; display: flex; flex-direction: column; gap: clamp(0.35rem, 1.2cqh, 0.7rem);
  overflow-y: auto; max-width: 40rem; margin: 0 auto; padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
.app > .view { display: flex; flex-direction: column; gap: clamp(0.35rem, 1.2cqh, 0.7rem); flex: 1 0 auto; }
.app > .view[hidden] { display: none; }
.daily { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.daily button { min-height: clamp(2.5rem, 7cqh, 3.4rem); display: grid; place-items: center; gap: 0; font-size: 0.75rem; padding: 0.2rem; }
.daily .ic { font-size: 1.1rem; line-height: 1; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.stat { background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; padding: 0.3rem 0.45rem; min-width: 0; }
.stat small { display: block; color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.stat b { display: block; font: 700 clamp(0.85rem, 2.3cqh, 1rem) var(--f-display); color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.edge b { color: var(--green); } .stat.day b { color: var(--amber); }
.vault { text-align: center; display: grid; justify-items: center; gap: 0.1rem; }
.vault small { color: var(--muted); font-size: 0.75rem; }
.vault b { font: 700 min(9cqw, 5.4cqh) var(--f-display); letter-spacing: 0.02em; }
.vault .vbar { display: block; width: 60%; height: 0.35rem; background: var(--ink); border-radius: 1rem; overflow: hidden; }
.vault .vbar span { display: block; height: 100%; background: var(--amber); width: 0; }
.core { position: relative; flex: 1 1 auto; min-height: clamp(9rem, 30cqh, 18rem); border: 0; background: radial-gradient(circle at 50% 55%, #2ed2ee33, transparent 62%);
  display: grid; place-items: center; padding: 0; }
.core:active { transform: scale(0.97); }

.core .hint { position: absolute; bottom: 0.3rem; left: 50%; transform: translateX(-50%); font: 700 0.8rem var(--f-display); color: var(--muted); white-space: nowrap; }
.core.full .hint { color: var(--amber); }
.energy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.45rem; }
.energy .meter { height: 0.6rem; background: var(--ink); border: 2px solid var(--line); border-radius: 0.3rem; overflow: hidden; }
.energy .meter i { display: block; height: 100%; background: var(--green); }
.energy .meter i.hot { background: #ff6b6b; }
.energy b { font: 700 0.8rem var(--f-display); white-space: nowrap; }
.energy button { min-height: 2.5rem; }
.stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }

@container (max-width: 320px) { .stat small { font-size: 0.6875rem; } .daily button { font-size: 0.7rem; } }
.core { flex: none; min-height: 0; align-content: start; }
.core .hint { bottom: 0; }

.daily button { min-height: clamp(2.3rem, 6cqh, 3.2rem); }
.app, .app > .view { gap: clamp(0.3rem, 1cqh, 0.7rem); }
.stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* owner #47: taps on the game screen never select text (grey boxes on the vault / watts after tapping the CORE), and the
   display font's C read as O at 700 -> labels in the body font, Pixelify only for the big numbers + the name */
.app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.app input, .app textarea { -webkit-user-select: text; user-select: text; }
button, .daily button, .tabbar button, .core .hint, .vault small, .stat small { font-family: var(--f-body); font-weight: 700; letter-spacing: 0.02em; }
/* owner #50: Jersey 15 (a little pixel) for names, headings, big numbers, sized up in the @font-face */
.top .who, .welcome h3, .sheet .head h3, .sheet h4, .core .hint { font-family: var(--f-display); font-weight: 400; letter-spacing: 0.03em; }
.vault b, .stat b, .chip, .srow .txt b, .row .txt b, .energy b  { font-weight: 400; }
/* step 2i (owner #52): animation rows work / boost / win in one sheet; .is-boost / .is-win on an ancestor picks the row */
.spr[data-r] { background-size: calc(var(--g) * var(--n) * var(--s) * 1px) calc(var(--rows) * 100%);
  background-position-y: calc(var(--row, 0) * var(--g) * var(--s) * -1px); }
.is-boost .spr[data-r] { --row: 1; animation-duration: calc(var(--n) * 0.07s); }
.is-win .spr[data-r] { --row: 2; }

/* money (owner #56, #57): BTC full coin 12 decimals + AIN; header wallet button, the vault ticker, the Wallet sheet */
.ico { display: inline-block; width: 1.1rem; height: 1.1rem; flex: none; background: 0 0 / 400% 100% no-repeat; image-rendering: pixelated;
  animation: ico-spin 0.4s steps(4) infinite; }
@keyframes ico-spin { to { background-position-x: 133.333%; } }
@media (prefers-reduced-motion: reduce) { .ico { animation: none; } }
.ico-btc { background-image: url(art/icon-btc.png?v=_Zjg3mkaoi); } .ico-ain { background-image: url(art/icon-ain.png?v=eYBzV1mfNp); } .ico-usdt { background-image: url(art/icon-usdt.png?v=n9WOwRnY-q); }
.vault b { font-size: min(7.4cqw, 5cqh); font-variant-numeric: tabular-nums; }
.vault .vsym { font: 700 0.75rem var(--f-body); color: var(--amber); margin-top: -0.15rem; }
.stat.day b { font-size: clamp(0.7rem, 1.9cqh, 0.85rem); }
.wal { display: grid; gap: 0.5rem; padding-bottom: 0.4rem; }
.wbal { display: flex; align-items: center; gap: 0.6rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.55rem; padding: 0.5rem 0.7rem; }
.wbal .ico { width: 2rem; height: 2rem; }
.wbal small { display: block; color: var(--muted); font-size: 0.75rem; }
.wbal b { font: 400 1.15rem var(--f-display); letter-spacing: 0.02em; }
.wal h4 { margin: 0.4rem 0 0; }
.wal button.act[disabled] { opacity: 0.45; }
.wal .sub { color: var(--muted); font-size: 0.8rem; margin: 0; }
/* owner #58: 14 decimals still fit one 344 phone line (header, vault, BTC / day) */
.vault b { font-size: min(6.6cqw, 4.8cqh); }
.stat.day b { font-size: clamp(0.6875rem, 1.7cqh, 0.74rem); letter-spacing: 0; }
/* owner #59: BTC = the familiar mark (orange disc + white tilted B, crisp SVG, like CoinMarketCap) so a player sees it is Bitcoin */
.ico-btc { background: url(btc.svg?v=Nm_uxLi6O-) center / contain no-repeat; image-rendering: auto; animation: none; }
.vault .vsym { display: inline-flex; align-items: center; gap: 0.3rem; }
.vault .vsym::before { content: ""; width: 1.05rem; height: 1.05rem; background: url(btc.svg?v=Nm_uxLi6O-) center / contain no-repeat; }

/* Store (owner #67): rows with price in AIN, +/- qty, a sticky cart bar with the total and Buy */
.row .price { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--cyan); font-weight: 700; margin-top: 0.1rem; }
.row .price .ico { width: 0.9rem; height: 0.9rem; }
.row .txt span { display: block; }
.row .qty { min-width: 1.4rem; text-align: center; font: 400 1.05rem var(--f-display); }
.row button[data-inc], .row button[data-dec] { min-width: 2.5rem; padding: 0; font-size: 1.2rem; }
.cartbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; margin-top: 0.6rem;
  padding: 0.55rem 0.6rem; background: var(--card); border: 2px solid var(--cyan); border-radius: 0.6rem; font-size: 0.85rem; }
.cartbar b.ain { color: var(--cyan); } .cartbar .sub { color: var(--muted); }
.cartbar button[disabled] { opacity: 0.45; }
/* the $AIN coin (owner #206): a slow sway + a light glint across it instead of the 4-frame flip; transform only, so it
   runs at the display rate on the compositor; no mask, see below */
/* the $AIN coin turns on a flat transform (owner #385): a mask + 3D perspective on a moving layer turned the phone's WebView black, from the splash logo on */
.ico-ain { animation: ain-sway 3.2s ease-in-out infinite; }
@keyframes ain-sway { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.72); } }
@media (prefers-reduced-motion: reduce) { .ico-ain { animation: none; } }
/* owner #68: two engines — Mining GH/s (orange) + Trading TOK/s (cyan, the agents' Edge in green) */
.stat.mine b { color: #f7931a; }
.stat small .edge { font-style: normal; color: var(--green); }
.row .gh { color: #f7931a; }

.tabs button { padding: 0 0.35rem; font-size: 0.82rem; white-space: nowrap; } /* a label never shrinks: a long language takes a second row */

/* Cases (owner #69): case cards with the odds folded, the open overlay (shake -> burst -> prize spring) */
.case { background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; padding: 0.4rem 0.5rem; }
.case-top { display: flex; align-items: center; gap: 0.6rem; }
.case-top .txt { flex: 1; min-width: 0; } .case-top .txt b { display: block; font: 400 1.1rem var(--f-display); }
.case-pic { width: 64px; height: 64px; }
.case button[disabled] { opacity: 0.45; }
.caseopen { position: fixed; inset: 0; z-index: 40; background: #05060c; display: grid; place-items: center; overflow: hidden; }
.co-prize { position: absolute; display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 1rem; opacity: 0; transform: scale(0.3); pointer-events: none; }
.caseopen.show .co-prize { opacity: 1; transform: none; pointer-events: auto; transition: transform 0.55s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.2s; }
.co-ray { position: absolute; width: 22rem; height: 22rem; top: 50%; left: 50%; margin: -13rem 0 0 -11rem; z-index: -1;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 35%, transparent) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: co-spin 9s linear infinite; }
@keyframes co-spin { to { transform: rotate(1turn); } }
.co-pic { position: relative; width: 96px; height: 96px; filter: drop-shadow(0 0 1rem var(--rc)); }
.co-prize > em { font-style: normal; font-weight: 700; color: var(--rc); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; }
.co-prize > b { font: 400 1.6rem var(--f-display); }
.co-prize > span { color: var(--muted); font-size: 0.85rem; } .co-prize > small { color: var(--green); font-weight: 700; }
.co-prize > button { min-width: 10rem; margin-top: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .co-ray { animation: none; } }
/* owner #70, #71: the middle = the room scene (scene-pixel.js), tap = Claim; a full vault glows amber */
.labscene { position: absolute; inset: 0 0 1.4rem 0; display: block; overflow: hidden; border-radius: 0.6rem; }
.core { position: relative; width: 100%; background: none; }

/* owner #72: ROOM 1 holds the stations; the room fills the middle and pans sideways (the station cards row is gone) */
.core { flex: 1 1 auto; min-height: 12rem; height: auto !important; }
.core:active { transform: none; }
.labscene { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
.labscene::-webkit-scrollbar { display: none; }

/* owner #73: ROOM 1 = 9 wall slots above the desk (no racks); a slot = one miner or one AI rig */
.labscene { overflow: hidden; touch-action: manipulation; }
.px-slot { position: absolute; border-radius: calc(3 * var(--u)); background: #0b0d1acc; border: calc(1.2 * var(--u)) solid #44569a;
  box-shadow: inset 0 0 calc(5 * var(--u)) #2ed2ee22; }
.px-slot.empty { border-style: dashed; border-color: #ffffff44; background: #0b0d1a55; display: grid; place-items: center; }
.px-slot.empty b { color: var(--amber); font: 400 calc(12 * var(--u)) var(--f-display); }
.px-slot.off { filter: grayscale(1) brightness(0.6); }
.px-slot:active { filter: brightness(1.3); }
.px-sl { position: absolute; left: calc(33 * var(--u)); right: calc(2 * var(--u)); top: 50%; transform: translateY(-50%); display: grid;
  font: 400 calc(9 * var(--u))/1 var(--f-display); color: var(--cyan); white-space: nowrap; overflow: hidden; }
.px-sl i { font-style: normal; } .px-sl i.gh { color: #f7931a; } .px-sl small { font: 700 calc(5 * var(--u)) var(--f-body); color: var(--muted); }
.srow.off { opacity: 0.6; }

/* owner #74, #75: every room cell is a tap target; unit cells = the picture big, the power under it; Claim = the vault */
.px-hit { position: absolute; pointer-events: auto; cursor: pointer; }
.px-hit:active { background: #ffffff14; }
.px-slot .px-sl { left: 0; right: 0; top: auto; bottom: calc(1 * var(--u)); transform: none; text-align: center; justify-items: center;
  font: 400 calc(8 * var(--u))/1 var(--f-display); }
.swatch { display: block; width: 100%; height: 100%; border-radius: 0.4rem; border: 2px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--a) 0 0.7rem, var(--b) 0 0.8rem); }
button.vault { background: none; border: 0; padding: 0.2rem 0.4rem; min-height: 0; color: inherit; font: inherit; position: relative; cursor: pointer; }
.vault .claim-pill { display: inline-block; margin-top: 0.25rem; padding: 0.2rem 1rem; border-radius: 1rem; background: var(--amber); color: var(--ink);
  font: 400 0.95rem var(--f-display); box-shadow: inset 0 -0.15rem 0 var(--amber-d); }
.vault.full .claim-pill { animation: pill-pulse 1s ease-in-out infinite; }
@keyframes pill-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 1rem #f0a01e; } }
button.vault:active .claim-pill { transform: translateY(1px); }
.core .hint { color: var(--muted); }

/* owner #77, #78: serials link to the item page; the room's share chip; the live feed ticker */
a.sn { color: var(--amber); text-decoration: none; font: 400 0.9em var(--f-display); }
.core .share { position: absolute; right: 0.4rem; top: 0.4rem; z-index: 3; min-height: 2rem; padding: 0 0.6rem; font: 700 0.75rem var(--f-body); background: #0b0d1acc; }
.feed { overflow: hidden; border-radius: 0.5rem; background: var(--card-2); border: 1.5px solid var(--line); padding: 0.2rem 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.feed[hidden] { display: none; }
.feed-in { display: flex; gap: 1.2rem; width: max-content; animation: feed-run 40s linear infinite; font-size: 0.75rem; white-space: nowrap; }
@keyframes feed-run { to { transform: translateX(-50%); } }
.fd-k { font: 700 0.6875rem var(--f-body); font-style: normal; letter-spacing: 0.06em; padding: 0 0.3rem; border-radius: 0.3rem; color: var(--ink); background: var(--cyan); }
.fd-k.is-claim { background: #f7931a; } .fd-k.is-sell { background: var(--amber); } .fd-k.is-transfer { background: var(--green); }
.fd b { color: var(--text); } .fd i { font-style: normal; color: var(--cyan); } .fd i.gh { color: #f7931a; } .fd { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .feed-in { animation: none; } }

/* owner #80: the item sheet — Use / Instant sell / Transfer / the item page */
.iacts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
/* the item sheet (owner #219): tall, the art on its rarity glow, one-line rows, Use / Remove as the big gold button */
.sheet.tall .box { min-height: min(calc(85 * var(--vh)), 44rem); }
.ih-art { position: relative; display: grid; place-items: center; height: 11rem; margin-top: 0.2rem;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), var(--card-2);
  box-shadow: inset 0 -3px 0 var(--rc), 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.ih-art .pic { width: 128px; height: 128px; display: grid; place-items: center; }
.ih-art .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.ih-kind { margin: 0.7rem 0 0.1rem; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.ih-kind em { font-style: normal; font-weight: 700; color: var(--rc); text-transform: uppercase; letter-spacing: 0.08em; }
.ih-what { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--rc); }
.ih-rows { display: grid; border-top: 2px solid var(--line); }
.ih-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; min-height: 2.3rem; border-bottom: 2px solid var(--line); font-size: 0.85rem; white-space: nowrap; }
.ih-row span { color: var(--muted); } .ih-row b { display: inline-flex; align-items: center; gap: 0.25rem; font: 400 1rem var(--f-display); }
.iacts .ih-main { flex-basis: 100%; min-height: 3rem; font-size: 1rem; }
.iacts button[disabled] { opacity: 0.5; }
.iacts button { flex: 1 1 100%; white-space: nowrap; } /* one action a row, one line each (owner #236) */

#isend { display: flex; gap: 0.4rem; margin-top: 0.5rem; } #isend input { flex: 1; min-width: 0; min-height: 2.75rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); padding: 0 0.7rem; font: inherit; }
.row button[data-item] { min-width: 2.5rem; padding: 0; font-size: 1.2rem; }

/* owner #82: the mined number + the BTC mark on one line */
.vault .vrow { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
.vault .vrow .vsym { margin: 0; flex: none; }

/* owner #83: 12 wall cells reach the room's top, so Share sits on the floor corner, clear of the cells */
.core .share { top: auto; bottom: 2.2rem; }

/* owner #84–#86: the Claim button stays its own pill, "Full in …" on its left, one line */
.vault .vclaim { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; white-space: nowrap; }
.vault .vclaim .claim-pill { margin-top: 0; }
.vault .vclaim small { font: 700 0.75rem var(--f-body); color: var(--muted); }
.vault .vclaim small.warn { color: var(--amber); }

/* owner #87: the vault = one card like the stat cards (number + Full in … + Claim grouped); full = amber rim */
button.vault { background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; padding: 0.35rem 0.6rem 0.45rem; width: 100%; }
button.vault.full { border-color: var(--amber); }

/* owner #88: Mining (left) + TOK/s (right) live in the vault card's bottom row around Claim; the stats row + BTC / day are gone */
.vault .vfoot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.4rem; width: 100%; margin-top: 0.25rem; }
.vault .vfoot .vclaim { margin-top: 0; }
.vault .vst { display: grid; min-width: 0; line-height: 1.15; }
.vault .vst.mine { justify-items: start; text-align: left; } .vault .vst.tok { justify-items: end; text-align: right; }
.vault .vst small { font: 700 0.6875rem var(--f-body); color: var(--muted); white-space: nowrap; }
.vault .vst b { font: 400 clamp(0.85rem, 2.3cqh, 1rem) var(--f-display); white-space: nowrap; letter-spacing: 0.02em; }
.vault .vst.mine b { color: #f7931a; } .vault .vst.tok b { color: var(--cyan); }
.vault .vst .edge { font-style: normal; color: var(--green); }
@container (max-width: 300px) { .vault .vclaim { flex-direction: column; gap: 0.15rem; } }
.vault .vfoot { gap: 0.25rem; }
.vault .vst small { font-size: 0.6875rem; letter-spacing: 0; }
.vault .vst b { font-size: clamp(0.8rem, 2.1cqh, 0.95rem); letter-spacing: 0; }

/* owner #89: the room switcher ‹ ROOM n › above the wall; a locked room = a padlock card over the room */
.core .rnav { position: absolute; top: 0.25rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 0.3rem;
  background: #0b0d1acc; border: 2px solid var(--line); border-radius: 1rem; padding: 0.1rem 0.25rem; }
.core .rnav b { font: 400 0.95rem var(--f-display); letter-spacing: 0.06em; min-width: 4.6rem; text-align: center; }
.core .rnav button { min-height: 1.6rem; min-width: 2rem; padding: 0; border: 0; background: none; color: var(--amber); font: 700 1.2rem var(--f-body); }
.core .rnav button:disabled { color: var(--muted); opacity: 0.4; }
.core.other .labscene { filter: grayscale(0.8) brightness(0.45); pointer-events: none; }
.core.other::before { filter: grayscale(0.8) brightness(0.45); } /* #470: the wall strip above the scene dims with it */
.core.other .px-layer, .core.other .px-spr { visibility: hidden; } /* #470: a locked room is empty, no item half under the padlock card */
.core.other .share { display: none; }
.core .rlock { position: absolute; inset: 2.3rem 0.5rem 1.8rem; z-index: 3; display: grid; place-items: center; }
.rlock .rcard { width: 100%; max-width: 19rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.7rem; padding: 0.7rem 0.8rem; text-align: center; display: grid; gap: 0.4rem; }
.rlock .rpad { font-size: 1.8rem; line-height: 1; }
.rlock h4 { margin: 0; font: 400 1.15rem var(--f-display); letter-spacing: 0.04em; }
.rlock p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.rlock .rreq { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; background: var(--card-2); border-radius: 0.5rem; padding: 0.4rem 0.55rem; font: 700 0.8rem var(--f-body); text-align: left; }
.rlock .rreq i { font-style: normal; color: var(--amber); white-space: nowrap; }
.core.other .px-slot, .core.other .hint { visibility: hidden; }

/* owner #90: the room's watts live IN the room (each room = its own budget, upgrades per room later): the bar + Boost
   on the floor; Share moves to the top strip next to ‹ ROOM n › */
.core .energy { position: absolute; left: 0.4rem; right: 0.4rem; bottom: calc(1.4rem + 0.35rem); z-index: 3; gap: 0.35rem;
  background: #0b0d1acc; border: 2px solid var(--line); border-radius: 0.6rem; padding: 0.15rem 0.2rem 0.15rem 0.45rem; }
.core .energy button { min-height: 2rem; padding: 0 0.8rem; }
.core .energy b { font-size: 0.75rem; }
.core .share { top: 0.25rem; bottom: auto; min-height: 1.75rem; }
.core.other .energy { visibility: hidden; }
@media (max-width: 320px) { .core .share { padding: 0 0.55rem; } }

/* owner #93–#96: room watts (tap = upgrade), the energy chip (tap = batteries), the Energy + watt sheets */
.core .energy { grid-template-columns: minmax(0, 1fr) auto auto; }
.core .energy .wbtn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem; min-width: 0; min-height: 2rem;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.core .energy .wbtn .up { font-style: normal; color: var(--amber); font-size: 0.75rem; }
.core .echip { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2rem; padding: 0 0.45rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); }
.core .echip b { font: 400 0.8rem var(--f-display); }
.echip .bat { position: relative; display: inline-block; width: 1.1rem; height: 0.6rem; border: 2px solid currentColor; border-radius: 0.15rem; }
.echip .bat::after { content: ""; position: absolute; right: -0.25rem; top: 0.1rem; width: 0.12rem; height: 0.2rem; background: currentColor; }
.echip .bat i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); }
.core .echip.low { border-color: #ff6b6b; } .core .echip.low .bat i { background: #ff6b6b; }
.tank { position: relative; height: 1.6rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--ink); overflow: hidden; margin: 0.4rem 0 0.6rem; }
.tank i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--cyan), #2ed2ee99); }
.tank b { position: relative; display: block; text-align: center; line-height: 1.45rem; font: 700 0.8rem var(--f-body); }
.wlv { display: flex; justify-content: space-between; align-items: baseline; margin: 0.4rem 0 0.6rem; } .wlv b { font: 400 1.2rem var(--f-display); color: var(--amber); }
.act.wide { width: 100%; }
@media (max-width: 320px) { .core .energy .wbtn .ic { display: none; } .core .energy button.act { padding: 0 0.55rem; } }
@media (max-width: 320px) { .core .energy .wbtn { grid-template-columns: auto auto; justify-content: start; } .core .energy .wbtn .meter { display: none; } .core .echip { padding: 0 0.3rem; } .core .energy { gap: 0.25rem; } }

/* S1b (owner #102, #103): the Profile sheet = the wallet; every row one line */
button.who { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.pf { display: grid; gap: 0.35rem; }
.pf h4 { margin: 0.6rem 0 0.1rem; }
.pf-l, .pf-tx { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 0.5rem; margin: 0; white-space: nowrap; min-width: 0; }
.pf-l span, .pf-tx span { color: var(--muted); font-size: 0.8rem; } .pf-l b, .pf-tx b { margin-left: auto; } /* too long for one row = the value goes under, whole */
.pf-l b { font: 400 1rem var(--f-display); } .pf-l b.ain { color: var(--cyan); } .pf-l b.btc { color: #f7931a; }
.pf-addr { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; width: 100%; padding: 0 0.6rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); }
.pf-addr code { flex: 1; min-width: 0; font: 400 0.95rem var(--f-display); letter-spacing: 0.04em; text-align: left; white-space: nowrap; overflow: hidden; }
.pf-addr span { color: var(--amber); font: 700 0.8rem var(--f-body); }
.pf input { min-height: 2.75rem; width: 100%; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); padding: 0 0.7rem; font: inherit; }
.pf-row { display: flex; gap: 0.4rem; } .pf-row input { flex: 1; min-width: 0; }
.pf-tx b { font: 400 0.85rem var(--f-display); } .pf-tx b.in { color: var(--green); } .pf-tx b.out { color: var(--muted); }
.pf h4 .pf-scan { float: right; font: 700 0.8rem var(--f-body); color: var(--cyan); text-decoration: none; }

/* S2 (owner #99): the account sheet + the secret key sheet */
.linkish { background: none; border: 0; padding: 0; min-height: 2.75rem; color: var(--cyan); font: 700 0.85rem var(--f-body); text-align: left; cursor: pointer; }
.pf .tabs { margin-bottom: 0.2rem; }
.pf .terms { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.8rem; white-space: nowrap; }
.pf input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0; flex: none; accent-color: var(--amber); }
.pf .sub { white-space: nowrap; overflow: hidden; }
.i18n-pick { min-height: 2.25rem; max-width: 11rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); font: 700 0.8rem var(--f-body); }

/* protocol rule 4 (owner #97): rows and cards stay one line at 280 px — tighter type on narrow phones, never a cut word */
.row .txt b, .row .txt span { white-space: nowrap; }
@media (max-width: 320px) {
  .row .txt b { font-size: 0.82rem; } .row .txt span { font-size: 0.7rem; letter-spacing: 0; }

  .sheet .sub { font-size: 0.74rem; } .act.wide { font-size: 0.82rem; }
}
/* rule 4 at 280 px: case cards, battery rows with a price button, long item names, the wallet's 14-decimal BTC */
.case-top .txt b, .case-top .price, .wbal b { white-space: nowrap; }
@media (max-width: 320px) {
  .case-pic { width: 48px; height: 48px; } .case-top { gap: 0.4rem; } .case-top .txt b { font-size: 0.95rem; }
  .wbal b { font-size: 0.85rem; letter-spacing: 0; } .wbal .ico { width: 1.5rem; height: 1.5rem; }
  .row .pic { width: 40px; height: 40px; } .row > button, .row > .act { padding: 0 0.55rem; font-size: 0.78rem; }
}
@media (max-width: 320px) { #inv .row small { font-size: 0.6875rem; } #inv .row .txt b { font-size: 0.76rem; } #inv .row { gap: 0.3rem; } }

@media (max-width: 320px) { .sheet .tabs button { font-size: 0.72rem; padding: 0 0.35rem; } .core .energy .wbtn { gap: 0.15rem; } .core .energy .wbtn b { font-size: 0.7rem; } }

/* owner #116: the cooling cell on the wall, left of the desk */
.px-cool { position: absolute; z-index: 2; cursor: pointer; display: grid; place-items: center; border-radius: calc(4 * var(--u)); }
.px-cool.empty { border: 2px dashed #ffffff40; color: var(--amber); }
.px-cool .px-spr { position: absolute; }

/* owner #118–#124: the room name is a button (the room sheet); a locked cell */
.core .rnav #rname { background: none; border: 0; color: inherit; font: 400 0.95rem var(--f-display); letter-spacing: 0.06em; min-width: 4.6rem; max-width: 9.5rem;
  min-height: 1.6rem; padding: 0 0.2rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: pointer; }
.px-slot.locked { border: 2px dashed #ffffff30; background: #0b0d1a66; display: grid; place-items: center; cursor: pointer; }
.px-slot.locked b { font-size: calc(10 * var(--u)); opacity: 0.8; }

/* owner #125: the counters line under the room name; a locked cell says what opens it */

.px-slot.locked { grid-template-rows: 1fr auto; padding-bottom: calc(3 * var(--u)); }
.px-slot.locked i { font: 700 calc(6 * var(--u)) var(--f-body); font-style: normal; color: var(--amber); white-space: nowrap; }

/* owner #126: the room's side rail on the right, like a short-video app — 👥 followers · ❤ likes · 👁 views · ↗ Share */
.core .rside { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-62%); z-index: 4; display: grid; gap: 0.35rem; }
.core .rside button { display: grid; justify-items: center; gap: 0; min-width: 2.4rem; min-height: 2.6rem; padding: 0.15rem 0.1rem; border: 0; border-radius: 0.6rem;
  background: #0b0d1aa6; color: var(--text); cursor: pointer; }
.core .rside i { font-style: normal; font-size: 1.05rem; line-height: 1.1; }
.core .rside b { font: 400 0.6875rem var(--f-display); letter-spacing: 0.02em; white-space: nowrap; }

/* owner #127: watts + energy + Charge sit at the TOP of the room (under its name), the floor stays clear */
.core .energy { top: 2.35rem; bottom: auto; left: 0.4rem; right: 0.4rem; }
.core .energy button.act { min-height: 2rem; padding: 0 0.7rem; }
/* owner #127: a fixed header above the room scene — the name strip, then watts · energy · Charge — so nothing overlaps
   the cells at any width (the scene starts under it) */
.core .labscene { top: 4.75rem; }
.core .rnav { top: 0.2rem; }
.core .energy { top: 2.3rem; background: var(--card); }
.core .rside { top: calc(50% + 2.4rem); }
/* owner #128: the room picker ‹ GPU Farm › at the BOTTOM of the room (like a channel name under a short video); the top
   header = watts · energy · Charge; the old hint line gives its place to the picker */
.core .energy { top: 0.2rem; }
.core .labscene { top: 2.6rem; bottom: 2.4rem; }
.core .rnav { top: auto; bottom: 0.15rem; }
.core .hint { display: none; }
.core .rside { top: calc(50% + 0.1rem); }
@media (max-width: 320px) { .core .energy button.act { padding: 0 0.5rem; font-size: 0.8rem; } .core .energy .wbtn b { font-size: 0.6875rem; } .core .echip { padding: 0 0.3rem; } }
/* owner #129: the watts / energy / Charge HUD sits INSIDE the room: the room's wall panels continue behind it (one
   rounded room box), the HUD is a see-through strip on the wall */
.core::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3rem; z-index: 0; border-radius: 0.6rem 0.6rem 0 0;
  background: repeating-linear-gradient(90deg, var(--wall-a, #2e3b70) 0 calc(31 * var(--u, 1px)), var(--wall-b, #1f2850) 0 calc(32 * var(--u, 1px))); }
.core .labscene { border-top-left-radius: 0; border-top-right-radius: 0; }
.core .energy { top: 0.35rem; left: 0.35rem; right: 0.35rem; background: #0b0d1ab3; border-color: #ffffff26; z-index: 3; }
/* owner #130: no Charge button — a "+" inside the watts and the energy chips says "tap to add" */
.core .energy { grid-template-columns: minmax(0, 1fr) auto; }
.core .energy .up { font-style: normal; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--amber); color: var(--ink); font: 700 0.8rem/1 var(--f-body); margin-left: 0.15rem; }
.core .energy .wbtn .up, .core .energy .echip .up { color: var(--ink); font-size: 0.8rem; }
@media (max-width: 320px) { .core .rside { gap: 0.2rem; } .core .rside button { min-height: 2.15rem; min-width: 2.2rem; padding: 0.05rem; } .core .rside i { font-size: 0.9rem; } .core .rside b { font-size: 0.6875rem; } }

/* splash (owner #163): painted by the HTML before any script, home.js fades it once the lab is drawn; 8 s failsafe */
.splash { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 0.4rem;
  background: radial-gradient(circle at 50% 42%, var(--wall) 0, var(--wall-d) 70%); animation: sp-out 0.3s 8s forwards; }
.splash.out, .tgl.out { animation: sp-out 0.3s forwards; }
@keyframes sp-out { to { opacity: 0; visibility: hidden; } }
/* #191, #192: the logo only — the spinning $AIN coin, AINER, ainer.store */
.sp-coin { width: 9rem; height: 9rem; animation-duration: 0.9s; }
.sp-name { margin-top: 0.4rem; font: 400 3.4rem/1 var(--f-display); letter-spacing: 0.08em; color: var(--amber); }
.sp-url { font: 400 1.2rem var(--f-display); letter-spacing: 0.06em; color: var(--cyan); }
/* #193: a pixel battery that charges once, 0 → 100 % in 10 cells, full at 1.6 s of the 2 s splash, the % counting with it (CSS only) */
.sp-bar { position: relative; display: block; width: 9rem; height: 1.3rem; margin-top: 1rem; padding: 3px; background: var(--ink);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.sp-bar::after { content: ""; position: absolute; right: -9px; top: 30%; width: 6px; height: 40%; background: var(--line); }
.sp-bar span { display: block; height: 100%; clip-path: inset(0 100% 0 0); animation: sp-fill 1.6s steps(10, end) forwards;
  background: repeating-linear-gradient(90deg, var(--green) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
@keyframes sp-fill { to { clip-path: inset(0 0 0 0); } } /* cells appear whole, one by one */
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.sp-pct { --pct: 0; counter-reset: pct var(--pct); font: 400 1rem var(--f-display); color: var(--green); animation: sp-count 1.6s steps(10, end) forwards; }
.sp-pct::after { content: counter(pct) "%"; }
@keyframes sp-count { to { --pct: 100; } }
@media (prefers-reduced-motion: reduce) { .sp-bar span { animation: none; clip-path: none; } .sp-pct { animation: none; --pct: 100; } }

/* Telegram landing (owner #163, #164): a new Telegram player's first screen = what Ainer is + notifications + Terms */
.tgl { position: fixed; inset: 0; z-index: 20; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 0.26rem;
  padding: calc(1rem + var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 24%, var(--wall) 0, var(--bg) 55%); }
/* the stage = the old landing's frame (landing.css .lp-stage) around the lab scene, sized to leave the rest on one screen */
/* #189: edge to edge like a phone video player — the full width (out through the side padding), 16:9, capped on short screens */
.tgl-stage { position: relative; flex: none; width: calc(100% + 2rem); margin: 0 -1rem; --sh: min(calc(56.25 * var(--vw)), calc(100 * var(--vh) - 35.5rem)); --su: calc(var(--sh) / 160); height: var(--sh); overflow: hidden;
  border-block: 2px solid var(--cyan); /* a flat colour until the canvas draws its wall + floor (owner #422) */
  background: #2e3b70;
  box-shadow: inset 0 0 1.4rem #2ee6ff33, 0 0 1.2rem #2ee6ff22; }
/* the gift banner (owner #185): one pixel strip above the stage — gift, the free pool, the call to play */
.tgl-ban { --px: 3px; --edge: #5a2e06; --hi: #ffd27a; --lo: var(--amber-d); flex: none; width: min(100%, 22rem); display: flex; align-items: center; gap: 0.4rem;
  min-height: 2.3rem; padding: 0 0.6rem; margin-top: auto; background: linear-gradient(90deg, #b82e3e, #7a1c2c); white-space: nowrap;
  box-shadow: 0 calc(var(--px) * -1) 0 var(--edge), 0 var(--px) 0 var(--edge), calc(var(--px) * -1) 0 0 var(--edge), var(--px) 0 0 var(--edge),
    inset 0 var(--px) 0 #ff9aa0, inset 0 calc(var(--px) * -1) 0 #3e0e1a; }
.tb-gift { position: relative; flex: none; width: 32px; height: 32px; }
.tb-amt { display: grid; line-height: 1.05; }
.tgl-ban b { font: 400 min(1.15rem, calc(4.6 * var(--vw))) var(--f-display); color: #ffc94a; }
.tgl-ban small { font-size: min(0.7rem, calc(3 * var(--vw))); color: #ffd8b8; }
.tgl-ban em { margin-left: auto; font: 400 min(0.95rem, calc(3.9 * var(--vw))) var(--f-display); font-style: normal; color: var(--text); }
.tgl h1 { margin: 0.2rem 0 0; display: grid; justify-items: center; line-height: 1; }
.tgl-btc { display: flex; align-items: center; gap: 0.4rem; font: 400 min(2.4rem, calc(9 * var(--vw)))/1 var(--f-display); letter-spacing: 0.06em; color: var(--amber); }
.tgl-btc .ico { width: min(1.9rem, calc(7 * var(--vw))); height: min(1.9rem, calc(7 * var(--vw))); }
/* #311: Earning (left) + Instant Payout (right) flank BITCOIN, each an icon / tag over one short word */
.tgl-top { display: flex; align-items: center; justify-content: center; gap: min(0.6rem, calc(2 * var(--vw))); }
.tgl-badge { display: grid; justify-items: center; gap: 0.15rem; min-width: 3.2rem; }
.tgl-badge b { font: 400 min(0.85rem, calc(3.6 * var(--vw)))/1 var(--f-display); color: var(--green); white-space: nowrap; }
.tgl-badge .nb { font: 700 min(0.6875rem, calc(2.4 * var(--vw)))/1 var(--f-body); font-style: normal; letter-spacing: 0.06em; padding: 0.2em 0.35em; border-radius: 0.3rem; color: var(--ink); background: var(--amber); }
/* the live board (owner #311): totals, tabs, 3 rows; the rows keep their room while loading */
.lboard { width: min(100%, 22rem); display: grid; gap: 0.35rem; padding: 0.45rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.8rem; }
.lb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.lb-stats > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.3rem; align-items: center; padding: 0.25rem 0.35rem; background: var(--card); border-radius: 0.5rem; min-width: 0; }
.lb-stats .pxi { grid-row: span 2; } .lb-stats small, .lb-stats b { justify-self: start; }
.lb-stats small { font-size: min(0.6875rem, calc(2.7 * var(--vw))); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lb-stats b { font: 400 min(1.05rem, calc(4.4 * var(--vw)))/1.1 var(--f-display); color: var(--amber); white-space: nowrap; }
.tgl .lb-tabs { margin: 0; flex-wrap: nowrap; } .tgl .lb-tabs button { display: flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 0; padding: 0 0.3rem; font-size: min(0.8rem, calc(3.3 * var(--vw))); }
@media (max-width: 300px) { .tgl .lb-tabs .pxi { display: none; } } /* 280: the words keep the room */
.lb-list { display: grid; gap: 0.2rem; align-content: start; min-height: calc(5 * 1.55rem + 0.8rem); }
.lb-row { display: grid; grid-template-columns: auto minmax(0, auto) 1fr auto; align-items: center; gap: 0.35rem; height: 1.55rem; padding: 0 0.4rem;
  background: var(--card); border-radius: 0.4rem; font-size: min(0.74rem, calc(3.2 * var(--vw))); white-space: nowrap; animation: st-in 0.3s ease-out; }
.lb-row b { overflow: hidden; max-width: 5rem; color: var(--text); } .lb-row span { text-align: right; color: var(--cyan); overflow: hidden; } .lb-row small { color: var(--muted); font-size: 0.9em; }
.lb-row .ico { width: 0.85rem; height: 0.85rem; margin-right: 0.15rem; vertical-align: -0.12em; }
.lb-empty { margin: 0; padding: 0.9rem 0; text-align: center; color: var(--muted); font-size: min(0.8rem, calc(3.4 * var(--vw))); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lb-row { animation: none; } }
/* the tick + Start stick to the bottom (owner #311): a longer landing scrolls under them, the way in never hides */
.tgl-foot { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom)); z-index: 2; display: grid; justify-items: center; gap: 0.2rem; width: calc(100% + 2rem);
  margin: auto -1rem calc(-1rem - env(safe-area-inset-bottom)); padding: 0.6rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 1.2rem); }
.tgl-sub { font: 400 min(1.25rem, calc(5.4 * var(--vw)))/1.1 var(--f-display); color: var(--cyan); white-space: nowrap; }
.tgl .hi { margin: 0 0 0.2rem; font: 400 min(1.1rem, calc(4.1 * var(--vw))) var(--f-display); white-space: nowrap; }
.tgl .hi .nb { font: 700 0.62em/1 var(--f-body); font-style: normal; letter-spacing: 0.06em; padding: 0.2em 0.4em; border-radius: 0.3rem;
  color: var(--ink); background: var(--amber); vertical-align: 0.2em; } /* #174: the NEW badge */
.tgl .story, .tgl .chk, .tgl .act { width: min(100%, 22rem); }
.tgl .chk { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; font-size: min(0.9rem, calc(3.9 * var(--vw))); }
/* story card (owner #166): segment bars on top, one slide at a time, 3.5 s each, looping */
.story { position: relative; flex: none; padding: 0.35rem 0.6rem 0.4rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.8rem;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.st-bars { display: flex; gap: 0.25rem; margin-bottom: 0.3rem; }
.st-bars i { flex: 1; height: 0.2rem; border-radius: 1rem; background: var(--line); overflow: hidden; }
.st-bars span { display: block; height: 100%; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.st-bars .done span { transform: none; }
.st-bars .on span { animation: st-fill 3.5s linear forwards; }
.story:active .st-bars .on span { animation-play-state: paused; }
@keyframes st-fill { to { transform: none; } }
.st-slide { display: grid; grid-template-columns: 1.7rem 1fr; column-gap: 0.6rem; align-items: center; animation: st-in 0.3s ease-out; }
.st-slide .ic { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; background: var(--card); box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); font-size: 1.3rem; color: var(--amber); }
.st-slide b { font: 400 min(1.25rem, calc(5.4 * var(--vw)))/1.15 var(--f-display); color: var(--amber); white-space: nowrap; }
.st-slide small { display: none; } /* #312: one line, the title says it */
@keyframes st-in { from { opacity: 0; transform: translateX(0.6rem); } }
@media (prefers-reduced-motion: reduce) { .st-slide { animation: none; } .st-bars .on span { animation-timing-function: steps(1, end); } }
.tgl .chk { min-height: 2.75rem; padding: 0 0.2rem; }
.tgl .chk input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--amber); }
.tgl .err { margin: 0; color: #ff6b6b; }
.tgl .act { position: relative; }

/* pixel buttons (owner #176): every button sits in the pixel art — square, a 3 px edge in the button's own dark tone with
   the corners left out (the stepped pixel corner), a hard light row on top and a shade row under; pressed = one step down.
   Text-only buttons (tab bar, room arrows, the player name, the vault panel) keep their own look */
button:not(.tabbar button, .rnav button, .who, .vault) {
  --px: 3px; --edge: var(--line); --hi: #4a5372; --lo: var(--card-2);
  border: 0; border-radius: 0;
  box-shadow: 0 calc(var(--px) * -1) 0 var(--edge), 0 var(--px) 0 var(--edge), calc(var(--px) * -1) 0 0 var(--edge), var(--px) 0 0 var(--edge),
    inset 0 var(--px) 0 var(--hi), inset 0 calc(var(--px) * -1) 0 var(--lo);
}
button.act:not(.tabbar button, .rnav button, .who, .vault) { --edge: #5a2e06; --hi: #ffd27a; --lo: var(--amber-d); }
button:not(.tabbar button, .rnav button, .who, .vault):active { transform: translateY(2px);
  box-shadow: 0 calc(var(--px) * -1) 0 var(--edge), 0 var(--px) 0 var(--edge), calc(var(--px) * -1) 0 0 var(--edge), var(--px) 0 0 var(--edge), inset 0 var(--px) 0 var(--lo); }
/* the same pixel edge on the tap targets that are not <button>s: the Claim pill, the energy chip, the small + badges */
.vault .claim-pill, .core .echip, .core .energy .up { --px: 3px; border: 0; border-radius: 0;
  box-shadow: 0 calc(var(--px) * -1) 0 var(--edge), 0 var(--px) 0 var(--edge), calc(var(--px) * -1) 0 0 var(--edge), var(--px) 0 0 var(--edge),
    inset 0 var(--px) 0 var(--hi), inset 0 calc(var(--px) * -1) 0 var(--lo); }
.vault .claim-pill, .core .energy .up { --edge: #5a2e06; --hi: #ffd27a; --lo: var(--amber-d); }
.core .echip { --edge: var(--line); --hi: #4a5372; --lo: var(--ink); }
.core .energy .up { --px: 2px; }

/* pixel icons on the landing (owner #186): a centring box around one generator sprite */
.pxi { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.pxi > .spr { position: relative; left: 0 !important; top: 0 !important; }
.tgl-ban em { display: flex; align-items: center; gap: 0.25rem; }
.tgl-ban { cursor: pointer; } .tgl-ban:active { transform: translateY(2px); } /* a tap = Start (#305) */
.sp-name { display: flex; align-items: center; gap: 0.5rem; } .sp-name .ico { width: 2.2rem; height: 2.2rem; }

/* the room = one picture (owner #197): its height follows its width (the scene's 260 x 352 units + the ROOM strip), never
   the screen height, so a short screen scrolls instead of shrinking it; the energy row and the side rail zoom with the
   room (--k from its unit), so nothing overlaps and nothing gets too small to see */
.core { flex: none; min-height: 0; width: min(100%, 30rem); margin-inline: auto; aspect-ratio: 260 / 375; height: auto !important; }
.core .energy, .core .rside { zoom: var(--k, 1); }

/* nav (owner #198): the generator icons stand still (frame 1) */
.daily .ico, .tabbar .ico { animation: none; width: 1.5rem; height: 1.5rem; }
.ico-gift { background-image: url(art/icon-gift.png?v=lnlThqucDm); } .ico-gamepad { background-image: url(art/icon-gamepad.png?v=jS7eNcMwzJ); }
.ico-home { background-image: url(art/icon-home.png?v=ww5Gu7OpRD); } .ico-bag { background-image: url(art/icon-bag.png?v=mUg5iD6CmL); } .ico-shop { background-image: url(art/icon-shop.png?v=-tPKLuoRPL); }
.ico-case { background-image: url(art/case-starter-case.png?v=PgPvrrK8mO); background-size: 400% 300%; }
/* the bottom bar floats like the reference (StonksGift), pixel edged; any number of tabs, spread evenly */
.tabbar { left: 0.6rem; right: 0.6rem; bottom: calc(0.45rem + env(safe-area-inset-bottom)); max-width: 30rem; margin: 0 auto; padding: 0.25rem;
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; border: 0; background: var(--card-2);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.tabbar button { min-height: 3rem; }
.tabbar button[aria-current="page"] { background: var(--card); box-shadow: inset 0 3px 0 #4a5372, inset 0 -3px 0 var(--ink); }

/* full-screen pages (owner #199): Inventory + Case fill the screen above the Lab, the bottom bar stays on top of them */
.sheet.hd-sheet { z-index: 20; } /* the username sheet opens over the landing (#303) */
.sheet.page { z-index: 4; display: block; background: var(--bg); overflow: hidden; }
.sheet.page .box { width: min(100%, 40rem); max-height: none; margin: 0 auto; border: 0; border-radius: 0; background: none;
  padding: calc(0.4rem + var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)) 0.75rem 1rem;
  height: calc(100% - 4.9rem - env(safe-area-inset-bottom)); }
/* the page scrolls in a box that ends above the floating bar (owner #205, #215): no card ever slides under the bar */
.sheet.page .head { background: var(--bg); }
.sheet.page .head h3 { font: 400 1.35rem var(--f-display); letter-spacing: 0.04em; }
/* filter chips: wrap into rows like the reference */
.sheet.page .tabs { flex-wrap: wrap; gap: 0.45rem; margin: 0.2rem 0 0.8rem; }
.sheet.page .tabs button { flex: 1 0 28%; min-height: 2.5rem; }
.sheet.page .inv-tabs button { flex: 1 0 auto; min-width: 28%; } /* a long word (fr Refroidissement) takes a wider chip, never cut */
/* Inventory cards (owner #214): NFT-market style, the art fills the top on its rarity glow */
.icard { display: grid; gap: 0.15rem; padding: 0 0 0.55rem; text-align: center; background: var(--card); color: inherit; cursor: pointer; min-width: 0;
  box-shadow: inset 0 -3px 0 var(--rc), 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.icard:active { transform: translateY(2px); }
.ic-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 0.35rem;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%), var(--card-2); }
.ic-art .pic { width: 96px; height: 96px; display: grid; place-items: center; }
.ic-art .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.ic-sn, .ic-use { position: absolute; top: 0.35rem; font: 400 0.8rem/1 var(--f-display); font-style: normal; padding: 0.2rem 0.3rem; background: #0b0d16cc; white-space: nowrap; }
.ic-sn { right: 0.35rem; color: var(--amber); } .ic-use { left: 0.35rem; color: var(--green); font: 700 0.6875rem/1 var(--f-body); text-transform: uppercase; padding: 0.3rem; }
.icard b { font: 400 1rem var(--f-display); white-space: nowrap; padding: 0 0.3rem; }
.icard em { font-style: normal; font-weight: 700; font-size: 0.6875rem; color: var(--rc); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.icard .ic-stat { font-size: 0.74rem; font-weight: 700; color: var(--rc); white-space: nowrap; padding: 0 0.3rem; } /* the stat in its rarity colour (owner #242) */
.icard .ic-val { display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; font: 400 0.85rem var(--f-display); white-space: nowrap; }
.icard .ic-val .ico { width: 0.8rem; height: 0.8rem; }
@media (max-width: 320px) { .ic-art .pic { transform: scale(0.85); } .icard b { font-size: 0.88rem; } .icard .ic-stat { font-size: 0.6875rem; } }
.inv-tabs .n { font: 400 0.85rem var(--f-display); font-style: normal; color: var(--muted); }
.inv-tabs [aria-pressed="true"] .n { color: inherit; }
/* a 2-column card grid */
.sheet.page .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.sheet.page .list > p { grid-column: 1 / -1; margin: 0; }
.sheet.page .row { flex-direction: column; align-items: stretch; text-align: center; gap: 0.3rem; padding: 0.6rem 0.5rem; border-radius: 0; border: 0;
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.sheet.page .row .pic { align-self: center; width: 72px; height: 72px; display: grid; place-items: center; }
.sheet.page .row .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.sheet.page .row .txt b { font-size: 1rem; white-space: nowrap; overflow: hidden; }
.sheet.page .row small { color: var(--muted); }
.sheet.page .row button { width: 100%; margin: 0 !important; }
/* cases: big art, name, price, Open, odds under */
.sheet.page #cs > .case { display: grid; gap: 0.4rem; padding: 0.6rem 0.5rem; border-radius: 0; border: 0; text-align: center;
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.sheet.page .case-top { flex-direction: column; gap: 0.35rem; }
.sheet.page .case-pic { width: 96px; height: 96px; display: grid; place-items: center; }
.sheet.page .case-pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.sheet.page .case-top .txt b { font-size: 1.15rem; }
.sheet.page .case-top .price { justify-content: center; }
.sheet.page .case button { width: 100%; }
.case-pic[data-view] { cursor: pointer; }
.cs-more { min-height: 2.75rem; background: none; border: 0; box-shadow: none; color: var(--muted); font: 600 0.82rem var(--f-body); white-space: nowrap; cursor: pointer; }
/* one case (owner #203): back, the case + Open, then the prize grid rarest first; 3 across, 2 at 320 px and under */
.cs-back { align-self: start; min-height: 2.75rem; padding: 0 0.6rem; margin-bottom: 0.4rem; white-space: nowrap; }
.cs-hero { display: grid; justify-items: center; gap: 0.5rem; padding: 0.8rem 0.6rem; background: var(--card-2);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.cs-name { font: 400 1.4rem var(--f-display); white-space: nowrap; }
.cs-hero .cbar { width: 100%; } .cs-hero .act { width: 100%; white-space: nowrap; } .cs-hero .act.is-short { opacity: 0.55; }
.cs-h { margin: 1.1rem 0 0.6rem; text-align: center; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }
.prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; padding: 3px; }
@media (max-width: 320px) { .prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prize { display: grid; justify-items: center; gap: 0.15rem; padding: 0.45rem 0.25rem 0.55rem; background: var(--card); text-align: center; min-width: 0;
  box-shadow: inset 0 -4px 0 var(--rc), 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.prize .pic { width: 64px; height: 64px; display: grid; place-items: center; }
.prize .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.prize b { font: 400 1rem var(--f-display); white-space: nowrap; }
.prize span { font-size: 0.7rem; font-weight: 700; white-space: nowrap; max-width: 100%; }
.prize em { font-style: normal; font-weight: 700; font-size: 0.6875rem; color: var(--rc); text-transform: uppercase; white-space: nowrap; }

/* Case page (owner #200): the chance bar = each rarity's share of the odds */
.cbar { display: flex; height: 0.45rem; gap: 2px; margin: 0.15rem 0; }
.cbar span { min-width: 3px; }
/* the reel: a strip of prizes slides under a gold marker and slows down onto the won one */
.co-reel { position: absolute; left: 0; right: 0; top: 50%; height: 156px; margin-top: -78px; overflow: hidden; background: var(--card-2);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line); }
.caseopen.show .co-reel { opacity: 0; transition: opacity 0.25s; }
.co-strip { display: flex; gap: 8px; padding: 18px 0; will-change: transform; }
.co-tile { position: relative; flex: none; width: 120px; height: 120px; display: grid; place-items: center; background: var(--card);
  box-shadow: inset 0 -4px 0 var(--rc), 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.co-tile .spr { position: relative; left: 0 !important; top: 0 !important; }
.co-tile.lit { box-shadow: inset 0 -4px 0 var(--rc), 0 0 0 3px var(--rc), 0 0 1.2rem var(--rc); }
/* the near miss (owner #207): the rare one just past the marker glows twice, then dims; the won tile springs up */
.co-tile.lit { animation: co-win 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes co-win { from { transform: scale(0.9); } }
.co-tile.is-near::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 3px var(--rc), 0 0 1.4rem var(--rc); opacity: 0; }
.co-tile.lit-near::after { animation: co-near 0.9s ease-in-out 2; }
@keyframes co-near { 50% { opacity: 1; } }
.co-tile.lit-near { opacity: 0.6; transition: opacity 0.6s 1.6s; }
.co-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--amber); }
.co-reel:has(.co-canvas) .co-mark { visibility: hidden; } /* #468: no page pixel over the spinning canvas, a mask or glow there showed black bands; the canvas draws the marker */
.co-mark::before, .co-mark::after { content: ""; position: absolute; left: -6px; border: 7px solid transparent; }
.co-mark::before { top: 0; border-top-color: var(--amber); } .co-mark::after { bottom: 0; border-bottom-color: var(--amber); }
/* free event ladder (owner #222): the 30-step track (opened = green, this level = gold), the card + its countdown */
.ev-card { box-shadow: 0 -3px 0 var(--amber), 0 3px 0 var(--amber), -3px 0 0 var(--amber), 3px 0 0 var(--amber) !important; }
.ev-track { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; width: 100%; height: 0.5rem; margin: 0.25rem 0; }
.ev-track span { background: var(--line); } .ev-track .done { background: var(--green); } .ev-track .now { background: var(--amber); box-shadow: 0 0 0.4rem var(--amber); }
.ev-lv { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.ev-rule { text-align: center; margin: 0.5rem 0 0; white-space: nowrap; font-size: 0.75rem; }
.act.ev-wait { font: 400 1.1rem var(--f-display); letter-spacing: 0.06em; opacity: 1; }
.cs-hero .act[data-ev], .cs-hero .ev-wait, .cs-hero .act[disabled] { width: 100%; white-space: nowrap; }
/* the event card spans the whole row (a long name + the 30-step track need the width) */
.sheet.page #cs > .ev-card { grid-column: 1 / -1; }
.sheet.page .ev-card .case-top .txt b { white-space: nowrap; font-size: 1.05rem; }
.ev-card .act { white-space: nowrap; }
/* prize cards (owner #229): the stat + the value under the rarity, one line each */
.prize .pz-stat { font-size: 0.6875rem; font-weight: 700; color: var(--rc); white-space: nowrap; } /* the stat in its rarity colour, like the Inventory cards (owner #244) */
.prize .pz-val { display: inline-flex; align-items: center; gap: 0.25rem; font: 400 1.05rem var(--f-display); white-space: nowrap; } /* the value on top, big (#248) */
.prize .pz-val .ico { width: 0.95rem; height: 0.95rem; }
.prize .pz-odd { display: none; font: 400 0.8rem var(--f-display); color: var(--muted); white-space: nowrap; }
.prizes.show-odds .pz-odd { display: block; }
.cs-hh { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.1rem 0 0.6rem; }
.cs-hh .cs-h { margin: 0; }
.odds-tg { min-height: 2rem; padding: 0 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.odds-tg[aria-pressed="true"] { color: var(--cyan); }
/* the Profile page (owner #239): the account card with its VIP badge, three balance tiles, the tier card + quota bar, the ladder */
.pf-tabs { margin-bottom: 0.4rem; }
.pf-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; padding: 0.7rem; background: var(--card-2);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.pf-who { display: grid; min-width: 0; } .pf-who b { font: 400 1.35rem var(--f-display); white-space: nowrap; overflow: hidden; } .pf-who span { color: var(--muted); font-size: 0.78rem; }
.pf-vip { font-style: normal; font: 400 1.05rem var(--f-display); padding: 0.3rem 0.6rem; color: var(--muted); background: var(--card); white-space: nowrap;
  box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.pf-vip:not(.v0) { color: var(--ink); background: var(--amber); box-shadow: 0 0 0.8rem color-mix(in srgb, var(--amber) 55%, transparent); }
.pf-card .pf-addr { grid-column: 1 / -1; }
.pf-bals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.3rem 0; }
.pf-bals p:last-child { grid-column: 1 / -1; } /* BTC has 14 decimals: its own full row, never cut */
.pf-bals p { display: grid; gap: 0.15rem; margin: 0; padding: 0.5rem 0.4rem; background: var(--card); text-align: center; min-width: 0;
  box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.pf-bals span { color: var(--muted); font-size: 0.7rem; white-space: nowrap; } .pf-bals b { font: 400 0.95rem var(--f-display); white-space: nowrap; overflow: hidden; }
.pf-bals b.ain { color: var(--cyan); } .pf-bals b.btc { color: #f7931a; }
.pf-lock { margin: 0.2rem 0; color: var(--amber); font-size: 0.82rem; white-space: nowrap; }
.pf-tier { display: grid; gap: 0.3rem; padding: 0.6rem 0.7rem; margin-top: 0.4rem; background: var(--card); }
.pf-bar { display: block; height: 0.55rem; background: var(--line); } .pf-bar span { display: block; height: 100%; background: var(--cyan); }
.pf-ladder { display: grid; gap: 2px; } .pf-ladder p { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.5rem; margin: 0; padding: 0.35rem 0.5rem; background: var(--card); font-size: 0.8rem; white-space: nowrap; }
.pf-ladder b { font: 400 0.95rem var(--f-display); } .pf-ladder em { font-style: normal; color: var(--muted); } .pf-ladder .now { background: var(--card-2); box-shadow: inset 3px 0 0 var(--amber); }
.pf-ladder .now b { color: var(--amber); }
@media (max-width: 320px) { .pf-bals { grid-template-columns: 1fr; } .pf-bals p { grid-template-columns: 1fr auto; text-align: left; } }
/* boxes alive (owner #250): an aura in the box's colour breathes behind it, the box floats; the open page adds slow
   light rays. Transform + opacity only, on the compositor; still under reduced motion */
.case-pic[style*="--rc"] { position: relative; isolation: isolate; animation: cs-float 3.6s ease-in-out infinite; }
.case-pic[style*="--rc"]::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent) 0%, transparent 62%); animation: cs-aura 3.6s ease-in-out infinite; }
.case-pic.big::after { content: ""; position: absolute; inset: -45%; z-index: -2; border-radius: 50%; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 40%, transparent) 0deg 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: co-spin 16s linear infinite; }
@keyframes cs-float { 50% { transform: translateY(-5px); } }
@keyframes cs-aura { 50% { opacity: 0.5; transform: scale(0.86); } }
@media (prefers-reduced-motion: reduce) { .case-pic[style*="--rc"], .case-pic[style*="--rc"]::before, .case-pic.big::after { animation: none; } }
.cs-tier { display: block; font-size: 0.78rem; font-weight: 700; color: var(--rc, var(--muted)); white-space: nowrap; } /* a themed case: the theme, then its tier (#250) */
/* grids stay calm (owner #251): a card's sprite holds its first frame (the 4-frame fx flashed too fast, the same on every
   rare card); the rarity shows as a soft glow behind the art instead, faster + stronger up the ladder (glowLevel 1 → 4) */
.prize .spr, .icard .spr { animation: none; }
.prize .pic, .icard .ic-art .pic { position: relative; isolation: isolate; }
.prize[data-fx] .pic::before, .icard[data-fx] .ic-art .pic::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 50%, transparent), transparent 66%); }
.prize[data-fx="1"] .pic::before, .icard[data-fx="1"] .ic-art .pic::before { animation: fx-glow 5s ease-in-out infinite; --fx-hi: 0.3; }
.prize[data-fx="2"] .pic::before, .icard[data-fx="2"] .ic-art .pic::before { animation: fx-glow 4.2s ease-in-out infinite; --fx-hi: 0.45; }
.prize[data-fx="3"] .pic::before, .icard[data-fx="3"] .ic-art .pic::before { animation: fx-glow 3.4s ease-in-out infinite; --fx-hi: 0.65; }
.prize[data-fx="4"] .pic::before, .icard[data-fx="4"] .ic-art .pic::before { animation: fx-glow 2.8s ease-in-out infinite; --fx-hi: 0.85; }
@keyframes fx-glow { 0%, 100% { opacity: calc(var(--fx-hi) * 0.35); transform: scale(0.9); } 50% { opacity: var(--fx-hi); transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .prize .pic::before, .icard .ic-art .pic::before { animation: none; opacity: 0.4; } }
/* the stop (owner #254): the won tile gets an exact square frame (white inside, its colour outside), the others dim */
.co-frame { position: absolute; inset: -6px; pointer-events: none; opacity: 0; transform: scale(1.18);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rc), 0 0 1.4rem var(--rc); animation: co-frame 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes co-frame { to { opacity: 1; transform: none; } }
.caseopen.landed .co-tile:not(.is-win) { opacity: 0.45; transition: opacity 0.35s; }
/* ×1 / ×2 / ×3 (owner #255): the picker, the stacked reels, the haul card with its total on top */
.cs-hero .cs-n { width: 100%; margin: 0; flex-wrap: nowrap; } .cs-hero .cs-n button { flex: 1 1 0; min-height: 2.5rem; }
.co-reels { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.co-reels .co-reel { position: relative; top: auto; margin-top: 0; }
.caseopen.multi .co-reels .co-reel { height: 132px; } .caseopen.multi .co-tile { width: 100px; height: 100px; } .caseopen.multi .co-strip { padding: 16px 0; }
.caseopen.show .co-reels { opacity: 0; transition: opacity 0.25s; }
.co-reel.landed .co-tile:not(.is-win) { opacity: 0.45; transition: opacity 0.35s; }
.co-haul { width: min(20rem, calc(92 * var(--vw))); gap: 0.45rem; }
.co-total { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.3rem; padding: 0.35rem 0.9rem; font: 400 1.6rem var(--f-display); color: var(--ink); background: var(--amber);
  box-shadow: 0 0 1.2rem color-mix(in srgb, var(--amber) 60%, transparent); white-space: nowrap; }
.co-total .ico { width: 1.3rem; height: 1.3rem; }
.co-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.4rem; width: 100%; margin: 0; padding: 0.25rem 0.4rem; background: var(--card);
  box-shadow: inset 3px 0 0 var(--rc); white-space: nowrap; }
.co-row .pic { width: 48px; height: 48px; display: grid; place-items: center; } .co-row .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.co-row b { font: 400 0.95rem var(--f-display); overflow: hidden; text-align: left; } .co-row em { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--rc); text-transform: uppercase; }
.co-row .ico { width: 0.8rem; height: 0.8rem; } .co-row small { font: 400 0.9rem var(--f-display); color: var(--text); }
.ih-ed { color: var(--amber); text-decoration: none; white-space: nowrap; } a.ic-sn { text-decoration: none; } /* edition + id, one line (#262) */
.iacts button .ico { width: 1rem; height: 1rem; margin: 0 0.15rem 0 0.25rem; vertical-align: -0.15rem; } /* the $AIN coin in Instant sell + Transfer (#263) */
/* the ticker opens Live $AINER Blockchain (owner #268): a LIVE chip, then the running line */
#feed:not([hidden]) { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.2rem; cursor: pointer; }
.feed-live { flex: none; min-height: 1.6rem; padding: 0 0.45rem; font: 700 0.6875rem var(--f-body); color: var(--green); white-space: nowrap; background: var(--card); }
.feed-run { flex: 1; min-width: 0; overflow: hidden; }
/* the chat door at the end of the ticker (owner #365): the Live page on its Chat tab; the fade moves onto the running line */
#feed:not([hidden]) { -webkit-mask: none; mask: none; } #feed .feed-run { -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 90%, transparent); }
.feed-chat { flex: none; display: grid; place-items: center; width: 2.4rem; min-height: 1.6rem; padding: 0; background: var(--card); color: var(--cyan); }
.feed-chat > i { font-style: normal; font-size: 0.9rem; } .feed-chat .pxi { display: grid; place-items: center; }
/* the Live page: five tabs, one-line rows, the chat cards + the share bar */
/* #319: the five Live tabs in one row like the landing board — an icon over one short word, equal widths */
.sheet.page .lv-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.sheet.page .lv-tabs button { display: grid; justify-items: center; align-content: center; gap: 0.1rem; min-width: 0; min-height: 3rem; padding: 0.2rem 0.1rem; font-size: min(0.72rem, calc(2.9 * var(--vw))); }
.lv-tabs button span { white-space: nowrap; }
.lv-body { display: grid; gap: 2px; }
.lv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.3rem 0.5rem; text-align: left;
  background: var(--card); color: var(--text); white-space: nowrap; box-shadow: inset 3px 0 0 var(--rc, var(--line)); font-size: 0.8rem; }
.lv-row em { font-style: normal; font: 700 0.6875rem var(--f-body); color: var(--cyan); } .lv-row span { overflow: hidden; } .lv-row small { color: var(--muted); }
.lv-row > span { display: grid; } .lv-name { font: 400 0.95rem var(--f-display); overflow: hidden; } .lv-n { font-style: normal; font: 400 1rem var(--f-display); color: var(--amber); min-width: 1.4rem; }
.lv-win { grid-template-columns: auto 32px minmax(0, 1fr) auto; } .lv-win .pic { width: 32px; height: 32px; display: grid; place-items: center; } .lv-win .pic .spr, .lv-card .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.lv-val, .lv-btc { display: inline-flex; align-items: center; gap: 0.2rem; font: 400 0.95rem var(--f-display); } .lv-val .ico { width: 0.85rem; height: 0.85rem; } .lv-btc { color: #f7931a; font-size: 0.85rem; }
.lv-chat { display: grid; gap: 0.35rem; max-height: calc(52 * var(--vh)); overflow-y: auto; }
.lv-post { display: grid; gap: 0.15rem; padding: 0.35rem 0.5rem; background: var(--card); } .lv-post > small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.lv-emoji { font-size: 1.8rem; line-height: 1; }
.lv-card { display: flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.3rem 0.5rem; background: var(--card-2); color: var(--text); text-align: left; box-shadow: inset 3px 0 0 var(--rc, var(--cyan)); white-space: nowrap; }
.lv-card .pic { width: 32px; height: 32px; display: grid; place-items: center; flex: none; } .lv-card b { font: 400 0.95rem var(--f-display); overflow: hidden; } .lv-card small { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem; } .lv-card .ico { width: 0.8rem; height: 0.8rem; }
.lv-send { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.lv-emojis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.3rem; } .lv-emojis button { min-height: 2.75rem; font-size: 1.3rem; padding: 0; }
.lv-shares { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; } .lv-shares button { min-height: 2.75rem; white-space: nowrap; font-size: 0.8rem; padding: 0 0.3rem; }
.lv-frame { display: block; width: 100%; height: min(calc(78 * var(--vh)), 40rem); border: 0; background: var(--bg); }
.sheet[data-page="live"] .head h3 { white-space: nowrap; font-size: clamp(1rem, calc(6.4 * var(--vw)), 1.5rem); min-width: 0; } /* the long title stays one line at 280 */
/* the affiliate username (owner #274): an @ field on the landing, the welcome card and the Profile sheet */
.hd-in input { flex: 1; min-width: 0; width: auto; height: 2.5rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); padding: 0 0.6rem; font: inherit; text-transform: lowercase; accent-color: initial; }
.hd-in span { font: 400 1.2rem var(--f-display); color: var(--amber); }
.hd-in { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; margin: 0.4rem 0; }
.pf-hd { justify-self: start; padding: 0; min-height: 1.5rem; font-size: 0.85rem; color: var(--cyan); }
.lv-who { color: var(--cyan); }
/* 280-320 px phones (owner #276): the 16-digit balances a step smaller so the player name stays whole */
@media (max-width: 320px) { .lv-row:has(> em) { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.1rem; } .lv-row:has(> em) > b { justify-self: end; } .lv-row > em + span { grid-row: 2; grid-column: 1 / -1; } }
/* the head balance (owner #277, StonksGift): $AIN + a "+" that opens Top up */
.sheet .head .hd-bal { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; padding: 0 0.25rem 0 0.5rem; border-radius: 0.6rem; background: var(--card-2); flex: none; }
.hd-bal .ico { width: 1rem; height: 1rem; } .hd-bal b { font: 400 1rem var(--f-display); color: var(--cyan); white-space: nowrap; }
.hd-plus { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.45rem; background: var(--amber); color: var(--ink); font: 700 1.2rem/1 var(--f-display); font-style: normal; }
/* top-up + withdraw (web/pay-ui.js) */
.pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.pay .pf-addr { min-height: 3rem; height: auto; padding: 0.35rem 0.6rem; } .pay .pf-addr code { white-space: normal; word-break: break-all; font-size: 0.85rem; } /* an address shows whole (it is not a word) */
.pay .cs-back { justify-self: start; }
.pay h4 { margin: 0.4rem 0 0; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.pay-in { display: inline-flex; align-items: center; gap: 0.25rem; font: 400 1.1rem var(--f-display); flex: 1; min-width: 7rem; }
.pay-in input { flex: 1; min-width: 0; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.4rem; }
.pay-grid.busy { opacity: 0.5; pointer-events: none; }
.pay-m { display: grid; gap: 0.05rem; padding: 0.35rem 0.4rem; min-height: 3.1rem; text-align: center; }
.pay-m small { font: 500 0.7rem var(--f-body); color: var(--muted); }
.pay-qr { justify-self: center; width: min(11rem, 60%); background: #fff; border-radius: 0.4rem; } .pay-qr svg { display: block; width: 100%; height: auto; }
.pay-st { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }
.pay-st i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber); animation: pay-dot 1.2s ease-in-out infinite; flex: none; }
.pay-st.ok { color: var(--green); } .pay-st.ok i { background: var(--green); animation: none; }
@keyframes pay-dot { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .pay-st i { animation: none; } }
.pay .pf-l a { color: var(--cyan); font-weight: 700; }
.wd-sent b { color: var(--green); } .wd-rejected b, .wd-failed b { color: var(--muted); }
.wal-tabs { margin: 0.6rem 0 0.4rem; }
/* official coin logos (owner #280, web/coin-logos.js): the coin, its network as a small badge */
.cl { position: relative; display: inline-block; width: 1.7rem; height: 1.7rem; flex: none; }
.cl > svg, .cl > img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cl-net { position: absolute; right: -0.25rem; bottom: -0.2rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--card); padding: 1px; }
.cl-net > svg, .cl-net > img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cl-x { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--line); font: 700 0.8rem var(--f-display); }
.pay-m { justify-items: center; } .pay-m .cl { margin-bottom: 0.15rem; }
.pay-way { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .pay-way .cl { width: 1.25rem; height: 1.25rem; } .pay-way .cl-net { width: 0.65rem; height: 0.65rem; }
.pay-coin { justify-content: flex-start; } .pay-coin .cl { width: 1.3rem; height: 1.3rem; }
/* top up in three steps (owner #281): step bar, rate card, the big $ field, copy rows, the live status pill */
.tp-steps { display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.tp-steps li { flex: 1; display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.25rem 0.4rem; border-radius: 0.5rem; background: var(--card-2); color: var(--muted); font: 700 0.75rem var(--f-body); }
.tp-steps i { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--line); font: 700 0.7rem var(--f-display); font-style: normal; flex: none; }
.tp-steps .on { color: var(--text); box-shadow: inset 0 0 0 2px var(--cyan); } .tp-steps .on i { background: var(--cyan); color: var(--ink); }
.tp-steps .done i { background: var(--green); color: var(--ink); }
.tp-lbl { color: var(--muted); font-size: 0.85rem; }
.tp-in { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem; min-height: 3.4rem; border-radius: 0.6rem; border: 2px solid var(--line); background: var(--card-2); }
.tp-in:focus-within { border-color: var(--cyan); }
.tp-in span { font: 400 1.5rem var(--f-display); color: var(--amber); }
.tp-in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 400 1.6rem var(--f-display); outline: none; padding: 0; }
.tp-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.5rem; margin: 0; }
.tp-sum span { color: var(--muted); font-size: 0.85rem; } .tp-sum b { margin-left: auto; font: 400 1.05rem var(--f-display); }
.tp-sum b.ain { color: var(--cyan); }
/* top-up swap card (owner #360): You pay (the $ field) over You get ($AIN + bonus), a round arrow between, like an exchange */
.tp-swap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; position: relative; }
.tp-side { display: grid; gap: 0.3rem; min-width: 0; padding: 0.55rem 0.7rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; }
.tp-side .tp-in { min-height: 2.8rem; padding: 0; border: 0; background: none; }
.tp-side:focus-within { border-color: var(--cyan); }
.tp-cur { flex: none; padding: 0.2rem 0.5rem; border-radius: 1rem; background: var(--line); font: 700 0.8rem var(--f-body); }
.tp-arw { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: var(--card); border: 3px solid var(--bg, #0b0d1a); color: var(--cyan); font: 700 1rem var(--f-body); font-style: normal; } /* no z-index: the sticky sheet head (z 1) stays on top */
.tp-recv { border-color: #2ed2ee55; background: linear-gradient(180deg, #2ed2ee14, var(--card-2)); }
.tp-recv .tp-lbl { display: flex; align-items: center; gap: 0.4rem; }
.tp-recv .tp-lbl em, .pay-amt em { font-style: normal; padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: var(--green); color: var(--ink); font: 700 0.6875rem var(--f-body); }
.tp-total { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; min-width: 0; white-space: nowrap; }
.tp-total b { min-width: 0; overflow: hidden; font: 400 1.6rem var(--f-display); color: var(--cyan); }
.tp-total span { display: inline-flex; align-items: center; gap: 0.25rem; flex: none; color: var(--muted); font: 700 0.85rem var(--f-body); } .tp-total .ico { width: 1rem; height: 1rem; }
.tp-brk { margin: 0; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; } .tp-brk em { font-style: normal; color: var(--green); font-weight: 700; }
.tabs.pay-amt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin: 0; }
.pay-amt button { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 2.6rem; }
.pay-amt em { padding: 0 0.25rem; font-size: 0.6875rem; }
.tp-next { margin: 0; min-height: 1.1rem; text-align: center; color: var(--green); font: 700 0.8rem var(--f-body); white-space: nowrap; overflow: hidden; }
.tp-tiers { border: 2px solid var(--line); border-radius: 0.6rem; background: var(--card-2); }
.tp-tiers summary { cursor: pointer; padding: 0.5rem 0.7rem; font: 700 0.82rem var(--f-body); color: var(--amber); white-space: nowrap; }
.tp-tiers div { display: grid; padding: 0 0.7rem 0.5rem; }
.tp-tiers p { display: flex; justify-content: space-between; margin: 0; padding: 0.3rem 0.35rem; border-bottom: 1px dashed var(--line); font-size: 0.82rem; white-space: nowrap; }
.tp-tiers p:last-child { border: 0; } .tp-tiers p b { color: var(--green); font-family: var(--f-display); font-weight: 400; }
.tp-tiers p.on { background: #5cc86022; border-radius: 0.3rem; color: var(--text); }
.tp-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .tp-head b { font: 400 1.05rem var(--f-display); }
.tp-st { margin-left: auto; padding: 0.2rem 0.55rem; border-radius: 1rem; background: #3d4f7a; color: #cfe0ff; font: 700 0.75rem var(--f-body); font-style: normal; }
.tp-st.ok { background: var(--green); color: var(--ink); }
.tp-copy { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.4rem 0.4rem 0.7rem; border-radius: 0.6rem; border: 2px solid var(--line); background: var(--card-2); }
.tp-copy > span { flex: 1; min-width: 0; display: grid; } .tp-copy small { color: var(--muted); font-size: 0.75rem; } .tp-copy small i { font-style: normal; }
.tp-copy code { font: 400 1rem var(--f-display); word-break: break-all; } .tp-copy.addr code { font-size: 0.85rem; }
.tp-copy button { flex: none; width: 2.75rem; min-height: 2.75rem; padding: 0; background: var(--green); color: var(--ink); border-color: var(--green); font-size: 1.1rem; }
.tp-acts > button { flex: 1; }
/* swap (owner #282): From box -> arrow -> To box, like any exchange */
.sw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.sw-box { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0.35rem; padding: 0.55rem 0.65rem; border-radius: 0.7rem; border: 2px solid var(--line); background: var(--card-2); }
.sw-box:focus-within { border-color: var(--cyan); }
.sw-top { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 0.5rem; margin: 0; color: var(--muted); font-size: 0.8rem; } .sw-top small { margin-left: auto; }
.sw-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.sw-row input, .sw-out { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 400 1.45rem var(--f-display); outline: none; padding: 0; word-break: break-all; }
.sw-out { color: var(--cyan); }
.sw-coin { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.3rem 0.55rem; border-radius: 1rem; background: var(--card); font: 700 0.85rem var(--f-display); }
.sw-coin .ico { width: 1.15rem; height: 1.15rem; }
.sw-arrow { justify-self: center; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: -0.85rem 0; z-index: 1; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--amber); font: 700 1.1rem var(--f-display); font-style: normal; }
.wd-addr input { font: 400 0.95rem var(--f-body); } .wd-addr button { flex: none; min-height: 2.2rem; padding: 0 0.6rem; font-size: 0.8rem; }
.sw-coin .cl { width: 1.15rem; height: 1.15rem; } .sw-coin .cl-net { width: 0.6rem; height: 0.6rem; }
/* the To pick (owner #287): $AIN (swap) or a payout way, opened from the To pill */
.sheet .sw-to { cursor: pointer; min-height: 2.2rem; border: 2px solid var(--line); }
.sw-caret { font-style: normal; color: var(--muted); font-size: 0.75rem; }
.sw-list { display: grid; gap: 0.3rem; }
.sw-opt { display: flex; align-items: center; gap: 0.5rem; text-align: left; min-height: 2.9rem; padding: 0.3rem 0.55rem; }
.sw-opt > span { display: grid; min-width: 0; } .sw-opt small { color: var(--muted); font: 500 0.72rem var(--f-body); }
.sw-opt .ico, .sw-opt .cl { width: 1.5rem; height: 1.5rem; flex: none; }
.sw-opt[aria-pressed="true"] { border-color: var(--cyan); }
.sw-opt small i { font-style: normal; }
/* the $AIN pick (owner #288): an INSTANT! badge, the bonus % in a bright pill */
.sw-opt b { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.sw-instant { padding: 0.05rem 0.4rem; border-radius: 0.35rem; background: var(--amber); color: var(--ink); font: 700 0.6875rem var(--f-display); font-style: normal; letter-spacing: 0.04em; }
.sw-bonus { display: inline-block; padding: 0 0.35rem; border-radius: 0.35rem; background: var(--green); color: var(--ink); font: 400 0.95rem var(--f-display); }
.sw-top .sw-bonus { font-size: 0.85rem; }
/* the header (owner #289, a wallet-app header): avatar + name + VIP + Rank on the left, one clean balance card on the right */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 3rem; }
.top .who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; text-align: left; }
.top .av { width: 2.6rem; height: 2.6rem; border-radius: 0.65rem; }
.who-t { display: grid; gap: 0.2rem; min-width: 0; }
.who-n { font: 400 1.05rem/1.1 var(--f-display); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-tags { display: flex; gap: 0.3rem; flex-wrap: nowrap; }
.who-tags em { font-style: normal; padding: 0.1rem 0.4rem; border-radius: 0.4rem; font: 400 0.72rem/1.2 var(--f-display); letter-spacing: 0.03em; white-space: nowrap; }
.who-vip { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
.who-vip.on { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.who-rank { background: var(--card-2); color: var(--cyan); border: 1px solid var(--line); }
.top .wallet { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.4rem; row-gap: 0.2rem; min-height: 3rem;
  padding: 0.35rem 0.6rem; background: var(--card-2); border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: none; transform: none; }
.top .wallet > span { display: contents; }
.top .wallet .ico { width: 1rem; height: 1rem; justify-self: center; }
.top .wallet b { justify-self: end; font: 400 0.9rem/1 var(--f-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.top .wallet .wl-btc b { color: var(--amber); } .top .wallet .wl-ain b { color: var(--cyan); }
@container (max-width: 360px) { .top .wallet { padding: 0.3rem 0.45rem; column-gap: 0.3rem; } .top .wallet b { font-size: 0.74rem; } .top .wallet .ico { width: 0.85rem; height: 0.85rem; }
  .top .av { width: 2.3rem; height: 2.3rem; } .who-n { font-size: 0.92rem; } .who-tags em { font-size: 0.6875rem; padding: 0.05rem 0.3rem; } }
@container (max-width: 320px) { .who-tags { flex-wrap: wrap; row-gap: 0.15rem; } .top .av { width: 2rem; height: 2rem; } .top .who { gap: 0.35rem; } .who-t { overflow: hidden; } }
/* a withdrawal's proof (owner #292): the payout id (tap = copy) and the Ainer Scan tx, one small row under it */
.wd-row { display: grid; gap: 0.15rem; padding: 0.3rem 0; border-top: 1px solid var(--line); }
.wd-proof { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.78rem; }
.wd-proof a { color: var(--cyan); font-weight: 700; }
.sheet .wd-id { min-height: 1.6rem; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted); font: 500 0.78rem var(--f-body); }
/* the sent popup (owner #293): small, centred, the proof + two links */
.wd-pop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: #000b; }
.wd-pop-box { width: min(100%, 21rem); display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: 1rem 0.9rem 0.8rem;
  background: var(--card); border: 2px solid var(--line); border-radius: 0.9rem; animation: wd-pop-in 0.25s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes wd-pop-in { from { transform: scale(0.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wd-pop-box { animation: none; } }
.wd-pop-ok { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--green); color: var(--ink); font: 400 1.6rem var(--f-display); font-style: normal; }
.wd-pop-t { font: 400 1.25rem var(--f-display); }
.wd-pop-amt { display: flex; align-items: center; gap: 0.4rem; margin: 0; font: 400 1rem var(--f-display); color: var(--cyan); }
.wd-pop .wd-pop-id { width: 100%; text-align: left; } .wd-pop-id i { font-style: normal; flex: none; width: 2.4rem; text-align: center; color: var(--green); }
.wd-pop-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.4rem; width: 100%; }
.wd-pop-links a { display: grid; place-items: center; min-height: 2.75rem; padding: 0 0.5rem; border-radius: 0.55rem; border: 2px solid var(--line); background: var(--card-2); color: var(--cyan); font: 700 0.85rem var(--f-display); text-decoration: none; }
.wd-pop-links a.act { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.wd-pop-done { width: 100%; }
.sw-pop-amt { flex-direction: column; gap: 0.15rem; color: var(--text); max-width: 100%; } .sw-pop-amt > i { font-style: normal; color: var(--amber); }
.sw-pop-amt span { max-width: 100%; overflow-wrap: break-word; } .sw-pop-amt .ain { display: flex; align-items: center; gap: 0.35rem; color: var(--green); font-size: 1.3rem; }
.lv-co { grid-template-columns: minmax(0, 1fr) auto; } .lv-co .lv-btc { white-space: nowrap; }
/* the feed chip (owner #297): rotating labels in one grid cell + a "›" that opens */
.feed-live { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 0.3rem; }
.fl-t { display: grid; } .fl-t > span { grid-area: 1 / 1; opacity: 0; transform: translateY(70%); transition: opacity 0.3s, transform 0.3s; color: var(--cyan); }
.fl-t > span.on { opacity: 1; transform: none; } .fl-t > span.fl-live { color: var(--green); }
.fl-go { font-style: normal; font: 700 0.95rem/1 var(--f-display); color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .fl-t > span { transition: none; transform: none; } }
/* the wallet (owner #298): a card titled WALLET on its rim (balances = open the wallet) + the gold pixel "+" = top up, the
   mobile-game currency bar; the Wallet sheet opens on three big actions like a wallet app: Top up · Cash out · Exchange */
.top .wbox { position: relative; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.3rem 0.3rem 0.2rem;
  background: var(--card-2); border: 2px solid var(--amber-d); border-radius: 0.6rem; }
.top .wl-tag { position: absolute; top: -0.5rem; left: 0.5rem; padding: 0 0.3rem; background: var(--bg); color: var(--amber);
  font: 400 0.6875rem/1 var(--f-display); letter-spacing: 0.08em; white-space: nowrap; pointer-events: none; }
.top .wbox .wallet { background: none; border: 0; min-height: 2.75rem; padding: 0.2rem 0.3rem; }
.top .wl-add { flex: none; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; font: 400 1.7rem/1 var(--f-display); }
@container (max-width: 360px) { .top .wl-add { width: 2.4rem; height: 2.75rem; } .top .wbox { gap: 0.25rem; } }
.wal-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.wal-tabs button { display: grid; justify-items: center; gap: 0.15rem; min-height: 3.6rem; padding: 0.35rem 0.2rem; }
.wal-tabs button i { font: 400 1.35rem/1 var(--f-display); font-style: normal; color: var(--amber); }
.wal-tabs button span { font-size: 0.8rem; white-space: nowrap; }
.wal-tabs button[aria-pressed="true"] { --edge: #5a2e06; --hi: #ffd27a; --lo: var(--amber-d); background: var(--amber); color: var(--ink); }
.wal-tabs button[aria-pressed="true"] i { color: var(--ink); }
/* #298: the wallet card is wider, so the VIP / Rank tags stack instead of being cut; the smallest phone keeps the avatar only */
.who-tags { flex-wrap: wrap; row-gap: 0.15rem; }
/* the profile box (owner #301): the wallet card's twin (same rim, height, radius), a gold pencil on its rim = edit the profile;
   the wallet logos sit right after their numbers (#300), the vault's "number ₿" order, one column beside the "+" */
.top { align-items: stretch; flex: none; } /* never squeezed under its cards (they overlapped the Gift row) */
.top .who { position: relative; padding: 0.3rem 0.4rem 0.3rem 0.35rem; background: var(--card-2); border: 2px solid var(--amber-d); border-radius: 0.6rem; }
.top .who-ed { position: absolute; top: -0.55rem; right: 0.4rem; width: 1.15rem; height: 1.15rem; display: grid; place-items: center;
  background: var(--amber); color: var(--ink); font: 700 0.75rem/1 var(--f-body); font-style: normal;
  box-shadow: 0 -2px 0 #5a2e06, 0 2px 0 #5a2e06, -2px 0 0 #5a2e06, 2px 0 0 #5a2e06; pointer-events: none; }
.top .wbox .wallet { grid-template-columns: auto auto; }
.top .wallet .ico { justify-self: start; }
/* the VIP badge (owner #302): the tier's colour, a pixel edge in its own dark tone, a light row on top; the mark and the
   shine grow with the tier (vf1 light sweep, vf2 + glow, vf3 + a living mark); VIP 12 = the rainbow plate */
.vipb { --vc: #c8d3e0; --vd: color-mix(in srgb, var(--vc) 40%, #000); position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.1rem 0.4rem; font: 400 0.72rem/1.2 var(--f-display); font-style: normal; letter-spacing: 0.03em; white-space: nowrap; color: var(--ink); background: var(--vc);
  box-shadow: 0 -2px 0 var(--vd), 0 2px 0 var(--vd), -2px 0 0 var(--vd), 2px 0 0 var(--vd), inset 0 2px 0 color-mix(in srgb, var(--vc) 55%, #fff); }
.vipb i { font-style: normal; font-size: 1.1em; line-height: 1; }
.vipb.vt0 { color: var(--muted); background: var(--card); --vd: var(--line); box-shadow: 0 -2px 0 var(--vd), 0 2px 0 var(--vd), -2px 0 0 var(--vd), 2px 0 0 var(--vd); }
.vipb.vt12 { background: linear-gradient(90deg, #ff4d8d, #ffc23d, #7dffb0, #5ce1ff, #c084ff); --vd: #3a1450; }
.vipb.vf1::after, .vipb.vf2::after, .vipb.vf3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffffa0 50%, transparent 65%);
  transform: translateX(-120%); animation: vip-sweep 3.4s ease-in-out infinite; pointer-events: none; }
.vipb.vf2, .vipb.vf3 { box-shadow: 0 -2px 0 var(--vd), 0 2px 0 var(--vd), -2px 0 0 var(--vd), 2px 0 0 var(--vd), inset 0 2px 0 color-mix(in srgb, var(--vc) 55%, #fff), 0 0 0.7rem color-mix(in srgb, var(--vc) 60%, transparent); }
.vipb.vf3 i { animation: vip-mark 1.6s ease-in-out infinite; }
@keyframes vip-sweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes vip-mark { 50% { transform: scale(1.25) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .vipb::after, .vipb i { animation: none !important; } }
.who-tags em.vipb { border-radius: 0; padding: 0.1rem 0.4rem; }
.vipb.md { font-size: 1.05rem; padding: 0.3rem 0.6rem; }
.vipb.big { font-size: 2rem; padding: 0.45rem 1.1rem; gap: 0.4rem; --px: 4px;
  box-shadow: 0 -4px 0 var(--vd), 0 4px 0 var(--vd), -4px 0 0 var(--vd), 4px 0 0 var(--vd), inset 0 4px 0 color-mix(in srgb, var(--vc) 55%, #fff), 0 0 1.4rem color-mix(in srgb, var(--vc) 45%, transparent); }
.vipb.big.vt0 { box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line); }
.vip-hero { display: grid; place-items: center; padding: 1rem 0 0.4rem; }
.pf-ladder p .vipb { justify-self: start; }
/* Profile → Wallet (owner #302): a wallet app — the assets in one card (tap = its action), the action row, the address */
#pftop { margin-bottom: 0.5rem; }
.wl-card { display: grid; gap: 2px; padding: 2px; background: var(--line); }
.wl-asset { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 3.4rem; padding: 0.45rem 0.6rem; text-align: left; color: var(--text);
  background: var(--card-2); box-shadow: none !important; border-radius: 0 !important; }
.wl-asset .ico { flex: none; width: 1.9rem; height: 1.9rem; }
.wl-asset .wl-bonus { filter: grayscale(0.4) brightness(0.9); }
.wl-asset > span { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 0.5rem; }
.wl-asset > span > b { font: 400 0.95rem var(--f-display); white-space: nowrap; }
.wl-asset > span > b + b { justify-self: end; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .wl-asset b.btc { color: #f7931a; } .wl-asset b.ain { color: var(--cyan); } .wl-asset b.usd { color: var(--green); }
.wl-asset small { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; }
.wl-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0.7rem 0 0.2rem; }
.wl-acts button { display: grid; justify-items: center; gap: 0.15rem; min-height: 3.6rem; padding: 0.35rem 0.1rem; --edge: #5a2e06; --hi: #ffd27a; --lo: var(--amber-d);
  background: var(--amber); color: var(--ink); }
.wl-acts i { font: 400 1.35rem/1 var(--f-display); font-style: normal; }
.wl-acts span { font: 700 0.72rem var(--f-body); white-space: nowrap; }
@media (max-width: 320px) { .wl-acts { gap: 0.4rem; } .wl-acts span { font-size: 0.6875rem; } .wl-asset > span > b + b { font-size: 0.9rem; } }
/* the badge text reads on every tier colour: white with the ink outline of the game's numbers */
.vipb:not(.vt0) { color: #fff; text-shadow: 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 1px 1px 0 var(--ink); }
.vipb.big:not(.vt0) { text-shadow: 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 2px 2px 0 var(--ink); }
/* the profile look (owner #302): the picture at its own size (--avs), the badge plate (from → to, a rim in its colour;
   the rainbow plate gets a rainbow rim), the picker tiles (rarity rim, ✓ on the worn one) */
.av[style*="--avs"] { display: block; width: var(--avs); height: var(--avs); }
.plate { background: linear-gradient(135deg, var(--pa), var(--pb)) !important; box-shadow: 0 -3px 0 var(--pe), 0 3px 0 var(--pe), -3px 0 0 var(--pe), 3px 0 0 var(--pe) !important; }
.plate-rb { box-shadow: 0 -3px 0 #ff4d8d, 0 3px 0 #5ce1ff, -3px 0 0 #ffc23d, 3px 0 0 #c084ff !important; }
.plate-sw { display: block; width: 100%; height: 60%; background: linear-gradient(135deg, var(--pa), var(--pb)); box-shadow: 0 -2px 0 var(--pe), 0 2px 0 var(--pe), -2px 0 0 var(--pe), 2px 0 0 var(--pe); }
.plate-sw.plate-rb { box-shadow: 0 -2px 0 #ff4d8d, 0 2px 0 #5ce1ff, -2px 0 0 #ffc23d, 2px 0 0 #c084ff; }
.pf-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.pf-av { position: relative; padding: 0; background: none !important; box-shadow: none !important; min-height: 0; }
.pf-av .who-ed { position: absolute; right: -0.35rem; bottom: -0.35rem; top: auto; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; background: var(--amber); color: var(--ink);
  font: 700 0.75rem/1 var(--f-body); font-style: normal; box-shadow: 0 -2px 0 #5a2e06, 0 2px 0 #5a2e06, -2px 0 0 #5a2e06, 2px 0 0 #5a2e06; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.45rem; }
.lk-tile { display: grid; justify-items: center; gap: 0.15rem; min-height: 5.6rem; padding: 0.4rem 0.2rem; background: var(--card-2); color: var(--text);
  --edge: var(--rc); --hi: color-mix(in srgb, var(--rc) 35%, var(--card-2)); --lo: var(--card); }
.lk-tile .pic { width: 40px; height: 40px; display: grid; place-items: center; } .lk-tile .pic .spr { position: relative; left: 0 !important; top: 0 !important; }
.lk-tile b { font: 400 0.8rem var(--f-display); white-space: nowrap; }
.lk-tile small { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.6875rem; color: var(--muted); white-space: nowrap; } .lk-tile small .ico { width: 0.7rem; height: 0.7rem; }
.lk-tile.on { background: color-mix(in srgb, var(--rc) 22%, var(--card-2)); } .lk-tile.on small { color: var(--green); font-weight: 700; }
.lv-by { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.2rem; padding: 0.2rem 0.4rem; white-space: nowrap; min-width: 0; }
.lv-by b { font: 400 0.85rem var(--f-display); overflow: hidden; min-width: 0; } .lv-by small { margin-left: auto; color: var(--muted); font-size: 0.6875rem; }
.lv-by .av { border-width: 1px; border-radius: 0.3rem; }
/* a folded section (page protocol): one pixel row, open = its content under it */
.pf-more { margin-top: 0.6rem; } .pf-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0 0.7rem; cursor: pointer; list-style: none;
  font: 400 1rem var(--f-display); color: #b8a8ff; background: var(--card); box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.pf-more summary::-webkit-details-marker { display: none; } .pf-more summary::after { content: "▾"; color: var(--muted); } .pf-more[open] summary::after { content: "▴"; }
.pf-more > :not(summary) { margin-top: 0.4rem; }
/* Profile → History (owner #302): filter chips, day headers, a row = icon · what + time · amount (under it when narrow) */
.hx-f { flex-wrap: nowrap; } .hx-f button { flex: 1; min-height: 2.5rem; }
.hx { display: grid; gap: 2px; }
.hx-day { margin: 0.6rem 0 0.2rem; font: 400 0.85rem var(--f-display); color: #b8a8ff; letter-spacing: 0.03em; }
.hx-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.55rem; row-gap: 0.1rem; min-height: 3rem; padding: 0.35rem 0.55rem; background: var(--card); }
.hx-ic { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; font-style: normal; font-size: 1rem; background: var(--card-2);
  box-shadow: inset 0 -2px 0 var(--line); }
.hx-ic.k-in { background: color-mix(in srgb, var(--green) 18%, var(--card-2)); } .hx-ic.k-btc { background: color-mix(in srgb, #f7931a 20%, var(--card-2)); }
.hx-ic.k-item { background: color-mix(in srgb, #b36bff 22%, var(--card-2)); } .hx-ic.k-swap { background: color-mix(in srgb, var(--cyan) 18%, var(--card-2)); }
.hx-row > span { display: grid; min-width: 0; } .hx-row > span b { font: 400 0.92rem var(--f-display); white-space: nowrap; } .hx-row small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.hx-amt { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem; font: 400 0.85rem var(--f-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-amt.in { color: var(--green); } .hx-amt.out { color: var(--text); } .hx-amt .ico { width: 0.8rem; height: 0.8rem; } .hx-amt em { font-style: normal; font: 700 0.6875rem var(--f-body); color: var(--amber); }
.hx-row[data-tx] { cursor: pointer; -webkit-tap-highlight-color: transparent; } .hx-row[data-tx]:active { background: var(--card-2); }
.hx-row[data-tx]:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.hx-more { width: 100%; min-height: 2.75rem; margin-top: 0.5rem; }
.pf .pf-scan { display: block; float: none; margin: 0.6rem 0 0; text-align: center; font: 700 0.8rem var(--f-body); color: var(--cyan); text-decoration: none; }
.sheet.page .hx-f { flex-wrap: nowrap; } .sheet.page .hx-f button { flex: 1 1 0; min-width: 0; padding: 0 0.3rem; }
/* Profile → Stats + Invite (owner #302): five tabs in one row, stat tiles (the number big, its label under it), the invite card */
.sheet.page .pf-tabs { flex-wrap: nowrap; } .sheet.page .pf-tabs button { flex: 1 1 0; min-width: 0; padding: 0 0.2rem; font-size: 0.78rem; }
@media (max-width: 320px) { .sheet.page .pf-tabs button { font-size: 0.6875rem; } }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.st-tile { display: grid; gap: 0.1rem; margin: 0; padding: 0.5rem 0.35rem; text-align: center; background: var(--card); min-width: 0;
  box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.st-tile b { font: 400 1.05rem var(--f-display); white-space: nowrap; overflow: hidden; } .st-tile b.btc { color: #f7931a; } .st-tile b.in { color: var(--green); }
.st-tile:has(b.wide) { grid-column: 1 / -1; } .st-tile b.wide { font-size: 1rem; }
.st-tile span { color: var(--muted); font-size: 0.6875rem; white-space: nowrap; }
.iv-card { display: grid; gap: 0.5rem; padding: 0.7rem; background: linear-gradient(135deg, #3a2466, #1a1e2b); box-shadow: 0 -3px 0 var(--amber-d), 0 3px 0 var(--amber-d), -3px 0 0 var(--amber-d), 3px 0 0 var(--amber-d); margin-bottom: 0.6rem; }
.iv-t { margin: 0; font: 400 1.05rem var(--f-display); color: var(--amber); white-space: nowrap; }
.iv-card .pf-addr code { font-size: 0.8rem; }
.iv-row { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.3rem 0.5rem; background: var(--card); margin-bottom: 2px; }
.iv-row > span { display: grid; min-width: 0; flex: 1; } .iv-row b { font: 400 0.9rem var(--f-display); white-space: nowrap; } .iv-row small { color: var(--muted); font-size: 0.6875rem; }
.iv-row em { font-style: normal; font-size: 0.7rem; color: var(--muted); white-space: nowrap; } .iv-row em.on { color: var(--green); font-weight: 700; }
.iv-note { margin: 0.15rem 0; font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.st-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pst, .iv-card, .iv-card > * { min-width: 0; }
.iv-card .pf-addr { height: auto; min-height: 2.75rem; padding: 0.35rem 0.6rem; } .iv-card .pf-addr code { white-space: normal; word-break: break-all; } /* a link shows whole (it is not a word) */
/* a small phone: the VIP badge goes under the name, so the name keeps the whole row (never cut) */
@media (max-width: 360px) { .pf-card { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.3rem; } .pf-card > .vipb { grid-column: 2; justify-self: start; }
  .pf-card .pf-av { grid-row: span 2; } .pf-who b { font-size: 1.15rem; } }
.pf-snd { min-width: 4.5rem; min-height: 2.75rem; margin-left: auto; font: 400 1rem var(--f-display); }
.pf-snd[aria-pressed="true"] { color: var(--green); } .pf-snd[aria-pressed="false"] { color: var(--muted); } /* the music switch (#313) */
/* the room speaker (owner #318): a tap = swap it; off = still + dim, none = a faint +; its ON / OFF switch sits under it */
.px-spk { position: absolute; cursor: pointer; display: grid; place-items: center; }
.px-spk.off .px-spr { animation-play-state: paused; filter: grayscale(0.6) brightness(0.7); }
.px-spk.empty b { color: var(--muted); opacity: 0.5; font-size: calc(10 * var(--u)); }
.px-onoff { position: absolute; display: grid; place-items: center; padding: 0; min-height: 0; font: 400 calc(10 * var(--u)) var(--f-display); color: var(--muted); }
.px-onoff.on { color: var(--green); }
/* the Room Value plate on the floor (#511): an opaque base button, grows with the language, centred under the desk */
.px-rv { position: absolute; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; gap: 0.3em; white-space: nowrap; padding: 0 calc(6 * var(--u)); min-height: 0; font: 700 max(0.6875rem, calc(9 * var(--u))) var(--f-body); }
.px-rv i { font-style: normal; color: var(--muted); } .px-rv b { color: var(--amber); }
/* the username popup (owner #320): centred on the screen, the input, its two short links in one box (a line each),
   the free note, Save full width */
.sheet.hd-sheet { align-items: center; padding: 1rem; }
.sheet.hd-sheet .box { border-radius: 1rem; width: min(100%, 24rem); }
.hd-sheet .head h3 { color: var(--amber); }
.hd-links { display: grid; gap: 0.25rem; padding: 0.45rem 0.55rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; }
.hd-link { display: flex; align-items: center; gap: 0.35rem; min-width: 0; white-space: nowrap; }
.hd-link code { overflow: hidden; white-space: nowrap; font-size: min(0.78rem, calc(3 * var(--vw))); color: var(--muted); } .hd-link b { font-weight: 700; color: var(--cyan); }
.hd-note { text-align: center; margin: 0.5rem 0 0; }
.hd-go { display: block; width: 100%; margin: 0.4rem 0 0.2rem; }
/* #321: a coin in place of the pixel-font "&" in the two headline lines */
.tgl-sub, .tgl .hi { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.tgl .amp { display: inline-grid; place-items: center; flex: none; } .tgl .amp .spr { animation: none; } /* still, the full face: a spinning coin reads as a bar */
/* the starter pack (owner #322): a centred card, three box rows (done / next / locked), one line each */
.sheet.stp-sheet { align-items: center; padding: 1rem; }
.sheet.stp-sheet .box { border-radius: 1rem; width: min(100%, 24rem); }
.stp-sheet .head h3 { color: var(--amber); white-space: nowrap; overflow: hidden; }
.stp { display: grid; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.stp-row { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem;
  background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; white-space: nowrap; min-width: 0; }
.stp-row .pic { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.stp-t { display: grid; min-width: 0; line-height: 1.15; }
.stp-t b { font: 400 1.15rem var(--f-display); color: var(--amber); }
.stp-t span { color: var(--muted); font-size: 0.8rem; }
.stp-row em { font-style: normal; color: var(--green); }
.stp-row.is-next { border-color: var(--amber); } .stp-row.is-next .stp-t span { color: var(--text); }
.stp-row.is-lock { opacity: 0.6; }
.stp-note { text-align: center; white-space: nowrap; margin: 0 0 0.4rem; }
.stp-go { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.stp-go button, .stp-open { min-height: 2.75rem; width: 100%; white-space: nowrap; padding: 0 0.25rem; }
button.stp-f { --edge: #063a4c; --hi: #8ff0ff; --lo: #0a6f8f; background: var(--cyan); color: var(--ink); }
button.stp-later { display: block; margin: 0.6rem auto 0; min-height: 2.75rem; padding: 0 1.2rem; background: var(--card-2); color: var(--muted); }
.stp-hi { display: grid; margin: 0 0 0.5rem; white-space: nowrap; min-width: 0; line-height: 1.2; }
.stp-hi b { color: var(--cyan); font: 400 1.25rem var(--f-display); overflow: hidden; min-width: 0; }
.stp-hi span { color: var(--muted); font-size: 0.8rem; }
.stp-row i { font-style: normal; }
/* the Live Payouts proof on the Sent card (owner #332, #346): cyan, beside Ainer Scan */
.wd-pop .wd-pop-links a.wd-pop-tg { display: grid; place-items: center; min-height: 2.75rem; background: var(--cyan); color: var(--ink); text-decoration: none; border-radius: 0;
  font: 700 0.9rem var(--f-display); white-space: nowrap; box-shadow: 0 -3px 0 #063a4c, 0 3px 0 #063a4c, -3px 0 0 #063a4c, 3px 0 0 #063a4c, inset 0 3px 0 #8ff0ff, inset 0 -3px 0 #0a6f8f; }
/* Referral v2 (#344): what an invite pays, the % big and gold, one line each */
.iv-pay { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.15rem 0; white-space: nowrap; }
.iv-pay b { font: 400 1.4rem var(--f-display); color: var(--amber); } .iv-pay span { color: var(--text); font-size: 0.8rem; }
/* "Delivered to" (owner #346): a green success card with the receiver on one line */
.wd-pop-to { width: 100%; display: grid; gap: 0.15rem; padding: 0.45rem 0.6rem; text-align: left; background: color-mix(in srgb, var(--green) 14%, var(--card-2));
  border: 2px solid var(--green); border-radius: 0.6rem; }
.wd-pop-to small { color: var(--green); font: 700 0.75rem var(--f-display); } .wd-pop-to code { display: block; white-space: nowrap; overflow: hidden; color: var(--text); font-size: 0.85rem; }
/* USDT $AINER (#350): the USDT coin with the Ainer coin as its badge */
.cl-net.cl-ain { background: url(art/icon-ain.png?v=eYBzV1mfNp) 0 0 / 400% auto no-repeat; image-rendering: pixelated; }
.wbal-earn .ico { position: relative; overflow: visible; } .wbal-earn .ico::before { content: ""; position: absolute; right: -0.25rem; bottom: -0.2rem; width: 55%; height: 55%;
  background: url(art/icon-ain.png?v=eYBzV1mfNp) 0 0 / 400% auto no-repeat; image-rendering: pixelated; }
/* Profile Stats v2 (owner #356): a HUD — hero + panels, pixel edges from the brand tokens, every number one line */
.sx { display: grid; gap: 0.6rem; }
.sx-hero, .sx-panel { position: relative; padding: 0.65rem 0.7rem; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 2px solid var(--line); border-radius: 0.6rem; min-width: 0; }
.sx-hero { border-color: #f7931a; box-shadow: inset 0 0 0 1px #0b0d1a, 0 0 0 1px #0b0d1a; text-align: center; display: grid; gap: 0.35rem; justify-items: center; }
.sx-hero::before, .sx-panel::before { content: ""; position: absolute; left: 0.6rem; top: -2px; width: 2.2rem; height: 3px; background: var(--cyan); }
.sx-hero::before { background: #f7931a; }
.sx-hero small, .sx-panel h5 { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); font: 700 0.7rem var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.sx-panel h5 { color: var(--cyan); margin-bottom: 0.45rem; } .sx-panel h5::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sx-btc { font: 400 1.7rem var(--f-display); color: #f7931a; white-space: nowrap; letter-spacing: 0.02em; text-shadow: 0 0 12px #f7931a55; max-width: 100%; overflow: hidden; }
.sx-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; width: 100%; }
.sx-chips span { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.3rem 0.4rem; background: #0b0d1a80; border: 1px solid var(--line); border-radius: 0.5rem; white-space: nowrap; min-width: 0; }
.sx-chips i { font-style: normal; color: var(--muted); font-size: 0.6875rem; } .sx-chips b { font: 400 1rem var(--f-display); color: var(--text); }
.sx-chips span { flex-wrap: wrap; row-gap: 0; } /* label over value when both don't fit one line (280 px, long languages) */
.sx-chips i, .sx-chips b { min-width: 0; overflow: hidden; } /* shrinkable, so fitText sees the overflow and scales the text down */
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.sx-cell { display: grid; gap: 0.05rem; margin: 0; padding: 0.45rem 0.25rem; text-align: center; background: #0b0d1a66; border: 1px solid var(--line); border-radius: 0.45rem; min-width: 0; }
.sx-cell b { font: 400 1.15rem var(--f-display); white-space: nowrap; overflow: hidden; } .sx-cell span { color: var(--muted); font-size: 0.6875rem; white-space: nowrap; overflow: hidden; }
.sx-line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.35rem 0.1rem; border-bottom: 1px dashed var(--line); white-space: nowrap; min-width: 0; }
.sx-line:last-child { border-bottom: 0; } .sx-line span { color: var(--muted); font-size: 0.78rem; flex: none; } .sx-line b { min-width: 0; } .sx-line b { font: 400 1.05rem var(--f-display); overflow: hidden; }
.sx b.btc { color: #f7931a; } .sx b.in { color: var(--green); }
.sx-go { margin-top: 0.55rem; min-height: 2.75rem; }
/* Profile HUD, pixel pass (owner #357): every panel / hero / cell gets the stepped pixel edge of the buttons (#176) */
.sx { gap: 0.9rem; padding: 3px; }
.sx-hero, .sx-panel { --edge: var(--line); border: 0; border-radius: 0; box-shadow: 0 -3px 0 var(--edge), 0 3px 0 var(--edge), -3px 0 0 var(--edge), 3px 0 0 var(--edge), inset 0 3px 0 #ffffff12, inset 0 -3px 0 #0b0d1a66; }
.sx-hero { --edge: #f7931a; } .sx-hero::before, .sx-panel::before { top: -3px; height: 3px; }
.sx-cell, .sx-chips span { border: 0; border-radius: 0; box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line), inset 0 2px 0 #ffffff0d; }
.sx-grid { gap: 0.5rem; padding: 2px; } .sx-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-chips { gap: 0.55rem; padding: 2px; }
.sx b.ain { color: var(--cyan); } .sx b.usd { color: var(--green); }
.sx-panel h5 span { font-family: var(--f-display); letter-spacing: 0.1em; } .sx-panel h5::after { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.sx-hero.sx-wal, .sx-hero.iv-card { text-align: left; justify-items: stretch; }
.sx-hero, .wl-card { grid-template-columns: minmax(0, 1fr); } /* the track never grows past the box on 280 px (the wallet rows' min-content) */
.sx-hero.iv-card { --edge: var(--amber); } .sx-hero.sx-vip { --edge: var(--cyan); }
.sx-quota { width: 100%; } .sx-quota .sx-line { border: 0; padding-bottom: 0.2rem; }
details.sx-panel > summary { cursor: pointer; color: var(--cyan); font: 700 0.8rem var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sx-hero .wl-asset small, .sx-hero .iv-card small { text-transform: none; letter-spacing: 0; font-weight: 500; } /* only the hero title is caps */
/* Profile links (owner #366): the VIP badge opens the VIP tab, "Top up" + the fee note open the wallet Top up */
.pf-vipgo { display: inline-flex; flex: none; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .pf-vipgo:active { transform: translateY(1px); }
.sx-go { color: var(--cyan); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.sx-up { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.35rem; padding: 0.3rem 0.5rem; text-align: center; text-decoration: none; font: 700 0.8rem var(--f-body);
  color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--card-2)); border: 1.5px dashed color-mix(in srgb, var(--amber) 55%, transparent); }
/* the outside links of Scan + the item / room pages (owner #367, web/links.js): icon-only, every one leaves the app; a Telegram
   door carries the Telegram badge; a narrow screen gives them their own full row */
.xl-row { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
.xl { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--card); text-decoration: none;
  box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); -webkit-tap-highlight-color: transparent; }
.xl > .ico { width: 1.2rem; height: 1.2rem; } .xl > i { font-style: normal; font-size: 1.05rem; line-height: 1; } .xl:active { transform: translateY(1px); } .xl:focus-visible { outline: 2px solid var(--cyan); }
.xl-tg { position: absolute; right: -0.2rem; bottom: -0.2rem; width: 0.85rem; height: 0.85rem; }
.xl-scan { background: color-mix(in srgb, var(--cyan) 18%, var(--card)); }
.pb-bar, .sc-top { flex-wrap: wrap; row-gap: 0.4rem; }
@media (max-width: 400px) { .pb-bar .xl-row, .sc-top .xl-row { flex: 1 0 100%; flex-wrap: nowrap; } .pb-bar .xl, .sc-top .xl { flex: 1 1 0; width: auto; min-width: 0; } }
.xl-foot { text-align: center; margin: 1rem 0 1.25rem; } .xl-foot a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.8rem; color: var(--muted);
  text-decoration: none; font-size: 0.8rem; letter-spacing: 0.04em; } .xl-foot b { font: 400 1rem var(--f-display); color: var(--cyan); } .xl-foot .ico { width: 1.1rem; height: 1.1rem; }

/* owner #370, #372: one design for every screen. fit.js zooms this frame, so px, rem and every picture scale together; the room's wall fills the window beside it */
html.fit { --vw: calc(var(--fw) / 100); --vh: calc(var(--fh) / 100);
  background: linear-gradient(#0003, #0003), repeating-linear-gradient(90deg, var(--wall-a, #2e3b70) 0 calc(31 * var(--u, 1.5px)), var(--wall-b, #1f2850) 0 calc(32 * var(--u, 1.5px))); }
html.fit body { width: var(--fw); height: var(--fh); margin: 0 auto; position: relative; overflow: hidden; contain: layout paint; }
html.fit .app { max-width: none; scrollbar-width: none; }
/* the room takes what the screen has left, so the whole room shows on a phone too; the 11 px floor holds for labels drawn in room units */
.core { flex: 1 1 0; min-height: 15rem; aspect-ratio: auto; }
.px-slot .px-sl { font-size: max(0.6875rem, calc(8 * var(--u))); } .px-onoff { font-size: max(0.6875rem, calc(10 * var(--u))); } .px-slot.locked i { font-size: max(0.6875rem, calc(6 * var(--u))); }
/* owner #382: the game under the splash and the landing is covered, yet its 9,000 px ticker and sprites kept the phone's GPU busy and left black squares */
body:has(> .tgl, > .splash) .app, body:has(> .tgl, > .splash) .tabbar { visibility: hidden; }
body:not(.shown) .tgl * { animation-play-state: paused; } /* the landing's lab starts moving when it shows, not while its pictures decode */
/* the landing never scrolls sideways (owner #386): the footer takes the column's width, its one-line rows cannot widen it */
.tgl { scrollbar-width: none; overflow-x: hidden; }
.tgl-foot { align-self: stretch; width: auto; grid-template-columns: minmax(0, 1fr); }
.tgl-foot .tgl-ban { width: 100%; box-sizing: border-box; }
.tgl-stage *, .tgl .ico, .tgl .spr { animation: none !important; } /* owner #387: test whether the moving lab causes the black squares on a phone */
.sp-coin { animation: none; } /* owner #388: as a page element it showed a black box; it moves on the splash's canvas (splash-coin.js, #422) */
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tgl-stage .px-wall { background: #2e3b70; } .tgl-stage .px-floor { background: #4e2e1a; } /* the canvas's fallback: flat, a repeating gradient may be what paints black */
.tgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* owner #421: the room on one canvas; the stage's wall + floor stay behind it */
/* owner #391: the picture and the label of a cell never touch; the rank word gives way first on a narrow card */
.px-slot .px-sl { bottom: calc(0.5 * var(--u)); }
.px-slot.locked b { font-size: max(0.6875rem, calc(10 * var(--u))); line-height: 1; }
@container (max-width: 400px) { .who-rank .rk-w { display: none; } }
.vault .vrow b { font-size: min(6.6cqw, 4.8cqh, 1.6rem); }
.top .who-n { padding-right: 0.8rem; }
.tgl h1 { row-gap: 0.25rem; }
.tgl-badge .nb, .lb-stats small { font-size: 0.6875rem; letter-spacing: 0.02em; }
.lb-row b { text-overflow: ellipsis; white-space: nowrap; }
.sheet.page .lv-tabs button { font-size: 0.6875rem; }
.core .rside { top: 3rem; transform: none; } /* under the top strip, whatever the room's height */
.core .px-room.is-wide .px-wall, .core .px-room.is-wide .px-floor { left: calc(-200 * var(--u)); right: calc(-200 * var(--u)); } /* the floor runs wall to wall, no rug in the middle */
.tgl .hi .nb, .tgl-ban small, .lb-row small { font-size: 0.6875rem; }
.lb-row b { max-width: 6.2rem; }
.lv-shares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .lv-shares button { min-width: 0; padding: 0 0.3rem; font-size: 0.75rem; white-space: nowrap; }
@container (max-width: 320px) { .top .who-ed { top: -0.7rem; right: 0.15rem; } }
.sheet.page .pf-tabs button { padding: 0; letter-spacing: 0; font-size: 0.6875rem; white-space: nowrap; min-width: 0; }
.sheet .tabs.hx-f { flex-wrap: nowrap; } .sheet .tabs.hx-f button { flex: 1 1 auto; min-width: 0; padding: 0 0.2rem; letter-spacing: 0; font-size: 0.6875rem; white-space: nowrap; }
/* owner #393: every empty spot in the room shows a +, wall + floor have their own button */
.px-spot { position: absolute; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 0.1rem; cursor: pointer; border: 2px dashed #ffffff55; background: #0b0d1a55; pointer-events: auto; }
.px-spot b { font: 400 1rem/1 var(--f-display); color: var(--amber); }
.px-spot i { font: 700 0.6875rem/1 var(--f-body); font-style: normal; color: var(--text); white-space: nowrap; letter-spacing: 0; }
.px-spot:active { filter: brightness(1.3); }
/* owner #394: in every room, the wall button on the wall, the floor button on the floor, clear of the cells, the cooling and the speaker switch */
.core .rskin { position: absolute; z-index: 3; left: 0.3rem; height: 1.35rem; min-height: 0; padding: 0 0.35rem; background: #0b0d1acc; color: var(--text); font: 700 0.6875rem/1 var(--f-body); letter-spacing: 0; white-space: nowrap; }
.core .rskin b { color: var(--amber); font: inherit; }
.core .rs-w { bottom: calc(126 * var(--u, 1px)); }
.core .rs-f { bottom: calc(3 * var(--u, 1px)); } /* #552: left on the floor, under + Wall, clear of the speaker spot */
.core.other .px-spot, .core.other .rskin { visibility: hidden; }
/* owner #395: the vault = two rows, a HUD readout: Mining · the number · TOK/s, then the status on a segmented bar + Claim; cyan corner ticks */
button.vault { display: grid; gap: 0.3rem; padding: 0.35rem 0.5rem 0.4rem; justify-items: stretch;
  background: var(--hud-ticks), var(--card); background-repeat: no-repeat; }
.vault .vtop { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.3rem; }
.vault .vrow { justify-content: center; gap: 0.25rem; }
.vault .vsym { font-size: 0; }
.vault .vbot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; }
.vault .vbar { position: relative; display: grid; place-items: center; width: 100%; height: 1.9rem; border-radius: 0; overflow: hidden; background: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.vault .vbar #vfill { position: absolute; inset: 0 auto 0 0; height: auto; background: repeating-linear-gradient(90deg, #f0a01e88 0 0.4rem, transparent 0 0.5rem); }
.vault .vlabel { position: relative; font: 700 0.75rem/1 var(--f-body); color: var(--text); white-space: nowrap; letter-spacing: 0; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink); }
.vault .vlabel.warn { color: #ffd27a; }
.vault .claim-pill { margin: 0; display: grid; place-items: center; height: 1.9rem; padding: 0 0.9rem; border-radius: 0; font-size: 1rem; white-space: nowrap; box-shadow: 0 -2px 0 #5a2e06, 0 2px 0 #5a2e06, -2px 0 0 #5a2e06, 2px 0 0 #5a2e06, inset 0 2px 0 #ffd27a, inset 0 -2px 0 var(--amber-d); margin-inline: 2px; }
.vault .vrow b { font-size: min(5.6cqw, 1.6rem); }
.vault .vsym::before { width: 0.95rem; height: 0.95rem; }
@container (max-width: 335px) { .vault .vst .edge { display: none; } }
[data-wd][disabled] { opacity: 0.55; cursor: default; } .wd-cd { font-variant-numeric: tabular-nums; }
:root { --hud-tick: linear-gradient(var(--cyan), var(--cyan)); --hud-ticks: var(--hud-tick) 0 0 / 0.6rem 2px, var(--hud-tick) 0 0 / 2px 0.6rem, var(--hud-tick) 100% 0 / 0.6rem 2px, var(--hud-tick) 100% 0 / 2px 0.6rem, var(--hud-tick) 0 100% / 0.6rem 2px, var(--hud-tick) 0 100% / 2px 0.6rem, var(--hud-tick) 100% 100% / 0.6rem 2px, var(--hud-tick) 100% 100% / 2px 0.6rem; }
.hud { background: var(--hud-ticks), var(--card); background-repeat: no-repeat; }
.core .px-room.is-wide .px-wall, .pscene .px-room.is-wide .px-wall { top: calc(-200 * var(--u)); height: calc(312 * var(--u)); } /* one wall from top to floor, no seam where the cells end */
/* the market page (owner #398): rows are pictures that never move and sit outside layout until seen, so a long list costs nothing */
.mk-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0.2rem 0 0.5rem !important; }
.sheet.page .mk-tabs button { min-width: 0; padding: 0 0.1rem; font-size: 0.75rem; letter-spacing: 0; }
.mk-search { width: 100%; min-height: 2.5rem; padding: 0 0.6rem; background: var(--card-2); color: var(--text); font: inherit; border: 0; border-radius: 0; box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.mk-types { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0.35rem; padding: 2px; }
.mk-types button { flex: 1 0 auto; min-height: 2rem; padding: 0 0.55rem; font-size: 0.75rem; white-space: nowrap; letter-spacing: 0; }
.mk-types button[aria-pressed="true"] { color: var(--ink); background: var(--cyan); }
.mk-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin-bottom: 0.45rem; }
.mk-filters select { min-width: 0; min-height: 2.25rem; padding: 0 0.3rem; color: var(--text); background: var(--card); border: 2px solid var(--line); border-radius: 0; font: 700 0.75rem var(--f-body); }
.mk-list { display: grid; gap: 0.35rem; }
.mk-row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem; background: var(--card-2); box-shadow: inset 3px 0 0 var(--rc, var(--line)); content-visibility: auto; contain-intrinsic-size: auto 3.4rem; min-height: 3.4rem; cursor: pointer; }
.mk-pic { position: relative; width: 2.75rem; height: 2.75rem; overflow: hidden; }
.mk-pic .spr { animation: none !important; }
.mk-txt { display: grid; gap: 0.1rem; min-width: 0; }
.mk-txt b { font: 400 0.95rem/1.1 var(--f-display); color: var(--rc, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-txt small { font: 500 0.6875rem/1.1 var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-end { display: grid; justify-items: end; gap: 0.15rem; }
.mk-end b { font: 400 0.95rem/1 var(--f-display); color: var(--cyan); white-space: nowrap; }
.mk-end button { min-height: 1.9rem; padding: 0 0.6rem; font-size: 0.75rem; white-space: nowrap; }
.mk-note { color: var(--muted); text-align: center; font-size: 0.8rem; padding: 1rem 0; margin: 0; }
.mk-till { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; margin-bottom: 0.45rem; }
.mk-till small { display: block; font: 700 0.6875rem var(--f-body); color: var(--muted); white-space: nowrap; }
.mk-till b { font: 400 1.15rem var(--f-display); color: var(--cyan); white-space: nowrap; }
.mk-till button { min-height: 2.5rem; padding: 0 0.7rem; font-size: 0.8rem; white-space: nowrap; }
.mk-h { margin: 0.7rem 0 0.3rem; font: 400 0.95rem var(--f-display); color: var(--muted); }
.mk-chart { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 2px; height: 3rem; margin: 0.3rem 0; }
.mk-chart i { display: block; min-height: 2px; background: var(--cyan); }
.mk-line { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.25rem 0; font-size: 0.8rem; white-space: nowrap; }
.mk-line span { color: var(--muted); } .mk-line b { font: 400 1rem var(--f-display); }
.mk-price { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem; margin: 0.4rem 0; }
.mk-price input { min-width: 0; min-height: 2.75rem; text-align: center; color: var(--text); background: var(--card-2); border: 2px solid var(--line); border-radius: 0; font: 400 1.2rem var(--f-display); }
.mk-price button { min-width: 2.75rem; padding: 0; }
.ico-swap { background-image: url(art/icon-swap.png?v=5BI6H9LeFG); }
.sheet.page .mk-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.off-note { margin: 0 0 0.45rem; font: 700 0.75rem var(--f-body); color: var(--cyan); text-align: center; white-space: nowrap; letter-spacing: 0; }
.sheet[data-page="store"] .tabs button { flex: 1 0 20%; min-width: 0; padding: 0; font-size: 0.6875rem; letter-spacing: 0; }
.off-usd { color: var(--green) !important; font: 400 1.05rem var(--f-display) !important; }
.off-pay { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.5rem; min-height: 2.75rem; white-space: nowrap; }
.off-pay .ico { width: 1.1rem; height: 1.1rem; }
/* the Official Store (owner #402, docs/PROTOCOL-AINER-STORE.md): flash strip, chips, a grid whose price is the button; still art, off-screen cards cost nothing */
.st-flash { padding: 0.45rem 0.5rem 0.5rem; margin-bottom: 0.45rem; }
.st-flash h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.35rem; font: 400 1.1rem/1 var(--f-display); color: var(--amber); white-space: nowrap; }
.st-flash h4 b { font: 400 1rem/1 var(--f-display); color: var(--ink); background: var(--amber); padding: 0.15rem 0.35rem; font-variant-numeric: tabular-nums; }
.st-flgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.st-fl, .st-card { display: grid; gap: 0.15rem; justify-items: stretch; min-width: 0; padding: 0.3rem; height: auto; color: inherit; background: var(--card-2); text-align: center; white-space: nowrap; }
button.st-fl, button.st-card { --edge: var(--line); --hi: #ffffff14; --lo: #0003; font: inherit; letter-spacing: 0; }
.st-art { position: relative; display: grid; place-items: center; height: 4.2rem; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%); overflow: hidden; }
.st-art .pic { width: 56px; height: 56px; display: grid; place-items: center; } .st-art .pic .spr { position: relative; left: 0 !important; top: 0 !important; animation: none !important; }
.st-off, .st-new { position: absolute; top: 0; padding: 0.05rem 0.25rem; font: 700 0.6875rem/1.2 var(--f-body); font-style: normal; }
.st-off { left: 0; color: #fff; background: #d63a3a; } .st-new { right: 0; color: var(--ink); background: var(--cyan); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.st-card { content-visibility: auto; contain-intrinsic-size: auto 11rem; }
.st-name { font: 400 1rem/1.1 var(--f-display); overflow: hidden; text-overflow: ellipsis; }
.st-sub, .st-sold, .st-left { font: 500 0.6875rem/1.15 var(--f-body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.st-sold { color: var(--green); } .st-left { color: var(--amber); }
.st-stock { display: block; height: 0.3rem; background: var(--ink); } .st-stock u { display: block; height: 100%; background: var(--amber); }
.st-buy { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; min-height: 2.1rem; align-items: center; padding: 0 0.15rem; font: 400 1.1rem/1 var(--f-display); color: var(--ink); background: var(--amber); box-shadow: inset 0 2px 0 #ffd27a, inset 0 -2px 0 var(--amber-d); }
.st-buy s, .off-usd s { font: 500 0.75rem var(--f-body); opacity: 0.7; } .off-usd s { color: var(--muted); }
/* owner #404: the store's futuristic pieces: neon HUD panels, a pixel edge, still art */
.st-firstb { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; margin-bottom: 0.45rem; color: var(--ink); background: linear-gradient(90deg, var(--amber), #ffd27a); font: 400 1rem/1 var(--f-display); white-space: nowrap; box-shadow: 0 -2px 0 #5a2e06, 0 2px 0 #5a2e06, -2px 0 0 #5a2e06, 2px 0 0 #5a2e06; }
.st-heroes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.45rem; }
button.st-hero { --nc: var(--cyan); display: grid; align-content: start; justify-items: start; gap: 0.2rem; min-width: 0; height: auto; min-height: 6.4rem; padding: 0.45rem 0.5rem; text-align: left; white-space: nowrap; letter-spacing: 0; color: var(--text); font: inherit; background: var(--hud-ticks), radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--nc) 40%, transparent), transparent 65%), var(--card-2); background-repeat: no-repeat; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nc) 55%, transparent); }
button.st-hero.pass { --nc: #a970ff; }
.st-hero em { font: 700 0.6875rem/1 var(--f-body); font-style: normal; color: var(--nc); } .st-hero > b { font: 400 1.15rem/1 var(--f-display); } .st-hero small { font: 700 0.75rem/1.1 var(--f-body); color: var(--amber); }
.st-bar { display: block; width: 100%; height: 0.35rem; background: var(--ink); } .st-bar u { display: block; height: 100%; background: linear-gradient(90deg, #a970ff, var(--cyan)); }
.st-rws { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; min-width: 0; }
.rw { display: inline-flex; align-items: center; gap: 0.2rem; min-width: 0; } .rw b { font: 700 0.6875rem/1.1 var(--f-body); white-space: nowrap; letter-spacing: 0; } .rw .ico { width: 0.9rem; height: 0.9rem; }
.rw-pic { position: relative; display: inline-block; flex: none; width: 26px; height: 26px; overflow: hidden; } .rw-pic .spr { animation: none !important; position: absolute; }
.st-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.45rem; }
button.st-pack { position: relative; display: grid; align-content: space-between; gap: 0.3rem; min-width: 0; height: auto; padding: 0.45rem; text-align: left; letter-spacing: 0; color: var(--text); font: inherit; background: linear-gradient(160deg, #24305a, var(--card-2) 60%); content-visibility: auto; contain-intrinsic-size: auto 10rem; }
button.st-pack.best { box-shadow: 0 0 0 2px var(--amber), 0 0 0.8rem #f0a01e66; }
.st-tag { position: absolute; top: 0; right: 0; padding: 0.05rem 0.3rem; font: 700 0.6875rem/1.3 var(--f-body); font-style: normal; color: var(--ink); background: var(--amber); }
.st-pname { font: 400 1.1rem/1.1 var(--f-display); white-space: nowrap; } .st-worth { font: 700 0.6875rem/1.1 var(--f-body); color: var(--green); white-space: nowrap; letter-spacing: 0; }
button.st-pack[disabled] { opacity: 0.55; }
/* the full-screen payment popup + the pass screen */
.sheet.st-pay { align-items: stretch; padding: 0; } .sheet.st-pay .box { width: 100%; max-width: 30rem; max-height: none; height: 100%; margin: 0 auto; border-radius: 0; overflow-y: auto; }
.pp { display: grid; gap: 0.5rem; padding-bottom: 1rem; } .pp [hidden] { display: none; }
.pp-hero { display: grid; justify-items: center; gap: 0.35rem; padding: 0.7rem 0.6rem; text-align: center; }
.pp-hero .st-art { width: 100%; height: 6rem; } .pp-hero .st-rws { justify-content: center; }
.pp-sub { margin: 0; font: 700 0.75rem/1.2 var(--f-body); color: var(--muted); }
.pp-price { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; white-space: nowrap; } .pp-price b { font: 400 2.2rem/1 var(--f-display); color: var(--green); } .pp-price s { font-size: 0.95rem; color: var(--muted); } .pp-price em { font: 700 0.8rem var(--f-body); font-style: normal; color: #fff; background: #d63a3a; padding: 0.05rem 0.3rem; }
.pp-first { margin: 0; padding: 0.3rem 0.5rem; font: 700 0.8rem/1.2 var(--f-body); text-align: center; color: var(--ink); background: linear-gradient(90deg, var(--amber), #ffd27a); white-space: nowrap; }
button.pp-way { display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 3.1rem; height: auto; padding: 0.3rem 0.6rem; text-align: left; letter-spacing: 0; color: var(--text); font: inherit; background: var(--card); margin-bottom: 0.15rem; }
.pp-way .ico { flex: none; width: 1.6rem; height: 1.6rem; } .pp-way span { display: grid; min-width: 0; } .pp-way b { font: 400 1.05rem/1.1 var(--f-display); white-space: nowrap; } .pp-way small { font: 500 0.6875rem/1.2 var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-trust { margin: 0.2rem 0 0; text-align: center; font: 700 0.6875rem var(--f-body); color: var(--cyan); white-space: nowrap; }
.pp-ok { display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 0.5rem; text-align: center; } .pp-ok > i { display: grid; place-items: center; width: 4rem; height: 4rem; font: 400 2.4rem var(--f-display); font-style: normal; color: var(--ink); background: var(--green); } .pp-ok > b { font: 400 1.6rem var(--f-display); }
.pass-top { justify-items: stretch; text-align: left; } .pass-top em { font: 700 0.75rem var(--f-body); font-style: normal; color: #a970ff; } .ps-lv { font: 400 1.4rem/1 var(--f-display); } .pass-top small { font: 500 0.6875rem/1.25 var(--f-body); color: var(--muted); } .ps-src { display: grid; }
.ps-buy { min-height: 3rem; }
.ps-head, .ps-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.3rem; align-items: stretch; }
.ps-head b { font: 400 0.95rem var(--f-display); text-align: center; } .ps-head .prem { color: #a970ff; }
.ps-rows { display: grid; gap: 0.3rem; }
.ps-row { content-visibility: auto; contain-intrinsic-size: auto 4.2rem; }
.ps-n { display: grid; place-items: center; font: 400 1rem var(--f-display); color: var(--muted); background: var(--card-2); } .ps-n.on { color: var(--ink); background: var(--cyan); }
.ps-cell { position: relative; display: grid; align-content: space-between; gap: 0.25rem; min-width: 0; min-height: 3.9rem; padding: 0.25rem; background: var(--card-2); overflow: hidden; } .ps-cell.prem { background: linear-gradient(160deg, #2c1f55, var(--card-2)); } .ps-cell.done { opacity: 0.55; }
.ps-cell .rw b { white-space: normal; } .ps-cell button { min-height: 1.8rem; padding: 0; font-size: 0.75rem; } .ps-ok { justify-self: end; font-style: normal; color: var(--green); }
/* owner #405: how fast each coin confirms */
.pay-eta { font: 700 0.6875rem/1.3 var(--f-body); font-style: normal; padding: 0 0.3rem; white-space: nowrap; letter-spacing: 0; color: var(--ink); background: var(--green); }
.pay-eta.mid { background: var(--cyan); } .pay-eta.slow { color: var(--text); background: #8a4a0c; }
.pp-way .pay-eta { margin-left: auto; flex: none; }
button.st-pack.best { padding-top: 1.15rem; }
.st-hero > b { font-size: min(1.15rem, calc(4.6 * var(--vw))); } .st-hero .rw-pic { display: none; }
.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.35rem; white-space: nowrap; } .pay-head h4 { margin: 0.4rem 0 0; }
.pay-minnote { margin: 0; font: 700 0.6875rem/1.2 var(--f-body); color: var(--cyan); letter-spacing: 0; }
.tp-net { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0; padding: 0.35rem 0.5rem; background: var(--card-2); box-shadow: inset 0 0 0 2px var(--amber); white-space: nowrap; } .tp-net b { font: 400 1.1rem/1 var(--f-display); color: var(--amber); }
/* owner #418: limited editions */
button.st-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 0.5rem; width: 100%; height: auto; min-height: 2.75rem; margin-bottom: 0.45rem; padding: 0.35rem 0.5rem; color: var(--text); background: var(--card); font: inherit; letter-spacing: 0; text-align: left; --edge: var(--line); --hi: #ffffff14; --lo: #0003; }
.st-perks span { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.st-perks b { font: 700 0.6875rem/1.25 var(--f-body); color: var(--cyan); } .st-perks small { font: 500 0.625rem/1.2 var(--f-body); color: var(--muted); }
.st-units { font: 700 0.6875rem/1.2 var(--f-body); color: var(--amber); white-space: nowrap; } .st-roy { font: 700 0.6875rem/1.2 var(--f-body); color: var(--green); white-space: nowrap; }
.st-ed.gone { opacity: 0.72; filter: grayscale(0.6); }
/* owner #423, docs/PROTOCOL-AINER-MOTION.md: no sprite repaints the page any more. Rooms + the splash draw on a canvas; a sprite elsewhere shows its first frame */
.spr, .px-spr, .ico { animation: none !important; }
.px-canvas-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.px-canvas .px-spr, .px-canvas .spr { visibility: hidden; }
.px-canvas .px-wall, .px-canvas .px-floor, .px-canvas .px-room.is-wide { background: none; } .px-canvas .px-wall::after, .px-canvas .px-glow { display: none; }
.sp-on > :not(.sp-canvas) { visibility: hidden; animation: none; } .sp-on .sp-bar span, .sp-on .sp-pct { animation: none; }
.px-canvas .px-slot:not(.empty):not(.locked) { background: none; backdrop-filter: none; } /* its sprite is on the canvas below: a filled cell would dim it */
/* owner #425: typing in a sheet = the keyboard resizes the page. Nothing behind it to repaint, nothing to blend, no extra layers: a phone left the sheet in black patches */
body:has(.sheet input:focus, .sheet textarea:focus) .app, body:has(.sheet input:focus, .sheet textarea:focus) .tabbar { visibility: hidden; }
.sheet:has(input:focus, textarea:focus) { background: var(--bg); }
.sheet:has(input:focus, textarea:focus) .head { position: static; }
.sheet.hd-sheet .box { overflow: visible; max-height: none; }
/* owner #426: a focused input is its own layer: square + opaque, no outline ring reaching past it, or a phone paints a black block around it */
.sheet input:not([type=checkbox]):not([type=radio]), .tgl input:not([type=checkbox]) { border-radius: 0; background-color: var(--card-2); outline: 0; }
.sheet input:not([type=checkbox]):not([type=radio]):focus { outline: 0; border-color: var(--cyan); }
.hd-sheet .hd-links { margin-bottom: 0.45rem; }
/* owner #428, #429: a popup that fits is no scroller; the game stays visible behind it (typing still hides it) */
body:has(> .sheet.page) .app { visibility: hidden; } /* a full page covers the game: it costs the phone nothing while covered */
.sheet:not(.page) .box.fits { overflow: visible; max-height: none; } .sheet:not(.page) .box.fits .head { position: static; }
.sheet:not(.page) .box:not(.fits) { border-radius: 0; }
/* owner #429: what the GPU has to hold, measured with ops/dev/ainer-layers.mjs: no strip, no extra layers */
.feed-in { display: block; width: auto; animation: none !important; overflow: hidden; } .feed-in > .fd { display: none; white-space: nowrap; } .feed-in > .fd.on { display: block; }
.fl-t > span { transition: none; transform: none; }
.px-canvas .px-wall, .px-canvas .px-floor { left: 0 !important; right: 0 !important; }
.co-ray { animation: none; } .co-pic { filter: none; }
.case-pic[style*="--rc"], .vipb.vf3 i, .vault.full .claim-pill, .prize .pic::before, .icard .ic-art .pic::before, .case-pic::before, .case-pic::after { animation: none !important; }
.co-strip { will-change: auto; } .co-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* owner #429: the reel spins on a canvas */
body:has(> .caseopen:not(.show)) .app, body:has(> .caseopen:not(.show)) .tabbar { visibility: hidden; } /* a reel is the only thing on screen while it spins */
/* owner #431: the game room is plain page sprites again: the way it ran on the owner's phone before #423. Frames play only inside a room */
.core .px-spr, .core .spr, .pscene .px-spr, .pscene .spr { animation: px-run calc(0.4s * var(--sp, 1)) steps(4) infinite !important; }
.core .spr, .pscene .spr { animation-name: spr !important; }
.px-room.is-paused .px-spr { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .core .px-spr, .core .spr, .pscene .px-spr, .pscene .spr { animation: none !important; } }
/* the engine (owner #455, docs/AINER-ENGINE.md, phone test r1): the world canvas draws the room and everything in it (sprites,
   glow, holo panels, LEDs, coins, pops) and dims it under a popup; the page copies stay as the source of place and size, hidden.
   What stays above the world is opaque, pixel for pixel: a translucent page pixel there became a hole to Telegram's background */
.has-world .px-spr, .has-world .spr, .has-world .px-holo, .has-world .px-glow, .has-world .px-led, .has-world .px-pop { visibility: hidden; }
.core .has-world .px-spr:not(.px-coin), .core .has-world .spr, .has-world .px-spr:not(.px-coin), .has-world .spr { animation: none !important; }
.has-world .px-coin { animation-name: none, px-rise !important; animation-duration: 0.4s, 4.4s !important; animation-timing-function: linear, ease-out !important; animation-iteration-count: infinite !important; } /* the rise is the world's clock */
.has-world .px-wall, .has-world .px-floor, .has-world .px-room.is-wide, .core.has-world, .core:has(.has-world) { background: none; }
.has-world .px-slot, .has-world .px-slot.empty, .has-world .px-slot.locked { background: none; backdrop-filter: none; }
.has-world .px-slot.empty { border-color: #6b7192; } .has-world .px-slot.locked { border-color: #5d6380; } .has-world .px-slot.locked b { opacity: 1; }
.has-world .px-hit:active { background: none; outline: 2px solid var(--amber); }
.has-world .spot { border-color: #4a5170; }
.has-world .px-tag, .core .share, .core .rnav { background: #0b0d1a; }
.core .rnav button:disabled { opacity: 1; color: #4a5068; }
.zoom button { background: #11131c; }
body.has-world-on .tabbar { background: #0b0d16; }
.feed-run { position: relative; } .feed-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .feed-gl .feed-in { visibility: hidden; }
.feed:has(.feed-gl) { -webkit-mask: none; mask: none; }
.sheet:not(.page) { background: transparent; } /* a translucent backdrop over the moving room shows black (#440, #458b) */
.sheet:not(.page):has(input:focus, textarea:focus) { background: var(--bg); }
/* r3 on his phone (#461): Home still showed black patches: these were still translucent above the world (found by a scan of
   every element over the canvases): the ticker's mask + rounded clip, the room's rounded clip, cell shadows, side buttons,
   the wall / floor chips and the energy row. All opaque or square now */
#feed .feed-run.feed-gl, .feed-gl { -webkit-mask: none; mask: none; }
.feed:has(.feed-gl), .labscene.has-world { border-radius: 0; }
.has-world .px-slot { box-shadow: none; }
.core .rskin, .core .rside button { background: #0b0d1a; }
.core .energy { background: #0b0d1a; border-color: #2a3050; }
/* #471: the landing's one action stands out by size + a solid light frame, never by motion or glow beside the canvas (#423) */
.tgl-foot { background: var(--bg); }
.tgl #tg-go { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3.6rem; margin: 0.35rem 0 0.2rem; --hi: #fff0b8; background: #ffb31a; outline: 3px solid #fff0b8; outline-offset: 2px; font: 400 min(1.7rem, calc(6.4 * var(--vw))) var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
/* #472: order from docs/tasks/ainer-mining/landing-research.md: promise under the picture, proof next to the action, one action; no carousel on the first screen */
.tgl .lboard { margin-block: auto; } /* a tall phone shares the spare room above and below the board */
/* #473: the first username is a full opaque screen: Start mining leads here, the landing is gone, Save is the one action */
body:has(> .hd-full) .tgl { visibility: hidden; }
.sheet.hd-sheet.hd-full { background: var(--bg); overflow-y: auto; }
.sheet.hd-sheet.hd-full .box { background: none; border: 0; width: min(100%, 24rem); }
.hd-full .head { position: static; justify-content: center; background: none; }
.hd-full .head h3 { margin: 0; font: 400 min(2rem, calc(8 * var(--vw))) var(--f-display); text-align: center; white-space: nowrap; }
.hd-full .head [data-close] { position: fixed; top: 0.6rem; right: 0.6rem; }
.hd-pic { display: grid; place-items: center; margin-bottom: 0.6rem; } .hd-pic .spr { position: relative; left: 0 !important; top: 0 !important; animation: none; }
.hd-full .hd-in input { height: 3.25rem; font-size: 1.2rem; }
.hd-full .hd-go { display: flex; align-items: center; justify-content: center; min-height: 3.6rem; margin-top: 0.7rem; font: 400 min(1.7rem, calc(6.4 * var(--vw))) var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; --hi: #fff0b8; background: #ffb31a; outline: 3px solid #fff0b8; outline-offset: 2px; }
@media (max-height: 480px) { .hd-pic { display: none; } } /* the keyboard is open */
.hd-full .box > * { min-width: 0; } .hd-full .hd-links { grid-template-columns: minmax(0, 1fr); } .hd-full .box { display: grid; grid-template-columns: minmax(0, 1fr); } /* 280: a long link shrinks instead of widening the screen */
/* #475: the pool banner is the offer: two lines, gold on red in a solid light frame, JOIN NOW in the action's gold; a tap = Start (#305) */
.tgl-foot .tgl-ban { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45rem; row-gap: 0.25rem; align-items: center; padding: 0.4rem 0.5rem; outline: 2px solid #ffc94a; outline-offset: 1px; }
.tgl-ban .tb-gift { grid-row: span 2; }
.tb-top, .tb-bot { display: flex; align-items: center; gap: 0.3rem; min-width: 0; white-space: nowrap; }
.tb-top { font: 400 min(0.95rem, calc(3.6 * var(--vw))) var(--f-display); color: var(--text); }
.tgl-ban .tb-top b { font: 400 min(1.25rem, calc(4.8 * var(--vw))) var(--f-display); color: #ffc94a; }
.tgl-ban .tb-top small { font-size: min(0.6875rem, calc(2.7 * var(--vw))); color: #ffd8b8; }
.tb-bot { justify-content: space-between; font: 700 min(0.8rem, calc(3.1 * var(--vw))) var(--f-body); color: #fff; }
.tgl-ban .tb-bot em { flex: none; margin: 0; padding: 0.15rem 0.45rem; font: 400 min(0.95rem, calc(3.7 * var(--vw))) var(--f-display); color: var(--ink); background: #ffb31a; }
@media (max-width: 300px) { .tgl .lb-row em { display: none; } } /* 280: the tab says the kind, the amount keeps every digit */
/* #476: the board fits to the pixel: every track can shrink, the name gives way first, an amount or a time never does */
.tgl > :not(.tgl-stage, .tgl-foot) { min-width: 0; max-width: 100%; box-sizing: border-box; } /* #477: the stage and the foot go out through the side padding on purpose */
.tgl .lboard { grid-template-columns: minmax(0, 1fr); width: 100%; }
.tgl .lb-stats > span { overflow: hidden; }
.tgl .lb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; } .tgl .lb-tabs button { width: 100%; padding: 0 0.15rem; font-size: min(0.8rem, calc(3.1 * var(--vw))); } .tgl .lb-tabs .pxi { display: none; }
.tgl .lb-row { grid-template-columns: auto minmax(0, 1fr) auto auto; animation: none; }
.tgl .lb-row span { overflow: visible; }
/* #476: the headline is a banner: two rows, a tap = Start; the second row is drawn by web/landing-motion.js */
.tgl-hero { display: grid; gap: 0.3rem; width: 100%; margin: 0.25rem 0 0.15rem; padding: 0.4rem 0.5rem; background: #14203d; outline: 2px solid var(--cyan); outline-offset: -2px; cursor: pointer; }
.tgl-hero:active { transform: translateY(2px); }
.th-top { display: flex; align-items: center; justify-content: center; gap: 0.3rem; white-space: nowrap; font: 400 min(1rem, calc(3.9 * var(--vw))) var(--f-display); color: var(--cyan); }
.th-top b { font: 400 min(1.7rem, calc(6.6 * var(--vw))) var(--f-display); letter-spacing: 0.04em; color: var(--amber); }
.th-top .ico { width: min(1.3rem, calc(5.2 * var(--vw))); height: min(1.3rem, calc(5.2 * var(--vw))); }
.tgl-flow { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; font: 400 min(1.1rem, calc(4.3 * var(--vw))) var(--f-display); color: var(--text); }
.tf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .tf-on > span { visibility: hidden; }
.glint { position: absolute; left: 0; right: 0; width: 100%; display: block; pointer-events: none; }
.tgl-foot .tgl-ban { position: relative; } .tgl-ban .glint { bottom: 0; height: 3px; } #tg-go .glint { top: 0; height: 4px; }
@media (max-width: 300px) { .tgl-ban .tb-top small, .tgl .lb-stats .pxi, .tgl .lb-stats .ico { display: none; } } /* 280: words and amounts whole */
/* #477: every box on the landing has the same left and right edge: the pixel frame of the two actions lies inside the box, none outside */
.tgl-foot .tgl-ban { box-shadow: inset 0 3px 0 #ff9aa0, inset 0 -3px 0 #3e0e1a; outline-offset: -2px; }
.tgl #tg-go { box-shadow: inset 0 3px 0 var(--hi), inset 0 -3px 0 var(--lo); outline-offset: -3px; margin-inline: 0; }
.tgl-ban .glint { left: 2px; right: 2px; width: calc(100% - 4px); bottom: 2px; } #tg-go .glint { left: 3px; right: 3px; width: calc(100% - 6px); top: 3px; }
.th-mid { display: block; text-align: center; white-space: nowrap; font: 700 min(0.85rem, calc(3.4 * var(--vw))) var(--f-body); color: var(--text); }
/* #478: the first username screen sells the start: what is free, the chain's name, the Divine robot on its own canvas */
.hd-free { margin: 0.1rem 0 0.4rem; text-align: center; white-space: nowrap; font: 400 min(1.25rem, calc(4.9 * var(--vw))) var(--f-display); color: var(--green); }
.hd-brand { display: flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; font: 400 min(1.05rem, calc(4.2 * var(--vw))) var(--f-display); color: var(--cyan); } .hd-brand b { font-weight: 400; } .hd-brand .spr { animation: none; }
.hd-robot { display: block; width: min(12rem, calc(100 * var(--vh) - 30rem)); height: auto; aspect-ratio: 1; image-rendering: pixelated; }
/* #479: the reels leave at once when the prize card shows, never fade: a translucent reel over its canvas shows black */
.caseopen.show .co-reel, .caseopen.show .co-reels { opacity: 1; transition: none; visibility: hidden; }
.vault .vlabel.got { color: var(--green); }
/* #481: a popup too tall for the screen takes the whole screen: no strip of the moving game above it, which showed black on his phone */
.sheet:not(.page):has(> .box:not(.fits)) { background: var(--card); }
.sheet:not(.page) > .box:not(.fits) { height: 100%; max-height: none; border: 0; padding-top: calc(var(--tg-safe-top, 0px) + var(--tg-content-top, 0px)); }
body:has(> .sheet:not(.page) > .box:not(.fits)) .app, body:has(> .sheet:not(.page) > .box:not(.fits)) .tabbar { visibility: hidden; }
.sw-row input { font-size: min(1.45rem, calc(5.6 * var(--vw))); }
/* #483, #484: Rewards: a hub of banners, each opens a full screen with Back; every panel opaque, nothing shrinks in the page's flex box (rows overlapped) */
.ms-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 0.4rem; padding: 0.1rem 0 1rem; }
.ms-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; } .ms-sum > div { padding: 0.45rem 0.6rem; background: var(--card-2); border: 2px solid var(--line); } .ms-sum small { display: block; color: var(--muted); font-size: 0.72rem; white-space: nowrap; } .ms-sum b { font: 400 1.35rem/1.1 var(--f-display); color: var(--amber); }
.ms-ban { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.55rem; width: 100%; min-height: 3.75rem; padding: 0.35rem 0.6rem; text-align: left; background: var(--card-2); }
.ms-ban b { display: block; font: 400 min(1.1rem, calc(4.4 * var(--vw))) var(--f-display); white-space: nowrap; } .ms-ban small { display: block; color: var(--muted); font: 700 min(0.72rem, calc(2.9 * var(--vw))) var(--f-body); white-space: nowrap; overflow: hidden; }
.ms-bar { display: block; height: 4px; margin-top: 0.25rem; background: var(--bg); } .ms-bar i { display: block; height: 100%; background: var(--cyan); }
.ms-right { display: flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 1.1rem; }
.ms-n { font: 700 0.75rem/1.4 var(--f-body); font-style: normal; min-width: 1.2rem; padding: 0 0.25rem; background: var(--amber); color: var(--ink); text-align: center; }
.ms-back { justify-self: start; min-height: 2.75rem; padding: 0 0.7rem; white-space: nowrap; }
.ms-note { margin: 0; color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.ms-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; } .ms-secs button { min-width: 0; min-height: 2.75rem; padding: 0; white-space: nowrap; } .ms-secs button[aria-pressed="true"] { color: var(--cyan); }
.ms-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; min-height: 3.2rem; padding: 0.3rem 0.45rem; background: var(--card-2); border: 2px solid var(--line); }
.ms-row.is-done { background: var(--card); }
.ms-ic { display: grid; place-items: center; } .ms-ic .spr, .ms-ban .spr { animation: none; }
.ms-txt { display: grid; gap: 0.05rem; min-width: 0; } .ms-txt b { font: 700 min(0.85rem, calc(3.4 * var(--vw))) var(--f-body); white-space: nowrap; overflow: hidden; }
.ms-txt small { display: flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: var(--cyan); white-space: nowrap; } .ms-txt .ico { width: 0.8rem; height: 0.8rem; } .ms-have { color: var(--amber) !important; }
.ms-go { min-height: 2.25rem; min-width: 4.2rem; padding: 0 0.4rem; font-size: 0.8rem; white-space: nowrap; } .ms-ok { min-width: 4.2rem; text-align: center; color: var(--green); font-size: 1.1rem; }
.ms-tut p { margin: 0 0 0.5rem; font-size: 0.9rem; } .ms-proof input { width: 100%; box-sizing: border-box; height: 2.75rem; padding: 0 0.6rem; margin: 0.4rem 0; background: var(--card-2); color: var(--text); border: 2px solid var(--line); font: inherit; }
.sheet[data-page="missions"] .box { display: flex; flex-direction: column; }
.ms-body { scrollbar-width: none; } .ms-body::-webkit-scrollbar { display: none; } .ms-ban { min-height: 3.25rem; padding: 0.2rem 0.6rem; }
/* #485: Rewards sits under the game's header: only the header stays visible of the hidden game */
body:has(> .sheet[data-page="missions"]) .app .top { visibility: visible; }
.sheet.page[data-page="missions"] { bottom: 0; height: auto; }
.sheet.page[data-page="missions"] .box { padding-top: 0.2rem; height: calc(100% - 4.9rem - env(safe-area-inset-bottom)); }
/* #488: Lucky Wheel on one opaque canvas; the contest board */
.ms-tk { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; min-height: 3.2rem; padding: 0.3rem 0.6rem; text-align: left; white-space: nowrap; }
.ms-tk small { display: block; color: var(--muted); font-size: 0.72rem; } .ms-tk b { font: 400 1.25rem var(--f-display); color: var(--amber); } .ms-tk em { font-style: normal; display: grid; place-items: center; min-height: 2.5rem; padding: 0 1.1rem; background: var(--amber); color: var(--ink); font-weight: 700; }
.ms-sea b { color: var(--cyan); }
.ss-card { display: grid; gap: 0.4rem; padding: 0.5rem; background: var(--card-2); border: 2px solid var(--amber); } .ss-card > small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; } .ss-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; } .ss-row em { font-style: normal; color: var(--amber); font-size: 0.85rem; white-space: nowrap; } .ss-go { min-height: 3rem; } .ss-skip { min-height: 2.75rem; }
.ss-ic { display: block; width: 2.1rem; height: 2.1rem; padding: 0.3rem; box-sizing: border-box; flex: none; outline: 2px solid var(--line); outline-offset: -2px; } .ss-ref { margin: 0; min-height: 2.2rem; padding: 0.45rem 0.5rem; background: var(--card-2); border-left: 3px solid var(--green); color: var(--green); font: 700 min(0.8rem, calc(3.2 * var(--vw))) var(--f-body); white-space: nowrap; overflow: hidden; }
.ss-feed { min-height: 2.7rem; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; padding: 0.2rem 0.45rem; background: var(--card-2); } .ss-feed span { display: grid; min-width: 0; } .ss-feed b { font: 700 0.8rem var(--f-body); white-space: nowrap; overflow: hidden; } .ss-feed small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; overflow: hidden; } .ss-feed em { font-style: normal; color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.ss-mile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.5rem; align-items: center; padding: 0.4rem 0.5rem; background: var(--card-2); border: 2px solid var(--line); } .ss-mile small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; } .ss-mile b { font: 700 min(0.85rem, calc(3.4 * var(--vw))) var(--f-body); color: var(--amber); white-space: nowrap; } .ss-bar { grid-column: 1 / -1; display: block; height: 6px; background: var(--ink); } .ss-bar u { display: block; height: 100%; background: var(--amber); text-decoration: none; }
.ms-pz.is-got b, .ms-pz.is-got span { color: var(--green); }
.ms-sum1 { grid-template-columns: minmax(0, 1fr) auto; } .ms-sum1 button { min-height: 2.75rem; white-space: nowrap; }
.ms-opens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; } .ms-opens button { min-width: 0; min-height: 2.75rem; padding: 0; font-size: min(0.85rem, calc(3.4 * var(--vw))); white-space: nowrap; }
.ms-rolls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; } .ms-rolls span { display: grid; justify-items: center; gap: 0.1rem; padding: 0.2rem 0; background: var(--card-2); border: 2px solid var(--rc, var(--line)); min-width: 0; } .ms-rolls small { font-size: 0.72rem; white-space: nowrap; } .ms-rolls .spr { animation: none; }
.ms-rolls.is-fresh span { animation: ms-pop 0.24s calc(var(--i) * 45ms) cubic-bezier(.2, 1.4, .5, 1) both; } @keyframes ms-pop { from { transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .ms-rolls.is-fresh span { animation: none; } }
.ms-h { margin: 0.4rem 0 0; font: 400 1rem var(--f-display); }
.ms-pz { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; min-height: 2.5rem; padding: 0.1rem 0.45rem; background: var(--card-2); border-left: 3px solid var(--rc, var(--line)); width: 100%; box-sizing: border-box; } .ms-pz span { display: grid; place-items: center; } .ms-pz:not(.is-rare) .spr { animation: none; } .ms-pz b { font: 700 min(0.85rem, calc(3.4 * var(--vw))) var(--f-body); white-space: nowrap; text-align: left; } .ms-pz em { font-style: normal; color: var(--cyan); font-size: 0.72rem; white-space: nowrap; }
.co-haul .ms-pz { max-width: 100%; } .ms-pz.is-rare { grid-template-columns: 3.1rem minmax(0, 1fr) auto; min-height: 3.4rem; } .ms-pz.is-rare em { color: var(--amber); } .ms-val { display: block; color: var(--green); font-size: 0.72rem; font-weight: 700; }
.ms-pz span, .ms-rolls span > div { position: relative; } .ms-pz .spr, .ms-rolls .spr { position: relative; left: 0 !important; top: 0 !important; }
.ms-lb { grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .ms-rk { font: 400 1.1rem var(--f-display); color: var(--amber); } .ms-pts { font: 400 1.1rem var(--f-display); color: var(--cyan); padding-right: 0.3rem; } .ms-lb.is-me { border-color: var(--amber); }
/* #489: the hub = tiles in three columns, like the cases; a long name shrinks to one line */
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding: 3px; }
.ms-tile { display: grid; grid-template-rows: 1.2rem auto auto; justify-items: center; align-items: center; gap: 0.1rem; min-width: 0; width: 100%; padding: 0.3rem 0.2rem 0.4rem; background: var(--card-2); }
.ms-top { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 1.2rem; } .ms-top small { color: var(--muted); font: 700 0.6875rem var(--f-body); white-space: nowrap; }
.ms-big { display: grid; place-items: center; min-height: 2.9rem; } .ms-big .spr { animation: none; }
.ms-tile b { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; font: 400 min(0.95rem, calc(3.7 * var(--vw))) var(--f-display); }
/* #491: the Game page: the same frame as Rewards; the story reads line by line */
.sheet[data-page="game"] .box { display: flex; flex-direction: column; }
body:has(> .sheet[data-page="game"]) .app .top { visibility: visible; }
.sheet.page[data-page="game"] { bottom: 0; height: auto; }
.sheet.page[data-page="game"] .box { padding-top: 0.2rem; height: calc(100% - 4.9rem - env(safe-area-inset-bottom)); }
.ms-secs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ms-secs4 button { font-size: min(0.75rem, calc(3 * var(--vw))); }
.ms-ans { margin-top: 0.4rem; }
.rp-meter { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; min-height: 2.75rem; padding: 0.25rem 0.5rem; background: var(--card-2); border: 2px solid var(--line); } .rp-meter span { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .rp-meter small { color: var(--muted); font-size: 0.72rem; }
.rp-ch { margin: 0.3rem 0 0; color: var(--amber); font: 400 1rem var(--f-display); }
.rp-text { display: grid; gap: 0.5rem; padding: 0.7rem 0.75rem; background: var(--card); border: 2px solid var(--line); } .rp-text p { margin: 0; font-size: 1rem; line-height: 1.35; }
.rp-acts { display: grid; gap: 0.5rem; padding: 3px; } .rp-lock { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; } .rp-end { margin: 0; text-align: center; color: var(--cyan); font-weight: 700; }
/* #493: the trophy left of the room bar: opaque over the room */
.ico-trophy { background-image: url(art/icon-trophy.png?v=PLsKiH9dwY); }
.core .rtop { position: absolute; left: 0.35rem; bottom: 0.15rem; z-index: 4; display: grid; place-items: center; width: 2.4rem; min-height: 2.4rem; padding: 0; background: #0b0d1a; } .core .rtop .ico { width: 1.6rem; height: 1.6rem; }
.core.other .rtop { visibility: visible; }
/* #497: the Expedition: the canvas holds everything that moves, the page under it is opaque and still */
.rn-scene { display: block; width: 100%; height: clamp(8rem, calc(100 * var(--vh) - 31rem), 15rem); }
.rn-ui { display: grid; gap: 0.45rem; padding-bottom: 0.5rem; }
.rn-stats { display: flex; gap: 0.5rem; } .rn-stats small { color: var(--text) !important; font-size: 0.75rem; white-space: nowrap; }
.rn-line { margin: 0; padding: 0.5rem 0.6rem; text-align: center; font-weight: 700; font-size: min(0.98rem, calc(3.9 * var(--vw))); background: var(--card); border: 2px solid var(--line); white-space: nowrap; overflow: hidden; }
.rn-sub { margin: 0; text-align: center; color: var(--muted); font-size: 0.8rem; } .rn-sum { margin: 0; text-align: center; color: var(--amber); font: 400 1.6rem var(--f-display); }
.rn-opts { display: grid; gap: 0.45rem; padding: 3px; } .rn-opt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.9rem; padding: 0 0.8rem; font-size: 0.95rem; } .rn-opt b { font: 400 1.2rem var(--f-display); }
.rn-home { min-height: 2.75rem; white-space: nowrap; }
.rn-opt span { min-width: 0; overflow: hidden; white-space: nowrap; }
/* #499: the team before a run: three slots, a list per slot */
.rn-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; padding: 3px; }
.rn-slot { display: grid; justify-items: center; gap: 0.05rem; min-width: 0; width: 100%; padding: 0.3rem 0.2rem; background: var(--card-2); } .rn-slot small { color: var(--muted); font-size: 0.6875rem; white-space: nowrap; } .rn-slot b { max-width: 100%; overflow: hidden; white-space: nowrap; font-size: min(0.72rem, calc(2.9 * var(--vw))); } .rn-slot em, .rn-row em { font-style: normal; color: var(--amber); font-size: 0.72rem; white-space: nowrap; }
.rn-pic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: var(--muted); } .rn-pic .spr { position: relative; left: 0 !important; top: 0 !important; animation: none; }
.rn-best { min-height: 2.5rem; }
.rn-list { display: grid; gap: 0.35rem; padding: 3px; } .rn-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; width: 100%; min-height: 3.2rem; padding: 0.2rem 0.5rem; text-align: left; background: var(--card-2); } .rn-row b { overflow: hidden; white-space: nowrap; font-size: 0.85rem; } .rn-row[aria-pressed="true"] { color: var(--cyan); }
/* Auto Robot Trading (owner #500-#514, web/trading.js): one opaque card per room, the chart is an opaque canvas */
.tr-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-box { display: grid; gap: 0.45rem; min-width: 0; }
.tr-note { margin: 0; color: var(--muted); font-size: 0.75rem; text-align: center; }
.tr-room { display: grid; gap: 0.4rem; min-width: 0; padding: 0.5rem; background: var(--card-2); border: 2px solid var(--line); }
.tr-hd { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.tr-hd > b { font: 400 1rem var(--f-display); white-space: nowrap; }
.tr-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
.tr-tv { margin-left: auto; display: grid; justify-items: end; } .tr-tv small, .tr-est small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.tr-tv b { font: 400 1.15rem/1.1 var(--f-display); color: var(--amber); white-space: nowrap; }
.tr-mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; } .tr-mins button { min-width: 0; min-height: 2.75rem; padding: 0; white-space: nowrap; }
.tr-mins button[aria-pressed="true"], .tr-cur button[aria-pressed="true"] { color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.tr-est { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.4rem; font-size: 0.8rem; }
.tr-coin { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; color: var(--amber); }
.tr-left { font: 400 1.05rem var(--f-display); color: var(--cyan); }
.tr-chart { display: block; width: 100%; height: 8.5rem; background: #070a18; border: 2px solid #1f3a5a; }
.tr-pool { display: inline-flex; align-items: center; gap: 0.2rem; font-size: clamp(0.7rem, calc(3.4 * var(--vw)), 1rem) !important; white-space: nowrap; }
.tr-ms { display: grid; gap: 0.5rem; } .tr-cur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem; } .tr-amt input { min-width: 0; min-height: 2.75rem; padding: 0 0.6rem; font-size: 1rem; color: var(--text); background: var(--card-2); border: 2px solid var(--line); }
.tr-amt button { min-height: 2.75rem; padding: 0 0.8rem; }
/* the simple screen (#515-#517): TRADE carries its estimate, two buttons when done, (i) for the rest */
.tr-top { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 0.4rem; align-items: center; }
.tr-all { min-height: 2.75rem; padding: 0 0.6rem; white-space: nowrap; }
.tr-info { width: 2.75rem; min-height: 2.75rem; padding: 0; font: 400 1.1rem var(--f-display); color: var(--cyan); }
.tr-go { display: grid; justify-items: center; gap: 0.15rem; min-height: 3.4rem; padding: 0.3rem 0.4rem; }
.tr-go b { font: 400 1.25rem/1 var(--f-display); letter-spacing: 0.06em; }
.tr-go small { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.35rem; font-size: 0.72rem; font-weight: 700; }
.tr-go .tr-coin { color: var(--ink); }
.tr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.3rem; } .tr-two button { min-width: 0; min-height: 2.75rem; padding: 0 0.3rem; font-size: 0.85rem; }
.tr-link { justify-self: center; display: inline-flex; gap: 0.3rem; min-height: 2.25rem; padding: 0 0.6rem; background: var(--card-2); border: 0; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.tr-link b { color: var(--amber); }
.tr-line { margin: 0; padding: 0.4rem 0.5rem; background: var(--card-2); border: 2px solid var(--line); font-size: 0.85rem; }
/* pairs + coins + Exchange (#518-#521): opaque rows, a coin = a round letter badge in its colour */
.head .tr-sel { max-width: 100%; min-height: 2.5rem; padding: 0 0.5rem; font: 400 1rem var(--f-display); color: var(--text); background: var(--card-2); border: 2px solid var(--line); }
.tr-tabs { min-width: 0; }
.tr-stake { justify-content: flex-end; } .tr-stake b { font: 400 1.15rem var(--f-display); color: var(--amber); }
.tr-cb { display: inline-block; flex: none; width: 1.35rem; height: 1.35rem; vertical-align: middle; image-rendering: pixelated; }
.tr-cpx .ico, .tr-ch .ico { width: 0.8rem; height: 0.8rem; flex: none; }
.tr-pair { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; } .tr-pair span { color: var(--muted); } .tr-pair .tr-left { margin-left: auto; }
.tr-pairs { display: grid; gap: 0.25rem; }
.tr-prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0 0.5rem; text-align: left; font-size: 0.85rem; }
.tr-prow[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); } .tr-prow:disabled { color: var(--muted); }
.tr-px { white-space: nowrap; font-size: 0.75rem; } .tr-px em, .tr-cn em { font-style: normal; } em.up { color: var(--green); } em.down { color: #ff5b6e; }
.tr-go b { white-space: nowrap; font-size: min(1.25rem, calc(5 * var(--vw))); }
.tr-h { margin: 0.2rem 0 0; font: 400 0.95rem var(--f-display); }
.tr-list { display: grid; gap: 0.25rem; }
.tr-crow { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.75rem auto; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.2rem 0.5rem; background: var(--card-2); border: 2px solid var(--line); }
.tr-cn, .tr-ch { display: grid; min-width: 0; } .tr-cn small, .tr-ch small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; } .tr-ch { justify-items: end; } .tr-ch b { font-size: 0.85rem; white-space: nowrap; }
.tr-sp { width: 3.75rem; height: 1.25rem; background: #0b0d1a; }
.tr-swap { display: grid; gap: 0.4rem; padding: 0.5rem; background: var(--card-2); border: 2px solid var(--line); }
.tr-amt select { min-height: 2.75rem; padding: 0 0.4rem; color: var(--text); background: var(--card); border: 2px solid var(--line); font-weight: 700; }
.tr-swap .tr-amt { grid-template-columns: auto minmax(0, 1fr) auto; } .tr-swap .tr-to { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .tr-to span { color: var(--muted); font-size: 0.8rem; }
/* the header row (#523): room select + Robot Stake, before the X */
.sheet .head h3.tr-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1 1 auto; margin-right: 0.4rem; }
.tr-head .tr-sel { flex: 0 1 auto; min-width: 0; max-width: 11rem; text-overflow: ellipsis; white-space: nowrap; }
.tr-hv { display: grid; justify-items: end; margin-left: auto; flex: none; line-height: 1.1; }
.tr-hv small { color: var(--muted); font: 700 0.62rem var(--f-body); white-space: nowrap; } .tr-hv b { font: 400 1.1rem var(--f-display); color: var(--amber); white-space: nowrap; }
/* the Robot Stake card (#524): what it is, what it is made of, the way to the next pair */
/* the Work tab as numbered steps (#538): 1 room · 2 how long · 3 job, then Go to work */
.tr-step { margin: 0.15rem 0 0; display: flex; align-items: center; gap: 0.35rem; min-width: 0; font: 400 0.85rem var(--f-display); white-space: nowrap; }
.tr-step small { margin-left: auto; color: var(--muted); font: 400 0.7rem var(--f-body, inherit); }
.tr-n { display: inline-grid; place-items: center; flex: none; width: 1.15rem; height: 1.15rem; background: var(--cyan); color: var(--ink); font: 400 0.7rem var(--f-display); font-style: normal; }
.tr-head .tr-step { margin: 0; flex: none; font-size: 0.75rem; }
.tr-why { margin: 0; color: var(--muted); font-size: 0.75rem; }
.tr-card { display: grid; gap: 0.3rem; padding: 0.5rem 0.6rem; background: var(--card-2); border: 2px solid var(--line); }
.tr-cr { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; } .tr-cl { font: 400 0.95rem var(--f-display); } .tr-cv { font: 400 1.35rem var(--f-display); color: var(--amber); white-space: nowrap; }
.tr-parts { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.1rem 0.4rem; color: var(--muted); font-size: 0.72rem; }
.tr-parts > span { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .tr-parts .tr-cb { width: 1rem; height: 1rem; font-size: 0.6rem; }
.tr-bar { height: 0.5rem; background: #0b0d1a; border: 2px solid var(--line); } .tr-bar i { display: block; height: 100%; background: var(--cyan); }
.tr-go small b { color: var(--ink); }
/* FINAL v2 (#531): Raise button, job names, what-if, sell column, five boards in two rows */
.tr-raise { min-height: 2.5rem; font-size: 0.85rem; color: var(--ink); background: var(--amber); border-color: var(--amber-d); }
.tr-jn { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; white-space: nowrap; } .tr-jn .tr-cb { width: 1.2rem; height: 1.2rem; }
.tr-prow { grid-template-columns: minmax(0, 1fr) auto; }
.tr-whatif { color: var(--cyan); } .tr-whatif b { color: var(--text); }
.tr-home { justify-content: center; font-size: 0.95rem; } .tr-home .tr-coin { gap: 0.3rem; }
.tr-go small .tr-cb { width: 1rem; height: 1rem; font-size: 0.55rem; }
.tr-crow { grid-template-columns: minmax(0, 1fr) 3.25rem auto auto; } .tr-cn b { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.tr-sell { min-height: 2.25rem; min-width: 3.4rem; padding: 0 0.4rem; font-size: 0.78rem; }
.tr-sp { width: 3.25rem; }
.ms-secs5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-secs5 button { font-size: min(0.75rem, calc(3.2 * var(--vw))); }
/* Coin Market row in two lines (#531): never overlaps at 280 px */
.tr-crow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nm held sell" "px px sp"; row-gap: 0.15rem; }
.tr-cnm { grid-area: nm; display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; white-space: nowrap; }
.tr-crow .tr-ch { grid-area: held; } .tr-crow .tr-sell { grid-area: sell; align-self: center; justify-self: end; }
.tr-cpx { grid-area: px; min-width: 0; color: var(--muted); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: clip; } .tr-cpx em { font-style: normal; }
.tr-crow .tr-sp { grid-area: sp; justify-self: end; }
/* #543: Go to work = one big 3D button: robot + title + blinking chevrons, then Cost (left) and Brings home (right) inside it.
   Every pixel opaque (engine rule); the chevrons only change colour, the button presses down by transform */
.tr-go { display: grid; justify-items: stretch; gap: 0.35rem; min-height: 0; padding: 0.5rem 0.45rem 0.45rem; border-width: 3px; border-color: #8a4b00;
  background: linear-gradient(#ffd25a, var(--amber)); box-shadow: inset 0 -0.3rem 0 var(--amber-d), 0 0.3rem 0 #5a3100; margin-bottom: 0.3rem; }
.tr-go:active { transform: translateY(0.25rem); box-shadow: inset 0 -0.15rem 0 var(--amber-d), 0 0.05rem 0 #5a3100; }
.tr-gt { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; }
.tr-gt b { font: 400 min(1.35rem, calc(5.2 * var(--vw))) / 1 var(--f-display); letter-spacing: 0.06em; white-space: nowrap; color: var(--ink); text-transform: uppercase; }
.tr-bot { font-style: normal; font-size: 1.15rem; line-height: 1; }
.tr-chev { display: inline-flex; font: 400 1.3rem/1 var(--f-display); font-style: normal; } .tr-chev i { font-style: normal; color: #b86a00; animation: tr-chev 0.9s steps(1) infinite; }
.tr-chev i:nth-child(2) { animation-delay: 0.3s; } .tr-chev i:nth-child(3) { animation-delay: 0.6s; }
@keyframes tr-chev { 0% { color: var(--ink); } 34% { color: #b86a00; } }
@media (prefers-reduced-motion: reduce) { .tr-chev i { animation: none; color: var(--ink); } }
.tr-gr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.3rem; }
.tr-gc, .tr-gh { display: grid; justify-items: center; align-content: center; gap: 0.1rem; min-width: 0; padding: 0.25rem 0.25rem; background: #1a1430; border: 2px solid #14162a; }
.tr-gr small { color: #a9a3c7; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.tr-gr b { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.1rem 0.25rem; font: 400 0.9rem/1.15 var(--f-display); }
.tr-gc b { color: #ff9a6b; } .tr-gh b { color: var(--cyan); } .tr-gh { border-color: var(--cyan); } .tr-free { color: var(--green); }
.tr-gr .ico { width: 0.85rem; height: 0.85rem; flex: none; } .tr-gr .tr-cb { width: 1rem; height: 1rem; }
/* #544: Game (Robot Work = the main gameplay) is the gold 3D CTA of the Gift / Case / Game row; opaque, the rim flashes by colour */
.daily { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); }
.daily .daily-go { color: var(--ink); background: linear-gradient(#ffd25a, var(--amber)); border: 3px solid #8a4b00; box-shadow: inset 0 -0.25rem 0 var(--amber-d), 0 0.2rem 0 #5a3100;
  font: 400 0.95rem/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; animation: dg-rim 2.4s steps(1) infinite; }
.daily .daily-go:active { transform: translateY(0.2rem); box-shadow: inset 0 -0.1rem 0 var(--amber-d), 0 0 0 #5a3100; }
.dg-t { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; } .dg-t .tr-chev { font-size: 1.05rem; }
@keyframes dg-rim { 0% { border-color: #8a4b00; } 80% { border-color: #fff1b8; } 90% { border-color: #8a4b00; } }
@media (prefers-reduced-motion: reduce) { .daily .daily-go { animation: none; } }
/* #545: Robot Work (gameplay 2) also sits in the free corner right of the room bar: the gold 3D twin of the trophy, opaque, the
   rim flashes by colour (the #544 Game look); a locked room hides it; the room bar centres in the gap between trophy and Work */
.core .rwork { position: absolute; right: 0.35rem; bottom: 0.15rem; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 0.15rem;
  width: 5.9rem; min-height: 2.4rem; padding: 0 0.3rem; color: var(--ink); background: linear-gradient(#ffd25a, var(--amber)); border: 3px solid #8a4b00;
  box-shadow: inset 0 -0.25rem 0 var(--amber-d), 0 0.2rem 0 #5a3100; font: 400 0.9rem/1 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; animation: dg-rim 2.4s steps(1) infinite; }
.core .rwork span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .core .rwork .rw-bot { flex: none; font-style: normal; font-size: 1rem; }
.core .rwork:active { transform: translateY(0.2rem); box-shadow: inset 0 -0.1rem 0 var(--amber-d), 0 0 0 #5a3100; }
.core.other .rwork { visibility: hidden; }
.core .rnav { left: calc(50% - 1.75rem); max-width: calc(100% - 9.6rem); } .core .rnav #rname { min-width: 0; flex: 0 1 auto; }
@container (max-width: 22rem) { .core .rnav { gap: 0.1rem; } .core .rnav button { min-width: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .core .rwork { animation: none; } }
/* #546: two ways to earn, said in plain words: the BTC card = "Room mining" (the room earns by itself), the gold tile =
   🤖 WORK + "Earn coins" (send the robot out, it brings coins home); the corner WORK button opens the same Robot Work */
.daily .daily-go { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.2rem 0.3rem; }
.daily .dg-bot { flex: none; font-style: normal; font-size: 1.4rem; line-height: 1; }
.daily .dg-txt { display: grid; min-width: 0; text-align: left; line-height: 1.05; }
.daily .dg-txt small { font: 700 0.65rem/1.1 var(--f-body); letter-spacing: 0; text-transform: none; color: #3b2300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #551: the viral engine (web/viral.js): the Invite page, the friend card, the share chip, Ask friends for help. All opaque */
.vr-tabs button { min-width: 0; padding: 0 0.3rem; font-size: 0.8rem; white-space: nowrap; }
.vr-body, .vr-card, .vr-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.vr-pic { display: grid; place-items: center; min-height: 8rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.6rem; padding: 0.4rem; }
.vr-pic img { display: block; width: auto; height: clamp(9rem, calc(32 * var(--vh)), 17rem); aspect-ratio: 9 / 16; border-radius: 0.4rem; background: #11131c; }
.vr-row { display: flex; align-items: center; gap: 0.45rem; margin: 0; min-height: 2.4rem; padding: 0.25rem 0.55rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; white-space: nowrap; }
.vr-row > span:not(.pxi) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; } .vr-row > b { font: 400 1rem var(--f-display); color: var(--amber); }
.vr-ain { display: inline-flex; align-items: center; gap: 0.2rem; font: 400 1rem var(--f-display); color: var(--green); } .vr-ain .ico { width: 0.9rem; height: 0.9rem; }
.vr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; } .vr-two button { min-width: 0; white-space: nowrap; overflow: hidden; }
.vr-link { display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 2.75rem; padding: 0 0.6rem; background: var(--card-2); color: var(--text); }
.vr-link code { flex: 1; min-width: 0; font: 400 0.9rem var(--f-display); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vr-link span { color: var(--amber); font-size: 0.8rem; }
.vr-note { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .vr-note b { color: var(--amber); font: 400 1rem var(--f-display); }
.vr-form { display: grid; gap: 0.4rem; }
.vr-form input { width: 100%; height: 2.75rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); padding: 0 0.6rem; font: inherit; }
.vr-h { margin: 0.4rem 0 0; font: 400 1rem var(--f-display); color: var(--amber); letter-spacing: 0.04em; white-space: nowrap; }
.vr-sq { display: flex; align-items: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.2rem 0.5rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; white-space: nowrap; }
.vr-sq > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } .vr-sq small { color: var(--muted); } .vr-sq > b { font: 400 1rem var(--f-display); color: var(--cyan); }
.vr-sq.is-me { border-color: var(--amber); } .vr-sq button { min-height: 2rem; padding: 0 0.6rem; font-size: 0.8rem; } .vr-rk { color: var(--amber) !important; min-width: 2rem; }
.vr-mine { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.7rem; background: var(--card-2); border: 2px solid var(--amber); border-radius: 0.6rem; white-space: nowrap; }
.vr-mine b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 1.3rem var(--f-display); color: var(--amber); } .vr-mine small { color: var(--muted); }
.vr-card { display: grid; gap: 0.6rem; } .vr-got { margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.35rem; font: 400 2rem var(--f-display); color: var(--green); } .vr-got .ico { width: 1.6rem; height: 1.6rem; }
.vr-chip { position: fixed; z-index: 30; right: 0.75rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); min-height: 2.75rem; padding: 0 1rem; }
.tr-help { margin-top: 0.4rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; }
.tgl-ban .tb-who { color: var(--amber); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
/* #554: the Rewards tile's badge: rewards ready to take, a red "!" + the count on its corner, opaque, a soft pulse by scale */
.daily button[data-act="daily"] { position: relative; }
.rw-badge { position: absolute; top: -0.35rem; right: -0.2rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.1rem; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  background: var(--red, #ff4a5a); color: #fff; border: 2px solid #5a0f0f; border-radius: 0.7rem; font: 400 0.85rem/1 var(--f-display); font-style: normal; letter-spacing: 0; animation: rw-pop 2s ease-in-out infinite; }
.rw-badge b { font: inherit; color: #ffe066; }
@keyframes rw-pop { 0%, 80%, 100% { transform: scale(1); } 90% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .rw-badge { animation: none; } }
/* #557: the Craft tab (the middle of the tab bar) + the Craft page (web/craft.js). Opaque panels */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabbar button { min-width: 0; white-space: nowrap; }
.ico-gear { background-image: url(art/icon-gear.png?v=y8PpVcIHEN); }
.cr-tabs button { min-width: 0; }
.cr-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding-bottom: 0.6rem; }
.cr-card { display: grid; gap: 0.45rem; padding: 0.55rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.6rem; }
.cr-top, .cr-part { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.cr-pic { flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; background: var(--card-2); border: 2px solid var(--line); border-radius: 0.5rem; }
.cr-part .cr-pic { width: 2.75rem; height: 2.75rem; }
.cr-what { display: grid; min-width: 0; flex: 1; } .cr-what b { font: 400 1.05rem var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-what small { color: var(--muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-what em { font-style: normal; font-weight: 700; }
.cr-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.3rem; }
.cr-need { display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.2rem 0.35rem; background: var(--card-2); border: 2px solid var(--green); border-radius: 0.45rem; }
.cr-need.no { border-color: var(--line); } .cr-need small { flex: 1; min-width: 0; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-need b { font: 400 0.95rem var(--f-display); color: var(--green); } .cr-need.no b { color: #ff7a6b; }
.cr-go { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .cr-fee { display: inline-flex; align-items: center; gap: 0.2rem; font: 400 1rem var(--f-display); } .cr-fee .ico { width: 0.95rem; height: 0.95rem; }
.cr-part { padding: 0.35rem 0.5rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; }
.cr-n { font: 400 1.1rem var(--f-display); color: var(--amber); } .cr-n.zero { color: var(--muted); }
.cr-h { margin: 0.35rem 0 0; font: 400 1rem var(--f-display); color: var(--amber); letter-spacing: 0.04em; } .cr-note { margin: 0; text-align: center; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.cr-pic .spr, .cr-need .spr { position: relative; flex: none; } /* the sprite sits in its box (spr() is absolute for rooms) */
/* #558: the forge: level chips in the rarity colour (--rc), the type picker, the forge rows, the two selects of Craft */
.cr-pic.sm { width: 2.75rem; height: 2.75rem; }
.cr-lvs { display: flex; flex-wrap: wrap; gap: 0.3rem; } .cr-none { color: var(--muted); }
.cr-lv { display: inline-flex; align-items: baseline; gap: 0.25rem; padding: 0.15rem 0.45rem; background: var(--card-2); border: 2px solid var(--rc, var(--line)); border-radius: 0.45rem; white-space: nowrap; }
.cr-lv b { font: 400 0.95rem var(--f-display); color: var(--rc, var(--text)); } .cr-lv small { font-size: 0.72rem; color: var(--muted); }
.cr-types button { min-width: 0; padding: 0 0.3rem; font-size: 0.8rem; }
.cr-row { display: flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0.35rem 0.45rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; }
.cr-row .cr-lv { flex: 0 1 auto; min-width: 0; overflow: hidden; } .cr-arrow { color: var(--muted); flex: none; }
.cr-row button { flex: none; margin-left: auto; min-height: 2.4rem; padding: 0 0.6rem; font-size: 0.8rem; } .cr-row button + button { margin-left: 0; }
.cr-sel { display: grid; gap: 0.2rem; } .cr-sel small { color: var(--muted); font-size: 0.75rem; }
.cr-sel select { width: 100%; height: 2.75rem; padding: 0 0.6rem; border-radius: 0.5rem; border: 2px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; }
.cr-card[style*="--rc"] { border-color: var(--rc); }
.cr-pic.sm .spr { position: relative; }

/* Cases v2 (owner #575): HUD rows + tier cards, every pixel opaque above the world; moved by transform only */
.cx-tabs button { position: relative; } .cx-badge { margin-left: 0.3rem; color: var(--amber); font: 400 1rem var(--f-display); font-style: normal; }
#cx { display: grid; gap: 0.5rem; }
.cx-strip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; background: var(--card-2); box-shadow: 0 -3px 0 var(--cyan), 0 3px 0 var(--cyan), -3px 0 0 var(--cyan), 3px 0 0 var(--cyan); }
.cx-strip b { font: 400 1.2rem var(--f-display); color: var(--cyan); white-space: nowrap; }
.cx-row { display: flex; align-items: center; gap: 0.5rem; min-height: 3.6rem; padding: 0.35rem 0.5rem; background: var(--card-2); box-shadow: -3px 0 0 var(--line); }
.cx-row.is-ready { box-shadow: -3px 0 0 var(--cyan); } .cx-row.ev-row { box-shadow: -3px 0 0 var(--amber); } .cx-row.is-done { background: var(--card); }
.cx-row .pic { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; overflow: hidden; }
.cx-row .pic .spr, .cx-head .pic .spr, .cx-big .spr { position: relative; left: 0 !important; top: 0 !important; }
.cx-t { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.cx-t b { font: 400 1.05rem var(--f-display); white-space: nowrap; overflow: hidden; } .cx-t small { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; }
.cx-bar { display: block; height: 0.4rem; background: var(--line); } .cx-bar u { display: block; height: 100%; background: var(--cyan); }
.cx-row .act { flex: none; min-width: 4.6rem; margin: 0; white-space: nowrap; } .cx-row .ev-track { margin: 0; }
.cx-pct, .cx-tick { flex: none; min-width: 3rem; text-align: right; font: 400 1.05rem var(--f-display); font-style: normal; color: var(--muted); } .cx-tick { color: var(--green); }
.cx-code { display: flex; gap: 0.4rem; padding: 0.35rem 0.5rem; background: var(--card); } .cx-code input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 0.5rem; background: var(--card-2); border: 2px solid var(--cyan); color: var(--ink); font: 400 1.1rem var(--f-display); text-transform: uppercase; }
.cx-card { display: grid; gap: 0.45rem; padding: 0.55rem 0.6rem; background: var(--card-2); box-shadow: 0 -3px 0 var(--rc), 0 3px 0 var(--rc), -3px 0 0 var(--rc), 3px 0 0 var(--rc); margin: 3px; }
.cx-card.is-locked { background: var(--card); } .cx-lock { margin: 0; text-align: center; color: var(--muted); white-space: nowrap; }
.cx-head { display: flex; align-items: center; gap: 0.6rem; } .cx-head .pic { flex: none; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.cx-head .cx-t b { font-size: 1.25rem; color: var(--rc); }
.cx-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; width: 100%; align-items: end; }
.cx-price { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.2rem; min-height: 2.75rem; padding: 0 0.2rem; white-space: nowrap; background: var(--card); color: var(--ink); }
.cx-price b { font: 400 1.05rem var(--f-display); color: var(--ink); } .cx-price.is-mid b { color: #1a1204; } .cx-price .ico { width: 0.85rem; height: 0.85rem; }
.cx-price.is-mid { min-height: 3.5rem; flex-direction: column; gap: 0; background: var(--amber); color: #1a1204; flex-wrap: wrap; } .cx-price em { font: 700 0.58rem var(--f-body); font-style: normal; text-transform: uppercase; white-space: nowrap; }
.cx-price.is-mid .ico { display: none; } .cx-price.is-on { outline: 3px solid var(--cyan); outline-offset: 1px; }
.cx-big { display: grid; place-items: center; min-height: 6rem; overflow: hidden; } .cx-pity { margin: 0; color: var(--cyan); font-size: 0.8rem; white-space: nowrap; }