/* The game page on the pixelkit HUD: dark chunky panels, brass accent, Tiny5 headings, mono numbers.
   hud.css (the kit) loads first; this file sets the accent, the stage layout, the sections below the fold
   and the phone stacking. */
:root {
  --accent: #b8862b; --accent-dim: #6b4f19; --num: #e0b23c; --gold: #e0b23c;
  --enamel: #c8342b; --tin: #2f6f9f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: auto; overflow: auto; overscroll-behavior: auto; }
body { min-height: 100svh; }
body.watch { height: 100svh; overflow: hidden; }
a { color: var(--accent); }

/* ---- the stage: world + chips, the panel on its right ---- */
#stage { position: sticky; top: 0; height: 100svh; z-index: 0; }
#world { position: absolute; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
.panel { z-index: 6; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo .mark { image-rendering: pixelated; width: 22px; height: 24px; display: block; }
.logo .mark canvas { display: block; }
.chip.dim { opacity: .45; cursor: default; }
.chip.dim[data-x] { pointer-events: none; }
.chip.ca { font: 500 12.5px var(--mono); gap: 7px; }
.chip.ca .k { font: 700 11px var(--pix); background: var(--accent); color: var(--ink); padding: 2px 5px 1px; border-radius: 4px; }
.chip.ca .c { color: var(--num); font: 600 11px var(--sans); }
.chip.xlink svg { width: 13px; height: 13px; }
.chip.th em { font-style: normal; color: var(--muted2); border-left: 1px solid var(--line); padding-left: 7px; font: 600 12.5px var(--mono); }
.chip.th b { font-family: var(--mono); font-size: 14px; }
.chip.nav { color: #cfc8b4; }
.chip.nav:hover { border-color: var(--accent); color: var(--text); }
.leftcol button.sep { margin-top: 8px; }
.leftcol .zoom { height: 40px; }
.hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font: 600 11px var(--pix); color: var(--muted2); background: #12110fc0; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; letter-spacing: .3px; white-space: nowrap; }
.brand .tag { margin-left: 4px; }

/* the selected robot card */
.sel { background: var(--card); border: 1px solid var(--accent-dim); border-radius: 10px; padding: 10px 12px; margin: 12px 12px 0; display: flex; gap: 10px; align-items: flex-start; }
.sel .lv-pt { width: 48px; height: 48px; }
.sel .lv-pt canvas { max-width: 44px; max-height: 48px; }
.sel h3 { font: 700 17px var(--pix); margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.sel .where { color: #cfc8b4; font-size: 12px; margin-bottom: 6px; }
.sel .kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font: 500 11.5px var(--sans); }
.sel .kv span:nth-child(odd) { color: var(--muted); }
.sel .kv span:nth-child(even) { font-family: var(--mono); color: var(--text); }
.sel .x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }

/* lists in the panel and the sections */
.jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jobs li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.jobs li.full { opacity: .6; }
.jobs .lv-n b { font: 700 13px var(--pix); }
.jobs .lv-n small { white-space: normal; }
.jobs .pay { font: 700 15px var(--pix); color: var(--num); white-space: nowrap; }
.jobs .pay small { color: var(--muted2); font: 500 10px var(--sans); margin-left: 2px; }
.jobs .tag { white-space: nowrap; }
.tag.full { color: var(--down); border-color: #5a3330; }
.tag.house { color: var(--num); border-color: #5a4a1e; }
.lv-lb li { cursor: default; }
.lv-lb li b.num { margin-left: auto; font: 700 14px var(--mono); color: var(--num); white-space: nowrap; }
.lv-lb li b.num small { color: var(--muted2); font: 500 10px var(--sans); }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--muted); font: 600 11px var(--sans); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 5px 6px; border-bottom: 1px solid #38322d80; }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl td.n { color: var(--num); }
.lv-empty { margin: 4px 0; }
.lv-how.rules li { font-size: 12.5px; }
.lv-how .num { font-family: var(--mono); color: var(--num); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin-top: 10px; }
.prices .kpi b { font-family: var(--mono); font-size: 15px; }
.swatch { display: inline-block; width: 9px; height: 9px; border: 1px solid #0b0a09; vertical-align: -1px; margin-right: 1px; }
.field label { display: block; font: 600 11px var(--sans); color: var(--muted); margin: 10px 0 4px; }
.field input { width: 100%; height: 36px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; padding: 0 10px; font: 500 13.5px var(--mono); }
.field input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.err { color: var(--down); font: 600 12px var(--sans); }
.pre { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; color: #cfc8b4; margin: 0; }
.pre i { color: var(--num); font-style: normal; }
.pre u { color: var(--muted2); text-decoration: none; }
.fine { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; line-height: 1.4; }
.fine b { color: var(--text); font-weight: 600; }
.joined { margin-top: 8px; }
.joined .line { font-size: 12.5px; color: #cfc8b4; margin: 0 0 8px; }
.joined .line b { color: var(--num); font-family: var(--pix); }
.lv-sec h3 .muted { font-family: var(--sans); }
.kpi b.mono { font-family: var(--mono); font-size: 15px; }

/* ---- the sections below the fold (landing) ---- */
.page { position: relative; z-index: 2; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -20px 40px #0b0a09; }
.sec { max-width: 1120px; margin: 0 auto; padding: 30px 16px 8px; }
.sec:last-of-type { padding-bottom: 24px; }
.sec > .lbh { font-size: 22px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec > .lbh .muted { font: 500 13px var(--sans); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.card h4 { font: 700 15px var(--pix); color: var(--text); margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.card h4 .muted { font: 500 11.5px var(--sans); }
.card.wide { grid-column: 1 / -1; }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.endpoints { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font: 12px/1.6 var(--mono); color: #cfc8b4; margin-top: 10px; }
.endpoints i { color: var(--num); font-style: normal; }
.endpoints u { color: var(--muted2); text-decoration: none; }
.foot { max-width: 1120px; margin: 0 auto; padding: 18px 16px 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font: 500 12.5px var(--sans); color: var(--muted); border-top: 1px solid var(--line); }
.foot .name { font: 700 18px var(--pix); color: var(--accent); }
.foot .ticker-name { font: 700 13px var(--pix); color: var(--num); }
.foot a { color: #cfc8b4; text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .treas { margin-left: auto; font: 500 11px var(--mono); word-break: break-all; }
.foot .chip { height: 26px; font-size: 12px; }
@keyframes slidein { 0% { opacity: 0; transform: translateY(-6px); } }
.lv-d.in { animation: slidein .3s ease-out both; }
@media (prefers-reduced-motion: reduce) { .lv-d.in { animation: none; } }

/* ---- desktop sizes ---- */
@media (min-width: 761px) {
  .panel { width: 384px; }
  body.watch .panel { width: 392px; }
}
@media (max-width: 1100px) and (min-width: 761px) { .tl { right: 420px; } .tr { flex-wrap: wrap; justify-content: flex-end; max-width: 420px; } }

/* ---- phone: world on top at 55svh, the HUD stacked under it as tabs ---- */
@media (max-width: 760px) {
  body.watch { height: auto; overflow: auto; }
  #stage { position: static; height: auto; }
  #world { position: relative; height: 55svh; min-height: 360px; }
  #game { touch-action: pan-y; }
  .tl { top: 32px; left: 8px; right: 8px; } .logo { font-size: 22px; }
  .tr { top: auto; bottom: 8px; left: 8px; right: 8px; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
  .leftcol { top: 64px; }
  .hint { display: none; }
  .chip.ca span[data-ca-value] { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel { position: static; width: auto; height: auto; max-height: none; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; background: var(--panel); inset: auto; }
  .panel .pbody { overflow: visible; }
  .sel { margin: 10px 10px 0; }
  .page { box-shadow: none; }
  .sec { padding: 22px 16px 6px; }
  .cards { grid-template-columns: 1fr; }
  .foot .treas { margin-left: 0; }
}

/* ---- round 2 fixes ---- */
.lv-d > .lv-pt, .sel > .lv-pt { flex: none; }
.lv-pt canvas { image-rendering: pixelated; }
.chip.dim { opacity: 1; color: var(--muted); }
.chip.dim .k { background: var(--line); color: var(--muted2); }
.chip.dim svg { opacity: .6; }
.logo { text-transform: uppercase; color: var(--num); text-shadow: 0 2px #3d2c0a; }
.leftcol a { border: 1px solid var(--line); color: #cfc8b4; background: #1b1815eb; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 3px; width: 54px; height: 54px; display: flex; box-shadow: 0 2px #0006; text-decoration: none; }
.leftcol a span { font: 600 11.5px var(--pix); letter-spacing: .3px; }
.leftcol a:hover { border-color: var(--accent); color: var(--num); }
.leftcol button:hover, .leftcol button.hl { color: var(--num); }
.leftcol .zoom span { font: 700 22px/1 var(--pix); }
.hint { left: 78px; transform: none; bottom: 12px; }
.btn.primary { color: #12110f; }
.btn.big { box-shadow: 0 3px #6b4f19; }
.btn.big:active { box-shadow: 0 1px #6b4f19; }
.lv-hero { background: var(--card); }
.lv-hero h2 em { color: var(--num); text-shadow: 2px 2px #3d2c0a; }
.logo { text-shadow: 0 2px #3d2c0a; }
@media (max-width: 760px) { .leftcol a { width: 44px; height: 44px; } .leftcol a span { display: none; } .leftcol .zoom { height: 44px; } }
@media (max-width: 760px) { .leftcol .zoom span { display: inline; } .leftcol .zoom { height: 36px; } }

/* ---- round 4 fixes ---- */
/* the X chip is the icon alone until an account is posted (then the label is the @handle) */
.chip.xlink.dim [data-x-label] { display: none; }
.chip.explain { color: var(--text); }
.card .pre[data-text="sampleData"] { max-height: 190px; overflow: auto; }
.terms .kpi b { white-space: normal; font-size: 13.5px; line-height: 1.3; overflow: visible; }

/* ---- v5: five tabs, the X and CA chips, the game page fills the screen with painted world ---- */
.tabs.five button { padding-left: 6px; padding-right: 6px; font-size: 12.5px; }
button.chip.nav { cursor: pointer; }
.chip.ca.done .c { color: var(--up, #7fe0a8); }
.chip.xlink { color: var(--text); text-decoration: none; gap: 6px; font: 600 12.5px var(--mono); }
.chip.xlink:hover, .chip.ca:hover { border-color: var(--accent); }
body.watch, #stage, #world { background: #1c2619; }
@media (max-width: 760px) { .chip.xlink [data-x-label] { display: none; } .tabs.five button { font-size: 12px; } }