/* Burn Run host page (quaig.ai Laser Lab). The game is the iframe; this page holds the wallet chip, the board, your orders and
   the Mint, Claim and Upload sheets. Built pages do not load the site stylesheet, so this file carries its own tokens. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&family=Share+Tech+Mono&display=swap");

:root {
  color-scheme: light;
  --bg: #e7e4dd;
  --panel: #f8f7f3;
  --line: #cfc9bd;
  --ink: #1c1f23;
  --dim: #4f555d;
  --field: #ffffff;
  --field-line: #6b707a;
  --btn: #ffffff;
  --btn-line: #8d8f94;
  --hot: #ffb531;
  --hot-ink: #14100a;
  --hot-line: #c98a0e;
  --focus: #2b5d8c;
  --ok: #1f6b3a;
  --bad: #9b2c1f;
  --gold-bg: rgba(255, 181, 49, .18);
  --top-h: 40px;
  --bar-h: calc(44px + env(safe-area-inset-top, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111316;
    --panel: #171a1f;
    --line: #2f343c;
    --ink: #e7e9ec;
    --dim: #aab1bb;
    --field: #0f1215;
    --field-line: #8a919c;
    --btn: #1f242b;
    --btn-line: #5a616b;
    --focus: #8cb8e8;
    --ok: #7fd49a;
    --bad: #ff9c8a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111316;
  --panel: #171a1f;
  --line: #2f343c;
  --ink: #e7e9ec;
  --dim: #aab1bb;
  --field: #0f1215;
  --field-line: #8a919c;
  --btn: #1f242b;
  --btn-line: #5a616b;
  --focus: #8cb8e8;
  --ok: #7fd49a;
  --bad: #ff9c8a;
}

html, body { margin: 0; background: var(--bg); }
body { color: var(--ink); font: 400 15px/1.45 "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif; overflow-x: hidden; }
.brh, .brh * { box-sizing: border-box; }
.brh [hidden] { display: none !important; }
.brh a { color: inherit; text-underline-offset: 3px; }
.brh a:focus-visible, .brh button:focus-visible, .brh input:focus-visible, .brh select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the top bar: the name and the wallet chip (Always a Disconnect) */
.brh-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--top-h);
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brh-name { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.brh-sub { color: var(--dim); font-weight: 600; }
.brh-wallet { display: flex; align-items: center; gap: 6px; flex: none; }
/* on a phone the site's back bar and this bar are one bar: the back link moves in here (review fix: two bars pushed Play off screen) */
.brh-back { display: none; flex: none; padding: 6px 4px; font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  :root { --top-h: calc(44px + env(safe-area-inset-top, 0px)); }
  .qe-back-bar { display: none !important; }
  .brh-top { padding-top: env(safe-area-inset-top, 0px); }
  .brh-back { display: inline-block; }
  .brh-sub { display: none; }
  .brh-stage iframe { height: max(360px, calc(100vh - var(--top-h))); height: max(360px, calc(100dvh - var(--top-h))); }
}
.brh-test { margin: 0; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); background: #6b1f14; color: #fff; font-weight: 600; font-size: 14px; }
.brh-hostnote { margin: 0; font-weight: 600; }
/* Always a Disconnect, while running: a small chip in the bottom corner, outside the steering controls */
.brh-runchip { display: none; }
html.br-running .brh-runchip { display: flex; position: fixed; right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 20; }
html.br-running .brh-runchip .brh-btn { min-height: 30px; padding: 4px 10px; background: var(--panel); opacity: .92; font-size: 13px; }
.brh-addr { font: 400 14px/1 "Share Tech Mono", ui-monospace, Consolas, monospace; }

/* the game: the screen under the bars; while the burner runs the bars step aside and the game takes the whole screen */
.brh-stage { background: #0c0f11; }
.brh-stage iframe {
  display: block; width: 100%; border: 0;
  height: max(360px, calc(100vh - var(--bar-h) - var(--top-h)));
  height: max(360px, calc(100dvh - var(--bar-h) - var(--top-h)));
}
html.br-running .qe-back-bar, html.br-running .brh-top, html.br-running .brh-test { display: none !important; }
html.br-running .brh-stage iframe { height: 100vh; height: 100dvh; }
html.br-running body { overflow: hidden; }

/* buttons */
.brh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--btn-line); border-radius: 8px; background: var(--btn); color: var(--ink);
  font: 600 15px/1.2 "Barlow", "Helvetica Neue", Arial, sans-serif; text-decoration: none; cursor: pointer;
}
.brh-btn:disabled { opacity: .5; cursor: not-allowed; }
.brh-btn-quiet { min-height: 32px; padding: 4px 10px; font-size: 14px; background: transparent; }
.brh-top .brh-btn-quiet { min-height: 30px; }
.brh-btn-hot { background: var(--hot); border-color: var(--hot-line); color: var(--hot-ink); }
.brh-row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.brh-row-btns.brh-end { justify-content: flex-end; }

