/* The live demo (/demo/) only: the TV drawn in CSS, the remote and the SDK panel.
   Loaded by that page alone (page.styles), so no other page downloads it.
   Uses the site's tokens from site.css (navy, blue, cyan, lamp, fonts). */

.demo-wrap {
  width: min(100% - 2 * var(--gutter), 92rem);
  margin-inline: auto;
}

.demo-head { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem); }
.demo-head h1 { font-size: var(--step-3); max-width: 30ch; margin-bottom: 0.3em; }
.demo-head .lead { max-width: 80ch; margin-bottom: 0; font-size: var(--step-0); }

.demo { padding-bottom: clamp(2rem, 5vw, 4rem); }

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (min-width: 78rem) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) 23rem; }
}

/* ---------- Stage: the TV and the remote ---------- */

.demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  justify-items: center;
}
@media (min-width: 48rem) {
  .demo-stage { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
}

.demo-tv {
  margin: 0;
  width: 100%;
  /* Keep the whole TV in view on short screens. */
  max-width: calc((100vh - 8rem) * 16 / 9);
}

/* The set: a slim dark bezel with the logo's blue-to-cyan edge, like the hero TV. */
.demo-tv-set {
  position: relative;
  padding: clamp(6px, 1vw, 14px) clamp(6px, 1vw, 14px) 0;
  border-radius: clamp(12px, 1.6vw, 22px);
  background: linear-gradient(160deg, #18294a 0%, #0a1428 55%, #070f20 100%);
  box-shadow:
    0 0 0 clamp(2px, 0.3vw, 3px) var(--blue),
    0 0 0 clamp(3px, 0.45vw, 5px) color-mix(in oklch, var(--cyan) 70%, transparent),
    0 30px 60px -20px oklch(0.1 0.04 262 / 0.9),
    0 0 120px -30px color-mix(in oklch, var(--cyan) 35%, transparent);
}
.demo-tv-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(4px, 0.6vw, 8px);
  background: #000;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06);
}
.demo-tv-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--navy);
}
.demo-tv-screen:focus-within { outline: 3px solid var(--lamp); outline-offset: 2px; }
.demo-noscript { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; margin: 0; text-align: center; max-width: none; }
.demo-tv-chin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(18px, 2.4vw, 32px);
}
.demo-tv-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.55rem, 0.9vw, 0.8rem);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.demo-tv-led {
  position: absolute;
  right: 4%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 8px var(--lamp);
}
.demo-tv-stand {
  position: relative;
  width: 28%;
  height: clamp(14px, 2.2vw, 30px);
  margin: 0 auto;
  background: linear-gradient(#0d1a33, #08122a);
  clip-path: polygon(38% 0, 62% 0, 70% 100%, 30% 100%);
}
.demo-tv-stand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  border-radius: 99px;
  background: #0f1d38;
}
.demo-tv figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-3);
  max-width: none;
}

/* ---------- The remote ---------- */

