/* 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) format("woff2"); font-display: swap; size-adjust: 128%; }
:root {
  --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: 88dvh; 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; 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; }
.rigtop { display: flex; gap: 0.6rem; align-items: center; }
.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; }
.top .who { font: 700 1rem var(--f-display); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.power { padding: 0.55rem 0.75rem; gap: 0.15rem; }
.power .row1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.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)); }
.top .who { display: flex; align-items: center; gap: 0.45rem; }
.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); }
.corespr { position: relative; display: block; }
.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; }
.scard { display: flex; align-items: center; gap: 0.4rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; padding: 0.25rem 0.4rem 0.25rem 0.25rem; min-width: 0; font: inherit; text-align: left; min-height: 3.6rem; }
.scard .pic { width: 48px; height: 48px; }
.scard .txt { min-width: 0; } .scard b { display: block; font: 700 0.8rem var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard span { display: block; color: var(--cyan); font-size: 0.75rem; white-space: nowrap; }
.scard.empty { justify-content: center; border-style: dashed; color: var(--amber); font: 700 0.8rem var(--f-display); }
.coinfly { position: fixed; font: 700 1rem var(--f-display); color: var(--amber); pointer-events: none; z-index: 30; animation: coinfly 0.9s ease-out forwards; }
@keyframes coinfly { to { transform: translateY(-5rem); opacity: 0; } }
@container (max-width: 320px) { .stat small { font-size: 0.62rem; } .daily button { font-size: 0.7rem; } }
.core { flex: none; min-height: 0; align-content: start; }
.core .hint { bottom: 0; }
.corespr { margin-top: 0; }
.daily button { min-height: clamp(2.3rem, 6cqh, 3.2rem); }
.app, .app > .view { gap: clamp(0.3rem, 1cqh, 0.7rem); }
.top { min-height: 2.6rem; }
.stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scard { flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.25rem; min-height: 4.2rem; text-align: center; }
.scard .txt b { display: none; }
.scard span { font-size: 0.68rem; }
.scard.empty { font-size: 1.2rem; }
/* 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, .scard b, .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); } .ico-ain { background-image: url(art/icon-ain.png); }
.wallet { display: grid; gap: 0.1rem; justify-items: end; min-height: 2.75rem; padding: 0.2rem 0.55rem; background: var(--card); border: 2px solid var(--line); border-radius: 0.5rem; }
.wallet span { display: flex; align-items: center; gap: 0.3rem; }
.wallet b { font: 400 0.95rem/1 var(--f-display); letter-spacing: 0.02em; }
.wallet .wl-btc b { color: var(--amber); } .wallet .wl-ain b { color: var(--cyan); }
.wallet .ico { width: 0.95rem; height: 0.95rem; }
.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; }
.xq { margin: 0; text-align: center; font-size: 0.9rem; }
.xq b { font: 400 1.05rem var(--f-display); color: var(--amber); } .xq b.ain { color: var(--cyan); }
.xq .bonus { display: inline-block; color: var(--green); background: #5cc86022; border-radius: 0.3rem; padding: 0 0.35rem; font-weight: 700; }
.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) */
.wallet b { font-size: 0.85rem; }
.vault b { font-size: min(6.6cqw, 4.8cqh); }
.stat.day b { font-size: clamp(0.6rem, 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) 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) center / contain no-repeat; }
.wallet .ico-btc { width: 1.1rem; height: 1.1rem; }

/* 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; }
.ico-ain { animation: none; } /* a still coin reads better than a flip at 1 rem */
/* 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; }
.scard .gh { color: #f7931a; }
.tabs button { padding: 0 0.35rem; font-size: 0.82rem; white-space: nowrap; min-width: 0; } /* 4 tabs fit a 344 phone */

