/* PIXEL REVEAL (px-) — all surfaces, scoped selectors (docs/GAME_MODULES.md).
   Tokens only; gold/orange appear exclusively inside the brand gradients. */

/* ========================= BIG SCREEN (wall) ============================= */

.screen-body .px-screen {
  width: 100%; max-width: 1600px; height: 100%;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4vh;
}
.screen-body .px-main {
  display: grid; grid-template-columns: auto 1fr; gap: 3.5vw;
  align-items: center; width: 100%;
}
.screen-body .px-left { display: flex; justify-content: center; }

/* The mosaic frame: notched key-icon shape, warm gradient hairline via the
   nested-clip trick (gradient ::before under an inset dark ::after). */
.screen-body .px-frame {
  --notch: 3.4vh;
  position: relative;
  width: 56vh; height: 56vh;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  box-shadow: 0 0 90px -18px var(--gold-glow), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.screen-body .px-frame::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-warm);
}
.screen-body .px-frame::after {
  content: ''; position: absolute; inset: 3px;
  background: rgba(var(--tint-ink), 0.94);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}
.screen-body .px-frame .px-canvas {
  position: absolute; inset: 2.2vh; width: calc(100% - 4.4vh); height: calc(100% - 4.4vh);
  z-index: 2; image-rendering: pixelated;
}
.screen-body .px-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh;
}
.screen-body .px-fallback img { width: 30%; height: auto; opacity: 0.45; }
.screen-body .px-fallback-text {
  font-family: var(--font-narrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-dim); font-size: calc(2.9 * var(--wt));
}

.screen-body .px-pop { animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.screen-body .px-hidden { display: none; }

/* Intro tease — centered, heavy mosaic, lean-in copy. */
.screen-body .px-intro { flex-direction: column; }
.screen-body .px-intro .px-frame { width: 46vh; height: 46vh; }
.screen-body .px-intro-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(5.2 * var(--wt)); line-height: 1; text-align: center; color: var(--text);
}

/* Right column: headline, ring, option tiles, answered counter. */
.screen-body .px-right {
  display: flex; flex-direction: column; align-items: center; gap: 2.4vh;
  min-width: 0;
}
/* Timer ring — IN-FLOW at the top of the right column. The shared .q-ring is
   position:absolute; left:0, which escaped to the far-left and sat over the
   mosaic image. RELATIVE (not static) parks it in flow here while still being
   the containing block for the absolutely-positioned .ring-num inside. */
