/* Hot Doogy · Player · Pareamento de TV (prévia local)
   Palco dimensionado por container queries: o mesmo CSS serve para
   1080x1920, 1920x1080, a prévia reduzida e a visão TV em qualquer tela. */

:root {
  --blue-950: #061328;
  --blue-900: #0b1f3a;
  --blue-700: #163460;
  --yellow: #ffc53d;
  --cream: #fff4d6;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --line: rgba(255, 255, 255, 0.14);
  --font: "Avenir Next", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Avenir Next Condensed", "Avenir Next", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-code: "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; margin: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--blue-950);
  color: var(--white);
  font-family: var(--font);
  line-height: 1.3;
}
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ---------- Barra de revisão ---------- */

.review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 10px 16px;
  background: var(--blue-900);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.review__badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.review__group { display: flex; align-items: center; gap: 8px; }
.review__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.seg { display: flex; flex-wrap: wrap; }
.seg label,
.btn {
  position: relative;
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.seg label + label { margin-left: -1px; }
.seg label:has(:checked) {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--blue-950);
  z-index: 1;
}
.seg label:has(:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; z-index: 2; }
.seg input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.review__actions { gap: 8px; }
.btn:hover, .seg label:hover { border-color: var(--yellow); }
.btn--link { color: var(--yellow); }
.review__note { flex-basis: 100%; min-height: 1.3em; font-size: 13px; color: var(--muted); }
.review__note:empty { display: none; }

/* ---------- Área de prévia e quadro da TV ---------- */

.preview {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  container-type: size;
}
.frame {
  width: 100%;
  width: min(100cqw, calc(100cqh * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blue-900);
  container-type: size;
}
body[data-orientation="landscape"] .frame {
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
}
body[data-view="tv"] .review { display: none; }
body[data-view="tv"] .preview { padding: 0; }
body[data-view="tv"] .frame,
.frame:fullscreen {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
}

/* ---------- Palco (conteúdo da TV) ---------- */

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 5vmin 6vmin;
  padding: 5cqmin 6cqmin;
  background: var(--blue-900);
  color: var(--white);
  overflow: hidden;
}
.stage__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2cqmin;
  padding-bottom: 2cqmin;
  border-bottom: 0.5cqmin solid var(--yellow);
}
.brand {
  display: flex;
  gap: 0.22em;
  font-family: var(--font-display);
  font-size: 5vmin;
  font-size: 5cqmin;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.brand span:last-child { color: var(--yellow); }
.demo-tag {
  flex-shrink: 0;
  padding: 0.5em 0.9em;
  border: 1px solid rgba(255, 197, 61, 0.55);
  font-size: 1.8vmin;
  font-size: 1.8cqmin;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}

.stage__body { min-height: 0; display: grid; align-content: center; }
.panel { display: grid; gap: 1.6cqmin; animation: panel-in 0.35s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(1cqmin); } to { opacity: 1; transform: none; } }

.eyebrow {
  font-size: 2.6vmin;
  font-size: 2.6cqmin;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.eyebrow--alert {
  justify-self: start;
  padding: 0.35em 0.7em;
  background: var(--yellow);
  color: var(--blue-950);
}
.title {
  font-family: var(--font-display);
  font-size: 11vmin;
  font-size: min(11cqmin, 15cqw);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.code {
  font-family: var(--font-code);
  font-size: 20vmin;
  font-size: min(20cqw, 32cqh);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--yellow);
  margin: 1cqmin 0 1.5cqmin -0.04em;
  font-variant-numeric: tabular-nums;
}
.lead {
  font-size: 4vmin;
  font-size: 4cqmin;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cream);
  max-width: 28ch;
}
.lead--row { display: flex; justify-content: space-between; gap: 2cqmin; max-width: none; }
.pct { font-variant-numeric: tabular-nums; color: var(--yellow); }
.hint {
  font-size: 2.6vmin;
  font-size: 2.6cqmin;
  line-height: 1.3;
  color: var(--muted);
  max-width: 40ch;
}
.num { font-variant-numeric: tabular-nums; }

.screen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.2cqmin;
  font-size: 4.6vmin;
  font-size: 4.6cqmin;
  font-weight: 800;
  line-height: 1.15;
}
.screen__name { color: var(--yellow); }
.screen__name::before { content: "/"; margin-right: 1.2cqmin; color: var(--muted); font-weight: 400; }

.progress {
  width: 100%;
  height: 1.6cqmin;
  background: rgba(255, 255, 255, 0.16);
  margin: 1cqmin 0;
  overflow: hidden;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--yellow);
  transition: width 0.25s linear;
}
.panel[data-done="true"] .progress__bar { background: var(--cream); }
.panel[data-done="true"] .pct { color: var(--cream); }

