/* Display chrome shared by every game: the join screen, the connection dot
 * and the music indicator. The stage itself is styled by deck.css. */
/* The display is the stage and nothing else — no controls, no help line. */
  #stage { padding-bottom: clamp(12px, 2.4vw, 40px); }

  /* Joining screen, shown until the phone publishes its first state. */
  #join {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    z-index: 30;
    text-align: center;
    padding: 24px;
  }
  #join[hidden] { display: none; }
  #join h1 {
    font-size: clamp(20px, 3vw, 42px);
    font-weight: 800;
    color: var(--dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 clamp(20px, 3vh, 40px);
  }
  #join-code {
    font-size: clamp(64px, 16vw, 260px);
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 0.12em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  #join-hint {
    margin-top: clamp(20px, 3vh, 44px);
    font-size: clamp(14px, 1.8vw, 26px);
    font-weight: 700;
    color: var(--dim);
    line-height: 1.5;
  }
  #join-hint b { color: var(--fg); }

  /* Connection dot, deliberately small — it must never upstage the puzzle. */
  #link {
    position: fixed;
    left: clamp(12px, 2.4vw, 40px);
    bottom: clamp(12px, 2.4vw, 40px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(10px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #39415a;
  }
  #link-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--good);
  }
  #link[data-state="offline"] #link-dot { background: var(--bad); }
  #link[data-state="waiting"] #link-dot { background: var(--accent); }

  /* Music state, mirrored from the remote. Quiet chrome — it must never
     compete with the puzzle. */
  #tv-music {
    position: fixed;
    right: clamp(12px, 2.4vw, 40px);
    bottom: clamp(12px, 2.4vw, 40px);
    font-size: clamp(10px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #39415a;
  }
  #tv-music[data-on="1"] { color: var(--accent); }