/* 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-case { position: relative; width: 192px; height: 192px; animation: co-shake 0.12s linear infinite; }
.co-case.burst { animation: co-burst 0.35s ease-out forwards; }
@keyframes co-shake { 25% { transform: translate(-3px, 1px) rotate(-2deg); } 75% { transform: translate(3px, -1px) rotate(2deg); } }
@keyframes co-burst { 40% { transform: scale(1.25); filter: brightness(2.2); } to { transform: scale(0.2); opacity: 0; } }
.co-case.is-boost .spr[data-r] { --row: 1; } .co-case.is-win .spr[data-r] { --row: 2; }
.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-case, .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 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; }