/* 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; }
.case details { margin-top: 0.3rem; } .case summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; min-height: 2rem; display: flex; align-items: center; }
.odds { display: grid; gap: 0.25rem; margin-top: 0.2rem; }
.odd { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 0.45rem; font-size: 0.8rem; }
.odd .pic.sm { width: 32px; height: 32px; }
.odd em { font-style: normal; font-weight: 700; color: var(--rc); font-size: 0.72rem; }
.odd b { font: 400 0.9rem var(--f-display); min-width: 3.2rem; text-align: right; }
.caseopen { position: fixed; inset: 0; z-index: 40; background: #05060cdd; 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; }
.core.full .labscene { box-shadow: 0 0 0 2px var(--amber), 0 0 1.2rem #f0a01e88; }

/* 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; }
.px-station { position: absolute; }
.px-station:active { filter: brightness(1.25); }
.px-label { position: absolute; left: 50%; bottom: calc(-12 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(3 * var(--u)); white-space: nowrap;
  font: 700 calc(6.5 * var(--u)) var(--f-body); }
.px-label i { font-style: normal; color: var(--cyan); background: #0b0d1acc; border-radius: calc(2 * var(--u)); padding: 0 calc(2 * var(--u)); }
.px-label i.gh { color: #f7931a; }
.px-off .px-spr { filter: grayscale(1) brightness(0.5); animation: none; }
.px-spot { position: absolute; display: grid; place-items: center; align-content: center; border: calc(1.5 * var(--u)) dashed #ffffff55; border-radius: calc(4 * var(--u));
  color: var(--amber); background: #0b0d1a55; }
.px-spot b { font: 400 calc(12 * var(--u)) var(--f-display); line-height: 1; } .px-spot small { font: 700 calc(5.5 * var(--u)) var(--f-body); color: var(--muted); }
.room-go { position: absolute; right: 0.4rem; top: 0.4rem; z-index: 2; font: 700 0.75rem var(--f-body); color: var(--text); background: #0b0d1acc;
  border: 1.5px solid var(--line); border-radius: 1rem; padding: 0.25rem 0.6rem; }

/* 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.62rem 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; }
.iacts button, .iacts .pagelink { flex: 1 1 9rem; }
.pagelink { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; border-radius: 0.5rem; border: 2px solid var(--line); color: var(--cyan); text-decoration: none; font: 700 0.9rem var(--f-body); }
#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; }
.pid { margin: 0 0 0.4rem; } .pid b { color: var(--amber); }
.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.68rem 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.62rem; 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 .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 .sh-t { display: none; } .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; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0; white-space: nowrap; min-width: 0; }
.pf-l span, .pf-tx span { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: clip; }
.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, .scard b, .scard 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; }
  .scard b { font-size: 0.72rem; } .scard span { font-size: 0.68rem; } .scard .pic { width: 40px; height: 40px; }
  .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, .odd, .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; }
  .odd { font-size: 0.72rem; } .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.6rem; } #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 */
.core .rstat { position: absolute; top: 2.3rem; transition: none; left: 50%; transform: translateX(-50%); z-index: 4; margin: 0; white-space: nowrap;
  font: 400 0.72rem var(--f-display); letter-spacing: 0.03em; color: var(--text); text-shadow: 0 1px 0 #0008; pointer-events: none; }
.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.68rem 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.66rem; } .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.62rem; } }