.screen-body .px-ring { display: flex; justify-content: center; transition: opacity 0.4s ease; }
.screen-body .px-ring .q-ring { position: relative; left: auto; top: auto; transform: none; }
.screen-body .px-ring.px-ring-done { opacity: 0.28; } /* time's up on reveal — fade, don't reflow */
.screen-body .q-answered.px-gone { display: none; }
.screen-body .px-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: calc(4.6 * var(--wt)); line-height: 1; text-align: center; color: var(--text);
}
.screen-body .px-options { display: flex; flex-direction: column; gap: 1.8vh; width: 100%; }
.screen-body .px-option {
  display: flex; align-items: center; gap: 18px; padding: 2.1vh 2.6vh; border-radius: 14px;
  font-size: calc(3.5 * var(--wt)); font-weight: 700; color: var(--ewc-off-white); position: relative; overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s, opacity 0.3s;
  animation: fadeUp 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.screen-body .px-option .shape { font-size: calc(3.6 * var(--wt)); }
.screen-body .px-option .px-opt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-body .px-option .px-opt-count { font-family: var(--font-display); font-weight: 900; font-size: calc(3.4 * var(--wt)); opacity: 0.95; }
.screen-body .px-option.dim { opacity: 0.25; }
/* Milky ring + green glow so the correct tile reads even when it's the green option. */
.screen-body .px-option.correct {
  box-shadow: 0 0 0 5px var(--ewc-off-white), 0 0 36px -2px var(--success), 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  transform: scale(1.02);
}
.screen-body .px-option .px-opt-bar {
  position: absolute; left: 0; bottom: 0; height: 6px;
  background: rgba(255, 255, 255, 0.6); transition: width 0.5s ease;
}

/* Light (championship) variant keeps type legible on the off-white render.
   (The mosaic frame + option tiles keep their own dark/colored plates.) */
.screen-body.light .px-title,
.screen-body.light .px-intro-title { color: var(--ewc-charcoal); }

/* ============================ PLAYER (phone) ============================= */

.play-body .px-hidden { display: none; }
.play-body .px-mini {
  --notch: 12px;
  position: relative; width: 40vw; max-width: 170px; aspect-ratio: 1 / 1;
  margin: 0 auto; flex: none;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}
.play-body .px-mini::before { content: ''; position: absolute; inset: 0; background: var(--grad-warm); }
.play-body .px-mini::after {
  content: ''; position: absolute; inset: 2px;
  background: rgba(var(--tint-ink), 0.94);
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}
.play-body .px-mini .px-canvas {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  z-index: 2; image-rendering: pixelated;
}
.play-body .px-mini-lg { width: 56vw; max-width: 240px; }
.play-body .px-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.play-body .px-fallback-text { color: var(--text-dim); font-size: 20px; letter-spacing: 0.2em; }

.play-body .px-play-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.play-body .px-play-side { flex: 1; min-width: 0; }
.play-body .px-play-prompt { font-size: 17px; text-align: left; margin-bottom: 10px; }
.play-body .px-play-side .q-timer-row { justify-content: flex-start; margin-bottom: 0; }
.play-body .result-card .px-mini { margin-bottom: 6px; }

/* ============================ ADMIN (control room) ======================= */

#dash .px-hidden-store { display: none; }
#dash .px-adm-builder { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
#dash .px-adm-row {
  display: grid; grid-template-columns: 26px minmax(240px, 1.1fr) minmax(280px, 1.4fr) auto;
  gap: 12px; align-items: start;
  padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2);
}
/* The round index is the same object as Higher/Lower's `.rnd-n` — a digit in a
   26px gutter — and it was still shouting in the retired display face at 900/
   18px. admin.css:4243-4246 fixed exactly this for `.em-round-num` and
   `.sd-round-title` and could not reach here: module stylesheets load AFTER
   admin.css, so this rule won whatever the console said. Same values as
   `#dash .rnd-n` (admin.css:2573-2577): 11px narrow, tabular, --text-faint.
   padding-top goes 8 → 10 because the shorter line box has to re-centre
   against the 34px control beside it (`#dash input { min-height: 34px }`,
   admin.css:2354). Still `#dash`-scoped, so /screen and /play never see it. */
#dash .px-adm-num {
  font-family: var(--font-narrow); font-weight: 700; font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint); padding-top: 10px; text-align: center;
}
#dash .px-adm-imgcol { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
#dash .px-adm-imgrow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Left-align the Pick button — a full-width centered ghost label reads as floating text. */
#dash .px-adm-imgrow .btn { align-self: flex-start; }
#dash .px-adm-thumb {
  width: 64px; height: 64px; flex: none; object-fit: contain;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 4px;
}
#dash .px-adm-thumb-broken { opacity: 0.15; }
#dash .px-adm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0; }
#dash .px-adm-opt { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Radios: theme.css custom controls (18px), green when picked via admin.css — no overrides here. */
#dash .px-adm-opt input[type='text'] { flex: 1; min-width: 0; }
#dash .px-adm-remove { align-self: start; margin-top: 4px; }
#dash .px-adm-toolbar { display: flex; gap: 9px; flex-wrap: wrap; margin: 12px 0 16px; }

#dash .px-adm-live { display: flex; flex-direction: column; gap: 8px; }
#dash .px-adm-livehead { display: flex; gap: 12px; align-items: center; }
#dash .px-adm-answerline { color: var(--text-dim); font-size: 14px; }
#dash .px-adm-answerline b { color: var(--text); }

@media (max-width: 980px) {
  #dash .px-adm-row { grid-template-columns: 26px 1fr auto; }
  #dash .px-adm-opts { grid-column: 2 / 3; grid-template-columns: 1fr; }
}