.remote {
  --key: clamp(2.6rem, 9vw, 3.1rem);
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 28px;
  background: linear-gradient(180deg, #1b2c4d, #0c1830);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 18px 40px -16px oklch(0.08 0.04 262 / 0.9);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 48rem) {
  .remote { flex-direction: column; padding: 1.4rem 1rem 1.2rem; border-radius: 40px; gap: 1.1rem; }
}
.remote-ir { width: 10px; height: 10px; border-radius: 50%; background: #3a1d24; box-shadow: inset 0 0 0 2px #00000055; }
.remote-dpad {
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  grid-template-rows: repeat(3, var(--key));
  padding: 0.35rem;
  border-radius: 50%;
  background: #091327;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06);
}
.remote button {
  appearance: none;
  display: grid;
  place-items: center;
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s, transform 0.12s;
}
/* Hover only where there is a real pointer: on a phone a tapped button would stay lit. */
@media (hover: hover) {
  .remote button:hover { background: oklch(1 0 0 / 0.07); }
}
.remote button.is-down, .remote button:active { transform: scale(0.94); background: color-mix(in oklch, var(--blue) 40%, transparent); }
.remote-up { grid-area: 1 / 2; }
.remote-left { grid-area: 2 / 1; }
.remote-ok {
  grid-area: 2 / 2;
  border-radius: 50% !important;
  background: var(--blue) !important;
  color: var(--navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
}
.remote-ok.is-down, .remote-ok:active { background: var(--cyan) !important; }
.remote-right { grid-area: 2 / 3; }
.remote-down { grid-area: 3 / 2; }
.remote-back {
  display: flex !important;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem !important;
  border-radius: 999px !important;
  background: oklch(1 0 0 / 0.08) !important;
  font-weight: 700 !important;
  font-size: var(--step--1) !important;
}
.remote-back.is-down, .remote-back:active { background: color-mix(in oklch, var(--blue) 40%, transparent) !important; }
.remote-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
@media (max-width: 47.99rem) {
  .remote-ir, .remote-brand { display: none; }
}

/* ---------- What the SDK is doing ---------- */

.sdk-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-2);
  min-width: 0;
}
.sdk-panel > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.sdk-panel > summary::-webkit-details-marker { display: none; }
.sdk-panel > summary::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg) translateY(-0.1rem);
  transition: transform 0.2s var(--ease-out);
}
.sdk-panel[open] > summary::before { transform: rotate(45deg) translateY(-0.2rem); }
.sdk-panel-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); }
.sdk-panel-hint { font-size: var(--step--1); color: var(--ink-3); }
.sdk-panel-body { padding: 0 1.15rem 1.15rem; }

.sdk-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--navy-3);
  font-size: var(--step--1);
  line-height: 1.4;
  max-width: none;
}
.sdk-status::before {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--ink-3);
}
.sdk-status[data-state='loading']::before { background: var(--cyan); animation: sdk-pulse 1s infinite alternate; }
.sdk-status[data-state='ready']::before { background: oklch(0.8 0.17 150); }
.sdk-status[data-state='offline']::before { background: var(--lamp); }
@keyframes sdk-pulse { to { opacity: 0.3; } }

.sdk-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  line-height: 1.45;
}
.sdk-log li {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.1rem 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.sdk-log .sdk-log-empty { display: block; color: var(--ink-3); }
.sdk-log time { grid-row: span 2; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 0.85em; padding-top: 0.15em; }
.sdk-log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; min-width: 0; }
.sdk-log-tag {
  flex: none;
  padding: 0.05rem 0.4rem;
  border-radius: 5px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--navy-4);
  color: var(--ink-2);
}
.sdk-log [data-kind='call'] .sdk-log-tag { background: var(--blue-soft); color: var(--blue); }
.sdk-log [data-kind='event'] .sdk-log-tag { background: var(--cyan-soft); color: var(--cyan); }
.sdk-log [data-kind='net'] .sdk-log-tag { background: oklch(0.8 0.17 150 / 0.12); color: oklch(0.8 0.17 150); }
.sdk-log [data-kind='game'] .sdk-log-tag { background: var(--lamp-soft); color: var(--lamp); }
.sdk-log [data-kind='warn'] .sdk-log-tag { background: var(--lamp-soft); color: var(--lamp); }
.sdk-log-name { font-family: var(--font-code); font-size: 0.9em; color: var(--ink); overflow-wrap: anywhere; }
.sdk-log-text { color: var(--ink-3); margin: 0; }
.sdk-log li.is-new { animation: sdk-in 0.6s var(--ease-out); }
@keyframes sdk-in { from { background: var(--cyan-soft); } to { background: transparent; } }

.sdk-code-h { font-size: var(--step-1); margin: 1.4rem 0 0.4rem; }
.sdk-panel-body > p { font-size: var(--step--1); color: var(--ink-2); }
.sdk-panel .code { font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .sdk-log li.is-new, .sdk-status[data-state='loading']::before { animation: none; }
  .remote button { transition: none; }
}

.demo-notes .ticks { margin-top: 1rem; }