/* 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(--bg) 60%); 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.32rem;
  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; height: min(56.25vw, 26dvh); overflow: hidden;
  border-block: 2px solid var(--cyan); background: radial-gradient(80% 70% at 50% 40%, #16306a, #070b18 75%);
  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, 4.6vw) var(--f-display); color: #ffc94a; }
.tgl-ban small { font-size: min(0.7rem, 3vw); color: #ffd8b8; }
.tgl-ban em { margin-left: auto; font: 400 min(0.95rem, 3.9vw) var(--f-display); font-style: normal; color: var(--text); }
/* the floor ticker (owner #184): over the stage's floor strip, scrolls forever on the GPU (transform only) */
.st-tick { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; display: flex; align-items: center; overflow: hidden; background: #070b18b3; }
.tk-in { display: flex; width: max-content; animation: feed-run 22s linear infinite; }
.tk { padding-right: 0.5rem; white-space: nowrap; font: 400 min(0.85rem, 3.8vw) var(--f-display); color: var(--muted); }
.tk b { font-weight: 400; color: var(--amber); } .tk span { color: var(--text); }
.tk .nb { font: 700 0.62em/1 var(--f-body); font-style: normal; padding: 0.2em 0.4em; border-radius: 0.3rem; color: var(--ink); background: var(--amber); vertical-align: 0.15em; }
@media (prefers-reduced-motion: reduce) { .tk-in { animation: none; } }
.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 2.4rem/1 var(--f-display); letter-spacing: 0.06em; color: var(--amber); }
.tgl-btc .ico { width: 1.9rem; height: 1.9rem; }
.tgl-sub { font: 400 min(1.25rem, 5.4vw)/1.1 var(--f-display); color: var(--cyan); white-space: nowrap; }
/* the headline's two robots (owner #182): mining on the left (pickaxe swing), trading on the right (relaxed, phone) */
.tgl-subrow { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.hb { position: relative; flex: none; width: 40px; height: 40px; }
.hb-l .spr { animation-duration: 0.8s; } .hb-r .spr { animation-duration: 1.6s; }
.tgl .hi { margin: 0 0 0.2rem; font: 400 min(1.1rem, 4.1vw) 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, .tgl-feed { width: min(100%, 22rem); }
/* last transaction (owner #170): the live feed under the welcome line */
.tgl-feed { display: grid; gap: 0.2rem; }
.tgl-feed:has(.feed[hidden]) { display: none; } /* nothing happened yet: no empty label */
.tgl-feed small { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tgl .chk { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; font-size: min(0.9rem, 3.9vw); }
/* 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.6rem 0.8rem 0.7rem; 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.55rem; }
.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: 2.4rem 1fr; column-gap: 0.6rem; align-items: center; animation: st-in 0.3s ease-out; }
.st-slide .ic { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; 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, 5.4vw)/1.15 var(--f-display); color: var(--amber); white-space: nowrap; }
.st-slide small { color: var(--muted); font-size: min(0.85rem, 3.7vw); white-space: nowrap; }
@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 { margin-bottom: auto; position: relative; }
/* the mining robot on Start (owner #175): swings its pickaxe at the button's right end, half a loop slower than idle */
.go-bot { position: absolute; left: 0.25rem; bottom: 0.05rem; width: 54px; height: 54px; pointer-events: none; }
.go-bot .spr { animation-duration: 0.8s; }
/* the sign-up gift (owner #180) at the right end; its prize sprites centre in the same box */
.go-gift { position: absolute; right: 0.4rem; top: 50%; width: 44px; height: 44px; margin-top: -22px; pointer-events: none; }
.gg-box, .gg-prize { position: absolute; inset: 0; display: grid; place-items: center; }
.gg-box .spr, .gg-prize .spr { position: relative; left: 0 !important; top: 0 !important; }
.gg-tag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font: 400 0.85rem var(--f-display); color: var(--cyan); white-space: nowrap;
  text-shadow: 0 2px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.gg-bit { position: fixed; z-index: 25; width: 6px; height: 6px; background: #ffc94a; pointer-events: none; } .gg-bit.is-red { background: #ff4a5a; }
/* its hit (owner #178): coins + a real claim amount fly out, fixed so nothing clips them */
.hit-coin, .hit-txt { position: fixed; z-index: 25; pointer-events: none; }
.hit-coin { width: 1rem; height: 1rem; }
.hit-txt em { font: 700 0.6rem var(--f-body); font-style: normal; padding: 0 0.25rem; margin-right: 0.2rem; color: var(--ink); background: var(--cyan); vertical-align: 0.15em; }
.hit-txt { font: 400 0.95rem var(--f-display); color: #f7931a; white-space: nowrap; text-shadow: 0 2px 0 var(--ink), 0 -1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }

/* 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; }
.tk .pxi { margin: 0 0.35rem; }
.tgl-feed small { display: flex; align-items: center; gap: 0.3rem; }
.tgl-ban em { display: flex; align-items: center; gap: 0.25rem; }
.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); } .ico-gamepad { background-image: url(art/icon-gamepad.png); }
.ico-home { background-image: url(art/icon-home.png); } .ico-bag { background-image: url(art/icon-bag.png); } .ico-shop { background-image: url(art/icon-shop.png); }
.ico-case { background-image: url(art/case-starter-case.png); 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.page { z-index: 4; display: block; background: var(--bg); padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); overflow-y: auto; }
.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; }
.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; }
/* 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%; }
.sheet.page .odd { grid-template-columns: 24px 1fr auto; } .sheet.page .odd em { display: none; } .sheet.page .odd .pic.sm { width: 24px; height: 24px; }

/* 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: 104px; margin-top: -52px; overflow: hidden; background: var(--card-2);
  box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.caseopen.show .co-reel { opacity: 0; transition: opacity 0.25s; }
.co-strip { display: flex; gap: 6px; padding: 14px 0; will-change: transform; }
.co-tile { position: relative; flex: none; width: 76px; height: 76px; 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); }
.co-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--amber); box-shadow: 0 0 0.6rem var(--amber); }
.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); }