/* ===== Wall contrast hardening (busy KV) — screen-scoped, append-only ===== */
/* The big GEAR titles sit directly on the key visual with no panel behind
   them, so on the dramatic/busy background the off-white type reads weakly.
   A soft dark shadow lifts them off the render. Contrast only — no change to
   layout, size, color or the frame/option-tile plates (already solid). */
.screen-body .px-title,
.screen-body .px-intro-title {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}

/* ---------- Mosaic + question (audit) ----------
   The picture is the whole puzzle and it was the SHORTER column: 56vh of
   mosaic beside a ~69vh answer column, so it floated with dead bands above
   and below inside its own column. 64vh still does not set the scene
   height, so it costs nothing. The question was only 1.3x its answers
   where the shared trivia board runs 1.6x; the extra ~13px is paid back
   out of the right column's gaps, so the column height is unchanged. */
.screen-body .px-frame { width: 64vh; height: 64vh; }
.screen-body .px-title { font-size: calc(5.8 * var(--wt)); }
.screen-body .px-right { gap: 2vh; }

/* Shown on the PHONE while the picture is still secret. Deliberately not the
   "···" failure tile: nothing is broken, the game is simply happening on the
   wall, and a fan glancing down should be sent back up. */
.play-body .px-onwall {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 8px;
  color: var(--text-dim);
}
.play-body .px-onwall-ic { font-size: 26px; line-height: 1; opacity: 0.7; }
.play-body .px-onwall-text { font-size: 12px; line-height: 1.25; letter-spacing: 0.02em; }



/* Operator round control and server-backed history. */
#dash #tab-pixel .px-op { display: grid; gap: 14px; min-width: 0; font: 400 12px/1.5 var(--font-body); }
#dash #tab-pixel .px-op-flow { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 6px; }
#dash #tab-pixel .px-op-flow li { padding: 4px 9px; border-radius: 5px; background: var(--surface-2); color: var(--text-faint); }
#dash #tab-pixel .px-op-flow li.is-current { color: var(--text); background: var(--surface-3); box-shadow: inset 0 -2px var(--gold); }
#dash #tab-pixel .px-op-flow li.is-done { color: var(--text-dim); }
#dash #tab-pixel .px-op-current { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 14px; background: var(--surface); min-width: 0; }
#dash #tab-pixel .px-op-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#dash #tab-pixel .px-op-heading span { color: var(--text-dim); }
#dash #tab-pixel .px-op-question { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; margin-bottom: 10px; white-space: pre-wrap; }
#dash #tab-pixel .px-op-body { display: grid; gap: 12px; }
#dash #tab-pixel .px-op-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px 16px; margin: 0; padding: 0; }
#dash #tab-pixel .px-op-metrics dt { font-size: 11px; color: var(--text-faint); }
#dash #tab-pixel .px-op-metrics dd { margin: 3px 0 0; color: var(--text); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
#dash #tab-pixel .px-op-split { display: grid; gap: 8px; }
#dash #tab-pixel .px-op-option-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
#dash #tab-pixel .px-op-option-head span { min-width: 0; overflow-wrap: anywhere; }
#dash #tab-pixel .px-op-option-head b { flex: none; font-weight: 450; font-variant-numeric: tabular-nums; color: var(--text-dim); }
#dash #tab-pixel .px-op-option.is-correct .px-op-option-head span { color: var(--success); }
#dash #tab-pixel .px-op-track { height: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
#dash #tab-pixel .px-op-track > span { display: block; height: 100%; background: var(--gold); transition: width 160ms linear; }
#dash #tab-pixel .px-op-progress { display: grid; gap: 5px; color: var(--text-dim); }
#dash #tab-pixel .px-op-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#dash #tab-pixel .px-op-actions .btn { height: auto; min-height: 34px; white-space: normal; text-align: left; }
#dash #tab-pixel .px-op-history { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
#dash #tab-pixel .px-op-history h4 { margin: 0 0 8px; font: 500 12px/1.5 var(--font-body); color: var(--text-dim); }
#dash #tab-pixel .px-op-empty { margin: 0; color: var(--text-faint); }
#dash #tab-pixel .px-op-round { padding: 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
#dash #tab-pixel .px-op-round summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
#dash #tab-pixel .px-op-round summary b { font-weight: 500; flex: 1; }
#dash #tab-pixel .px-op-round summary span { color: var(--text-faint); }
#dash #tab-pixel .px-op-round summary::before { content: '›'; color: var(--text-faint); }
#dash #tab-pixel .px-op-round[open] summary::before { content: '⌄'; }
#dash #tab-pixel .px-op-round summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dash #tab-pixel .px-op-round > .px-op-body { padding-bottom: 14px; }
#dash #tab-pixel .px-op-history-question { margin-bottom: 10px; color: var(--text-dim); overflow-wrap: anywhere; }
#dash #tab-pixel .px-op-image { display: block; width: 80px; height: 64px; object-fit: contain; margin-bottom: 10px; border-radius: 6px; background: var(--bg); }
#dash #tab-pixel .px-op-media { display: block; margin-bottom: 10px; color: var(--text-dim); }
#dash #tab-pixel .px-op-survivors { margin: 0; }
#dash #tab-pixel .px-op-survivors figcaption { margin-bottom: 8px; color: var(--text-dim); }
#dash #tab-pixel .px-op-chart { display: flex; align-items: end; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
#dash #tab-pixel .px-op-chart > div { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 3px; min-width: 22px; flex: 1; }
#dash #tab-pixel .px-op-chart span { width: 100%; max-width: 28px; background: var(--gold); border-radius: 3px 3px 0 0; }
#dash #tab-pixel .px-op-chart b, #dash #tab-pixel .px-op-chart small { font-size: 10px; font-weight: 400; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { #dash #tab-pixel .px-op-track > span { transition: none; } }