.stage__bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqmin;
  padding-top: 2cqmin;
  border-top: 1px solid var(--line);
  font-size: 2.4vmin;
  font-size: 2.4cqmin;
  color: var(--muted);
}
.domain { font-weight: 700; letter-spacing: 0.06em; }
.countdown { color: var(--white); font-weight: 600; }
.countdown[data-low="true"] .num { color: var(--yellow); font-weight: 800; }
.stage:not([data-state="pairing"]) .countdown { visibility: hidden; }

/* Paisagem: limita a largura da coluna de texto, o código continua livre. */
@container (orientation: landscape) {
  .panel { max-width: 82cqw; }
  .lead { max-width: 30ch; }
  .lead--row { max-width: none; }
  .progress { max-width: 70cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .progress__bar { transition: none; }
}

/* Management identity: app/src/tokens.css and app/src/theme.css.
   TV composition follows the supplied OptiSigns pairing references. */
:root {
  color-scheme: light;
  --yellow: #fece07;
  --white: #121212;
  --cream: #121212;
  --blue-950: #efefed;
  --blue-900: #fcfcfb;
  --muted: #4f4f4c;
  --line: #11111117;
  --font: 'Avenir Next', Avenir, 'SF Pro Rounded', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font);
}
body { height: 100vh; height: 100dvh; min-height: 0; font-weight: 500; -webkit-font-smoothing: antialiased; }
.review { padding: 16px 24px; gap: 12px 22px; background: #ffffffa3; border: 0; box-shadow: inset 0 -1px #ffffffeb; }
.review__badge { color: #121212; font-size: 12px; letter-spacing: .02em; font-weight: 600; text-transform: none; }
.review__group { flex-wrap: wrap; }
.review__label { text-transform: none; letter-spacing: 0; }
.seg { gap: 2px; padding: 4px; border-radius: 24px; background: #1111110a; }
.seg label, .btn { border: 0; border-radius: 999px; padding: 9px 13px; font-size: 13px; }
.seg label + label { margin: 0; }
.seg label:has(:checked) { background: #121212; color: #fff; }
.btn { background: #ffffffc7; box-shadow: inset 0 0 0 1px #11111117; }
.btn:hover, .seg label:hover { background: #11111110; }
.seg label:has(:checked):hover { background: #121212; }
.btn--link { background: var(--yellow); color: #121212; box-shadow: none; }
:focus-visible, .seg label:has(:focus-visible) { outline-color: #121212; }
.preview { padding: 24px; }
.frame { border: 0; box-shadow: 0 22px 44px -30px #00000038; }
.stage { position: relative; padding: 5cqmin 7cqmin; background: #fcfcfb; }
.stage__top { align-items: center; border: 0; padding: 0; }
.brand { width: 14cqmin; height: 10cqmin; object-fit: contain; }
.demo-tag { color: var(--muted); background: #11111106; border: 0; border-radius: 999px; letter-spacing: .01em; font-size: 1.8cqmin; font-weight: 500; text-transform: none; }
.stage__body { min-width: 0; text-align: center; }
.panel { width: 100%; min-width: 0; max-width: none; justify-items: center; gap: 2cqmin; }
.eyebrow { color: var(--muted); font-size: 2.5cqmin; font-weight: 500; text-transform: none; letter-spacing: .03em; }
.eyebrow--alert { justify-self: center; padding: 0; background: none; }
.code { width: 100%; font-family: var(--font); font-weight: 400; font-size: min(19cqw, 26cqh); letter-spacing: .025em; color: #121212; line-height: 1.15; margin: 0 0 7cqmin; }
.title { color: #121212; font-family: var(--font); font-weight: 400; font-size: 15cqmin; letter-spacing: -.045em; line-height: 1.1; text-transform: none; margin-bottom: 5cqmin; }
[data-panel="paired"] .title { font-size: 22cqmin; }
.lead { font-size: 3.6cqmin; font-weight: 400; line-height: 1.45; max-width: 34ch; }
.hint { max-width: 38ch; font-size: 2.3cqmin; line-height: 1.5; }
.screen { font-size: 2.6cqmin; font-weight: 500; justify-content: center; color: var(--muted); order: 3; margin-top: 3cqmin; }
.screen__name { color: var(--muted); }
.progress { max-width: 60cqmin; height: 1cqmin; border-radius: 999px; background: #1111110f; }
.progress__bar { background: var(--yellow); border-radius: inherit; }
.lead--row { width: 60cqmin; max-width: 100%; font-size: 2.8cqmin; }
.pct, .panel[data-done="true"] .pct { color: #121212; }
.panel[data-done="true"] .progress__bar { background: #121212; }
.stage__bottom { border: 0; font-size: 2cqmin; padding: 0; }
.domain { font-weight: 500; letter-spacing: 0; }
.countdown { color: var(--muted); font-weight: 400; }
.countdown[data-low="true"] .num { color: #85580a; }
body[data-view="tv"] .frame, .frame:fullscreen { box-shadow: none; }
@container (orientation: landscape) {
  .panel { max-width: none; }
  .lead { max-width: 42ch; }
  .code { font-size: min(15cqw, 25cqh); margin-bottom: 4cqmin; }
  .title { margin-bottom: 3cqmin; }
}
@media (max-width: 640px) {
  .review { padding: 12px; gap: 10px; }
  .review__badge { flex-basis: 100%; }
  .review__group { gap: 5px; }
  .seg label, .btn { font-size: 11px; padding: 8px; }
  .preview { padding: 12px; min-height: 240px; }
}

/* Pairing code emphasis. */
.code { font-weight: 700; }

/* Keep the requested status messages on one line within either TV format. */
[data-panel="offline"] .title,
[data-panel="paired"] .title,
[data-panel="preparing"] .title,
[data-panel="expired"] .title { font-weight: 700; }
[data-panel="offline"] .lead,
[data-panel="offline"] .hint,
[data-panel="expired"] .lead {
  max-width: none;
  white-space: nowrap;
}
[data-panel="offline"] .lead { font-size: min(3.6cqmin, 2.3cqw); }
[data-panel="offline"] .hint { font-size: min(2.3cqmin, 2.8cqw); }
[data-panel="expired"] .lead { font-size: min(3.6cqmin, 3cqw); }

#menu-image { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; object-fit: contain; background: #000; z-index: 5; }

/* TV browsers may not support container units. Use viewport sizing for the
   full-screen player; keep container units only in the desktop review. */
body[data-view="tv"] { display: block; overflow: hidden; }
body[data-view="tv"] .preview { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; padding: 0; }
body[data-view="tv"] .frame { width: 100%; height: 100%; }
body[data-view="tv"] .stage { display: block; padding: 0; }
body[data-view="tv"] .stage__top { position: absolute; top: 5vmin; left: 7vmin; right: 7vmin; height: 10vmin; }
body[data-view="tv"] .brand { display: block; width: 14vmin; height: 10vmin; max-width: 14vmin; flex: none; }
body[data-view="tv"] .stage__body { position: absolute; top: 15vmin; bottom: 7.6vmin; left: 7vmin; right: 7vmin; display: flex; align-items: center; justify-content: center; }
body[data-view="tv"] .panel { display: block; width: 100%; animation: none; }
body[data-view="tv"] .panel > * { margin-left: auto; margin-right: auto; }
body[data-view="tv"] .panel > * + * { margin-top: 2vmin; }
body[data-view="tv"] .eyebrow { font-size: 2.5vmin; }
body[data-view="tv"] .code { font-size: 19vw; font-size: min(19vw, 26vh); margin-bottom: 7vmin; }
body[data-view="tv"] .title { font-size: 15vmin; margin-bottom: 5vmin; }
body[data-view="tv"] [data-panel="paired"] .title { font-size: 22vmin; }
body[data-view="tv"] .lead { font-size: 3.6vmin; }
body[data-view="tv"] .hint { font-size: 2.3vmin; }
body[data-view="tv"] .screen { font-size: 2.6vmin; margin-top: 3vmin; }
body[data-view="tv"] .screen__name::before { margin-right: 1.2vmin; }
body[data-view="tv"] .progress { max-width: 60vmin; height: 1vmin; margin-top: 2vmin; margin-bottom: 1vmin; }
body[data-view="tv"] .lead--row { width: 60vmin; font-size: 2.8vmin; }
body[data-view="tv"] .stage__bottom { position: absolute; bottom: 5vmin; left: 7vmin; right: 7vmin; font-size: 2vmin; }
body[data-view="tv"] [data-panel="offline"] .lead { font-size: 2.3vw; font-size: min(3.6vmin, 2.3vw); }
body[data-view="tv"] [data-panel="offline"] .hint { font-size: 2.3vmin; }
body[data-view="tv"] [data-panel="expired"] .lead { font-size: 3vw; font-size: min(3.6vmin, 3vw); }
@media (orientation: landscape) {
 body[data-view="tv"] .code { font-size: 25vh; font-size: min(15vw, 25vh); margin-bottom: 4vmin; }
 body[data-view="tv"] .title { margin-bottom: 3vmin; }
}