/* the sections under the game */
.brh-wrap { max-width: 980px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px; }
.brh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.brh-card h2, .brh-sheet h2 { margin: 0; font: 700 20px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.brh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.brh-head h2 { margin-right: auto; }
.brh-dim { margin: 8px 0 0; color: var(--dim); font-size: 14px; }
.brh-fine { margin: 10px 0 0; color: var(--dim); font-size: 13px; }
.brh-msg { margin: 10px 0 0; min-height: 1.2em; font-size: 14px; }
.brh-msg:empty { margin: 0; min-height: 0; }
.brh-unlock { border-color: var(--hot-line); background: linear-gradient(var(--gold-bg), var(--gold-bg)), var(--panel); }
.brh-unlock p { margin: 8px 0 0; }

.brh-tabs, .brh-seg { display: inline-flex; gap: 0; border: 1px solid var(--btn-line); border-radius: 8px; overflow: hidden; }
.brh-seg { display: flex; flex-wrap: wrap; margin: 10px 0 0; }
.brh-tab { min-height: 36px; padding: 4px 14px; border: 0; background: transparent; color: var(--ink); font: 600 14px/1.2 "Barlow", sans-serif; cursor: pointer; }
.brh-seg .brh-tab { flex: 1 1 auto; }
.brh-tab[aria-pressed="true"] { background: var(--hot); color: var(--hot-ink); }

.brh-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.brh-row { display: grid; grid-template-columns: 3.2em 3.6em minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--line); }
.brh-row:first-child { border-top: 0; }
.brh-rank { font: 700 18px/1 "Barlow Condensed", sans-serif; }
.brh-who { font: 400 18px/1 "Share Tech Mono", ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.brh-cells { font: 400 15px/1.2 "Share Tech Mono", ui-monospace, Consolas, monospace; }
.brh-tag { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.brh-day { font-size: 12px; color: var(--dim); }
.brh-row.is-top { background: var(--gold-bg); border-radius: 8px; }
.brh-row.is-mine .brh-who { text-decoration: underline; text-underline-offset: 4px; }
.brh-empty { padding: 8px 4px; color: var(--dim); }

.brh-orders { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.brh-order { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.brh-order-head { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.brh-foot { color: var(--dim); font-size: 14px; }
.brh-foot p { margin: 0 0 6px; }

/* sheets: a bottom sheet on a phone, a card on a wide screen */
.brh-sheet {
  width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.brh-sheet-wide { width: min(760px, calc(100vw - 24px)); }
.brh-sheet::backdrop { background: rgba(8, 10, 14, .6); }
.brh-sheet-in { padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
@media (max-width: 600px) {
  .brh-sheet, .brh-sheet-wide { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; border-radius: 14px 14px 0 0; border-width: 1px 0 0; }
}
.brh-sum { margin: 6px 0 0; font: 400 15px/1.3 "Share Tech Mono", ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.brh-methods { display: grid; gap: 8px; margin: 12px 0 0; }
.brh-pay { width: 100%; min-height: 52px; font-size: 16px; }
/* Pay in #PIXEL: the mark leads the label (owner 10-15). The text label stays for clarity and screen readers. */
.brh-pay[data-method="pixel"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.brh-pay[data-method="pixel"]::before { content: ""; flex: none; width: 24px; height: 23px; background: url("/lab/burn-run/normies-logo.svg") center / contain no-repeat; }
.brh-walletline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font: 400 14px/1.2 "Share Tech Mono", ui-monospace, Consolas, monospace; }
.brh-wallets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.brh-wallet-pick { width: 100%; justify-content: flex-start; }
.brh-wallet-pick img { width: 24px; height: 24px; border-radius: 4px; }
/* WalletConnect entry: a two-line button (name + what it covers), nudged with the gold accent so it reads as the primary
   path when no in-browser wallet is present. */
.brh-wallet-wc { flex-direction: column; align-items: flex-start; gap: 2px; border-color: var(--hot-line); background: linear-gradient(var(--gold-bg), var(--gold-bg)), var(--panel); }
.brh-wallet-sub { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim); }
/* the deep-link block is now a collapsed secondary fallback, not the default */
.brh-mobile { margin: 12px 0 0; }
.brh-mobile > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--dim); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.brh-mobile > summary::-webkit-details-marker { display: none; }
.brh-mobile > summary::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; }
.brh-mobile[open] > summary::after { content: "\2212"; }
.brh-mobile > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.brh-mobile .brh-btn { flex: 1 1 200px; }

.brh-steps { margin: 12px 0 0; padding-left: 22px; }
.brh-step { margin: 6px 0; color: var(--dim); }
.brh-step.is-now { color: var(--ink); font-weight: 600; }
.brh-step.is-now::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: brh-spin .8s linear infinite; }
.brh-step.is-ok { color: var(--ok); font-weight: 600; }
.brh-step.is-fail { color: var(--bad); }
@keyframes brh-spin { to { transform: rotate(360deg); } }

/* forms */
.brh-form { display: grid; gap: 10px; margin: 12px 0 0; }
.brh-form label { display: grid; gap: 4px; font-size: 14px; color: var(--dim); min-width: 0; }
.brh-form input, .brh-form select {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 8px;
  background: var(--field); color: var(--ink); font: 400 16px/1.2 "Barlow", "Helvetica Neue", Arial, sans-serif;
}
.brh-form [aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.brh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.brh-note { margin: 0; font-weight: 600; }
.brh-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 15px; }
.brh-check input { width: 22px; height: 22px; margin: 0; flex: none; }

/* the upload sheet */
.brh-file { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; font-weight: 600; }
.brh-file input { max-width: 100%; font: inherit; }
.brh-crop { margin: 12px 0 0; max-width: 420px; touch-action: none; }
.brh-crop canvas { display: block; width: 100%; height: auto; border-radius: 8px; cursor: grab; background: #000; }
.brh-range { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--dim); }
.brh-range input { width: 100%; min-width: 0; }
.brh-tone { display: grid; gap: 0; margin: 4px 0 0; }
.brh-tone .brh-btn { justify-self: start; margin: 8px 0 0; }
.brh-preview-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 10px; align-items: start; margin: 10px 0 0; }
#upload-preview { display: block; width: 100%; height: auto; border-radius: 6px; image-rendering: auto; }
#upload-loupe { display: block; width: 160px; height: 160px; border-radius: 6px; border: 1px solid var(--line); image-rendering: pixelated; }
@media (max-width: 520px) { .brh-preview-wrap { grid-template-columns: minmax(0, 1fr); } #upload-loupe { justify-self: center; } }
.brh-rules { margin: 14px 0 0; padding: 10px 12px; border-left: 4px solid var(--hot); background: var(--gold-bg); border-radius: 6px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .brh-step.is-now::after { animation: none; }
}

/* Burn Run mark: Quaig Claw perched on the header with a hot muzzle flash toward the name — a compact echo of the game's title art.
   (The full claw-beam-Pink title lives on the play page's BURN RUN hero; the top bar is only 40px, so here it is just the claw.) */
.brh-name .brh-claw {
  display: inline-block; vertical-align: middle; position: relative;
  width: 24px; height: 24px; margin: -2px 9px 0 0; flex: none;
  background: url("/lab/burn-run/cast/claw.png") 0 0 / 384px 360px no-repeat;   /* idle row 0, frame 0; sheet 1024x960 at 24px/frame */
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.brh-name .brh-claw::after {                         /* the laser muzzle flash, firing toward "Burn Run" */
  content: ""; position: absolute; top: 54%; left: 100%; width: 9px; height: 3px; transform: translateY(-50%);
  border-radius: 2px; background: linear-gradient(90deg, #ff6a35, rgba(255, 178, 87, 0));
  box-shadow: 0 0 6px rgba(255, 74, 26, .85);
}

/* ---- Burn & ship: step header, prepaid banner, address-confirm card, success panel, and the persistent ship reminder ---- */
.brh-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ok); border-radius: 10px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; }
.brh-remind .brh-btn { margin-left: auto; }
.brh-steps-head { display: flex; gap: 6px; list-style: none; margin: 12px 0 4px; padding: 0; font: 600 12px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.brh-steps-head li { flex: 1 1 0; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--panel-line); color: var(--dim); background: var(--panel); min-width: 0; }
.brh-steps-head .brh-step-n { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; }
.brh-steps-head li[data-on="1"] { color: var(--hot-ink); background: var(--hot); border-color: var(--hot-line); }
.brh-steps-head li[data-done="1"] { color: var(--ok); border-color: var(--ok); }
.brh-prepaid { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--ok); border-radius: 8px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; }
.brh-confirm { margin: 12px 0 0; padding: 12px; border: 1px solid var(--hot-line); border-radius: 12px; background: linear-gradient(var(--gold-bg), var(--gold-bg)), var(--panel); }
.brh-confirm-h { margin: 0 0 8px; font-weight: 700; }
.brh-addr-card { display: block; font-style: normal; white-space: pre-line; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel); line-height: 1.5; }
.brh-confirm-btns { margin-top: 12px; flex-direction: column; align-items: stretch; }
.brh-btn-big { min-height: 52px; font-size: 16px; font-weight: 700; }
.brh-success { text-align: center; }
.brh-success-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.brh-check { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ok); color: #06240f; font-size: 32px; font-weight: 700; }
.brh-success-h { margin: 0; font: 700 26px/1.05 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.brh-success-sub { margin: 4px 0 0; color: var(--dim); }
.brh-next-h { margin: 14px 0 6px; font: 600 12px/1.2 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-align: left; }
.brh-next { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 6px; }
.brh-next li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.brh-next li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: 0 0 auto; }
.brh-next li.brh-next-wait::before { content: "•"; color: var(--dim); }
.brh-next li a { color: var(--link, var(--hot-ink)); }
.brh-shipto { margin: 12px 0 0; padding: 8px 12px; border: 1px dashed var(--panel-line); border-radius: 8px; text-align: left; font-size: 14px; color: var(--ink); white-space: pre-line; }
.brh-order-finish { color: var(--ok); font-weight: 600; }

/* ---- "Approve in your wallet" card: shown before every wallet request so the request fires on the tap (user gesture) ---- */
.brh-approve .brh-sheet-in { max-width: 420px; }
.brh-approve-detail { margin: 10px 0 0; font-size: 16px; color: var(--ink); }
.brh-approve-wait { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--dim); font-size: 14px; }
.brh-approve-hint { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.brh-spinner { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid var(--panel-line); border-top-color: var(--hot-line); border-radius: 50%; animation: brh-spin .8s linear infinite; }
@keyframes brh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .brh-spinner { animation: none; border-top-color: var(--hot-line); } }

/* the Agentic Quaig thanks + awakening meter sits below the facts-first success panel */
.brh-success .aq-thanks { margin-top: 18px; text-align: left; border-top: 1px solid var(--panel-line); padding-top: 14px; }