/* Pixel operator workspace: media and reveal progress only. */
#dash #tab-pixel .px-workspace-image { display:block; width:100%; height:240px; object-fit:contain; margin:16px 0; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
#dash #tab-pixel .px-empty-content { display:flex; align-items:center; justify-content:space-between; gap:18px; }
#dash #tab-pixel .px-empty-content p { margin:0; }
#dash #tab-pixel .px-reveal-progress { display:grid; gap:10px; margin:0 0 18px; color:var(--text-dim); font-size:11px; }
#dash #tab-pixel .px-final-copy { margin:20px 0; }
#dash #tab-pixel .lfs-response { margin:0 0 16px; }
#dash #tab-pixel .lfs-round-desk > .px-workspace-image { max-height:220px; }
#dash #tab-pixel .lfs-trail-rows { grid-auto-columns:minmax(185px,1fr); }
@media(max-width:560px) { #dash #tab-pixel .px-empty-content { align-items:flex-start; flex-direction:column; } #dash #tab-pixel .px-workspace-image { height:180px; } }

/* Pixel audience: the picture owns the largest well; labels/results have
   independent reserved lanes. Dimensions scale with the shared 1920 canvas. */
.tb-shell .pb-round { display:grid;grid-template-rows:100px minmax(0,1fr);gap:24px; }
.tb-shell .pb-heading { display:flex;align-items:center;justify-content:center;text-align:center;font:700 72px/1.12 var(--tb-font);overflow-wrap:anywhere; }
.tb-shell .pb-body { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:42px;min-height:0; }
.tb-shell .pb-picture { display:grid;grid-template-rows:minmax(0,1fr) 82px;gap:22px;min-height:0; }
.tb-shell .pb-image-well { position:relative;min-height:0;overflow:hidden;border-radius:28px;background:var(--tb-base);border:1px solid var(--tb-border); }
.tb-shell .pb-canvas { display:block;width:100%;height:100%;object-fit:contain; }
.tb-shell .pb-image-fallback { position:absolute;inset:60px;display:flex;align-items:center;justify-content:center;text-align:center;font:600 40px/1.3 var(--tb-font);color:var(--tb-muted); }
.tb-shell .pb-image-well:not([data-media-state='ready']) .pb-canvas { visibility:hidden; }
.tb-shell .pb-image-well[data-media-state='ready'] .pb-image-fallback { visibility:hidden; }
.tb-shell .pb-progress { display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:60px 12px;gap:10px 20px;align-items:center; }
.tb-shell .pb-progress-label { --tb-fit-max:44;--tb-fit-min:36;display:flex;align-items:center;height:60px;font:600 44px/1.2 var(--tb-font);overflow-wrap:anywhere; }
.tb-shell .pb-progress-number { font:700 60px/1 var(--tb-font);text-align:right;font-variant-numeric:tabular-nums; }
.tb-shell .pb-progress-track { grid-column:1/-1;height:12px;background:var(--tb-border);border-radius:6px;overflow:hidden; }
.tb-shell .pb-progress-track > span { display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--tb-blue); }
.tb-shell .pb-answer-area { position:relative;display:grid;grid-template-rows:minmax(0,1fr) 82px;gap:22px;min-height:0; }
.tb-shell .pb-options { display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:14px;min-height:0;opacity:1;transition:opacity .3s ease .26s,transform .45s ease .26s; }
.tb-shell .pb-options[data-count='2'] { grid-template-rows:repeat(2,minmax(0,1fr)); }
.tb-shell .pb-options[data-count='3'] { grid-template-rows:repeat(3,minmax(0,1fr)); }
.tb-shell .pb-option { display:grid;grid-template-rows:minmax(0,1fr) 54px 8px;gap:4px;min-height:0;min-width:0;padding:14px 22px 0;overflow:hidden;background:var(--tb-surface);border:1px solid var(--tb-border);border-radius:20px;transition:background .4s,border-color .4s; }
.tb-shell .pb-option-caption { display:flex;gap:18px;align-items:center;min-width:0;min-height:0; }
.tb-shell .pb-letter { display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--tb-blue);color:var(--tb-white);font:700 28px/1 var(--tb-font); }
.tb-shell .pb-option-text { flex:1;display:flex;align-items:center;min-width:0;height:100%;font:600 52px/1.15 var(--tb-font);overflow-wrap:anywhere;unicode-bidi:plaintext; }
.tb-shell .pb-option-result { display:flex;justify-content:space-between;align-items:center;min-height:0;visibility:hidden; }
.tb-shell .pb-verdict { width:42px;height:42px;display:grid;place-items:center; }
.tb-shell .pb-verdict svg { display:block;width:36px;height:36px;fill:currentColor; }
.tb-shell .pb-share { display:flex;align-items:center;justify-content:flex-end;width:190px;height:54px;font:700 64px/1 var(--tb-font);font-variant-numeric:tabular-nums; }
.tb-shell .pb-share-track { visibility:hidden;height:8px;background:var(--tb-border); }
.tb-shell .pb-share-track > span { display:block;width:100%;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s ease; }
.tb-shell .pb-option.is-correct { background:var(--tb-correct-top);border-color:var(--tb-white); }
.tb-shell .pb-option.is-wrong { background:var(--tb-base);color:var(--tb-white); }
.tb-shell .pb-round[data-phase='reveal'] :is(.pb-option-result,.pb-share-track) { visibility:visible; }
.tb-shell .pb-cue { position:absolute;inset:0 0 104px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;opacity:0;visibility:hidden;transform:translateY(-18px);transition:opacity .24s,transform .24s,visibility .24s;pointer-events:none; }
.tb-shell .pb-read { display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:340px;font:700 88px/1.1 var(--tb-font);overflow-wrap:anywhere; }
.tb-shell .pb-read-note { display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:90px;font:500 36px/1.2 var(--tb-font);color:var(--tb-muted); }
.tb-shell .pb-round[data-phase='intro'] .pb-cue { opacity:1;visibility:visible;transform:none; }
.tb-shell .pb-round[data-phase='intro'] .pb-options { opacity:0;transform:translateY(24px);visibility:hidden; }
.tb-shell .pb-clock { display:flex;align-items:center;justify-content:flex-end;gap:24px;min-width:0; }
.tb-shell .pb-clock-number { display:grid;place-items:center;width:130px;height:82px;font:700 72px/1 var(--tb-font);font-variant-numeric:tabular-nums; }
.tb-shell .pb-clock-number svg { width:64px;height:64px; }
.tb-shell .pb-clock-label { --tb-fit-max:44;--tb-fit-min:36;display:flex;align-items:center;max-width:360px;height:82px;font:600 44px/1.2 var(--tb-font);overflow-wrap:anywhere; }
.tb-shell[data-mainboard-layout='ewc26'] :is(.pb-heading,.pb-read) { font-family:var(--tb-display);font-weight:900;letter-spacing:0; }
.tb-shell[data-mainboard-layout='ewc26'] .pb-option { background:var(--tb-white);color:var(--tb-bg);border-color:var(--tb-white); }
.tb-shell[data-mainboard-layout='ewc26'] .pb-letter { background:var(--tb-bg);color:var(--tb-white); }
.tb-shell[data-mainboard-layout='ewc26'] .pb-option.is-correct { box-shadow:inset 0 0 0 3px var(--tb-white); }
.tb-shell[data-mainboard-layout='ewc26'] .pb-option.is-wrong { background:var(--tb-surface);color:var(--tb-white);border-color:var(--tb-border); }
.tb-shell[data-mainboard-layout='ewc26'].is-arabic :is(.pb-heading,.pb-read) { font-family:var(--tb-font);line-height:1.3; }
@media(prefers-reduced-motion:reduce) { .tb-shell :is(.pb-options,.pb-cue,.pb-option,.pb-share-track > span) { transition:none;transform:none; } }

#dash #tab-pixel :is(.px-title-row,.px-header-actions) { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
#dash #tab-pixel .px-title-row { margin-top:7px; }
#dash #tab-pixel .px-title-row h1 { margin:0; }
#dash #tab-pixel .px-header-actions { justify-content:flex-end; }
#dash #tab-pixel #pxPrimary { min-width:108px; }
#dash #tab-pixel .lfs-close { width:36px;height:36px;min-width:36px;padding:0; }
#dash #tab-pixel .px-clarity-setting { display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:18px;margin-top:18px; }
#dash #tab-pixel .px-clarity-setting p { margin:0;line-height:1.5; }
@media(max-width:560px) { #dash #tab-pixel .px-clarity-setting { grid-template-columns:1fr;gap:8px; } }
#dash #tab-pixel :is(.px-timing,.px-accuracy) { margin:18px;padding-top:16px;border-top:1px solid var(--line);min-width:0; }
#dash #tab-pixel :is(.px-timing,.px-accuracy) figcaption { font:500 12px/1.4 var(--font-body);color:var(--text);margin-bottom:8px; }
#dash #tab-pixel :is(.px-timing-bars,.px-accuracy-bars) { display:flex;gap:12px;min-width:0;overflow:auto;padding:8px 0 6px; }
#dash #tab-pixel :is(.px-timing-bin,.px-accuracy-bin) { flex:1;min-width:40px;display:grid;grid-template-rows:20px 90px 20px;gap:6px;text-align:center;font:400 10px/1.4 var(--font-body);color:var(--text-dim);font-variant-numeric:tabular-nums; }
#dash #tab-pixel .px-accuracy-bin { min-width:54px; }
#dash #tab-pixel :is(.px-timing-bin,.px-accuracy-bin) strong { color:var(--text);font-weight:500; }
#dash #tab-pixel :is(.px-timing-column,.px-accuracy-column) { display:flex;align-items:flex-end;justify-content:center;border-radius:4px;background:var(--surface-2);overflow:hidden; }
#dash #tab-pixel :is(.px-timing-column,.px-accuracy-column) > span { display:block;width:100%;height:0;background:var(--text-dim);border-radius:4px 4px 0 0;transition:height .2s; }
#dash #tab-pixel .px-accuracy-column > span { background:var(--success); }
@media(max-width:850px) { #dash #tab-pixel .px-header-actions { justify-content:flex-start; } }
@media(prefers-reduced-motion:reduce) { #dash #tab-pixel :is(.px-timing-column,.px-accuracy-column) > span { transition:none; } }
#dash #tab-pixel :is(.px-timing-column,.px-accuracy-column) { width:42px;justify-self:center; }
#dash #tab-pixel .px-accuracy-bin { flex:0 0 64px; }
#dash #tab-pixel .px-accuracy-bars { border-bottom:1px solid var(--line); }