:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #141a22;
  --text: #e8edf2;
  --hint: #8b98a5;
  --accent: #4da3ff;
  --danger: #ff6b6b;
  --border: #232b35;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.app {
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.view {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.view[hidden] {
  display: none;
}

.panel {
  max-width: 28rem;
  text-align: center;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}

p {
  line-height: 1.5;
  margin: 0.5rem 0;
}

.status {
  font-size: 1.2rem;
}

.hint {
  color: var(--hint);
  font-size: 0.95rem;
}

form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}

.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  width: 12rem;
}

.code-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Brief 35: an address (up to 40 characters) and a passcode (up to 64, case-sensitive as
   typed) are both free text, unlike the fixed six-to-eight-character, always-upper-case
   alphabet codes .code-input was designed for - override its uppercase display and widen it
   so what is shown matches what is actually typed and sent. */
.address-input,
.code-input.passcode-mode {
  text-transform: none;
  letter-spacing: normal;
  width: 18rem;
}

button {
  font-size: 1rem;
  background: var(--accent);
  color: #041018;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
}

button:active {
  opacity: 0.85;
}

.shake {
  animation: shake 0.35s;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.view-playing {
  padding: 0;
  background: #000;
  position: relative;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}

.overlay[hidden] {
  display: none;
}

.playing-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

.playing-bar[hidden] {
  display: none;
}

.connection-kind {
  color: var(--hint);
  font-size: 0.85rem;
  text-transform: capitalize;
}

/* Both buttons sit together at the right-hand end of the bar, with the connection kind on the
   left, so "Exit full screen" is under the thumb in the same place "Full screen" was. */
.playing-bar-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The statistics overlay (brief 27 step 2): a small corner panel, top-left so it is clear of
   the playing bar at the bottom and of the reminder overlay at bottom-left. Deliberately
   small and monospaced - it is read off a phone screen and pasted into a bug report. */
.stats-overlay {
  position: absolute;
  top: 12px;
  top: calc(12px + env(safe-area-inset-top));
  left: 12px;
  max-width: min(90vw, 20rem);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(11, 15, 20, 0.85);
  border: 1px solid var(--border);
  pointer-events: none;
}

.stats-overlay[hidden] {
  display: none;
}

.stats-body {
  margin: 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
}

/* Free-tier reminder (brief 19, D5): a corner overlay, never the whole picture, with a large
   one-tap Dismiss. Bottom-left, clear of the playing-bar's controls in the bottom-right. */
.reminder-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: min(85vw, 22rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(11, 15, 20, 0.88);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.reminder-overlay[hidden] {
  display: none;
}

.reminder-message {
  margin: 0;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.4;
}

#reminder-dismiss {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
}

/* Shown only when the account's ReminderWatermark config is on (brief 19): small, translucent,
   out of the way, present the whole time a stream plays rather than appearing periodically. */
.reminder-watermark {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: rgba(11, 15, 20, 0.5);
  color: rgba(232, 237, 242, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.reminder-watermark[hidden] {
  display: none;
}

/* Development host page only (/dev/host, unlisted). */
.host {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.session-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.session-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2rem;
  letter-spacing: 0.15em;
  color: var(--accent);
}

/* ---- The remote pointer (brief 31, PROTOCOL.md section 10.5) ---- */

/* Positioned by transform inside .view-playing, which is already `position: relative`.
   `will-change: transform` keeps it on its own compositor layer, so a position update at
   sixty a second never touches layout or paints the video again. `pointer-events: none` is
   load-bearing: without it the pointer image would sit between the finger and the picture and
   swallow every tap meant for the PC. */
.remote-cursor {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
  /* The bitmap is the PC's own pointer at the PC's own size. Enlarged on a phone (see
     MIN_CURSOR_CSS_PX), a smoothed arrow reads as a blur, so keep the pixels. */
  image-rendering: pixelated;
  z-index: 1;
}

.remote-cursor[hidden] {
  display: none;
}

/* ---- Remote input (brief 30, PROTOCOL.md section 10) ---- */

/* While control is on, the browser must not take the gesture for itself. touch-action is
   the only signal it reads BEFORE dispatching any listener, so preventDefault alone is not
   enough: without it the browser starts a pan, sends pointercancel, and the pointermove
   stream simply stops mid-drag. The local cursor goes too, because the PC's own cursor is
   drawn over the video by .remote-cursor (brief 31; composited into it before that) and two
   cursors a few pixels apart is worse than either alone. */
.view-playing.controlling {
  touch-action: none;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Rendered, focusable, and to all intents invisible. Not display:none and not zero-sized:
   iOS will not raise its keyboard for a field it does not consider to be on screen. */
.keyboard-field {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  color: transparent;
  pointer-events: none;
  z-index: -1;
}

/* What the PC says about control, when it has something to say: the amber of a state to
   notice rather than the red of a failure. Top of the picture, clear of the playing bar. */
.control-note {
  position: absolute;
  top: 12px;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  background: rgba(42, 33, 19, 0.92);
  border: 1px solid #7a5c12;
  color: #f2c94c;
  font-size: 0.85rem;
  text-align: center;
  pointer-events: none;
}

.control-note[hidden] {
  display: none;
}

#control-button.control-on {
  background: #f2c94c;
  border-color: #f2c94c;
  color: #10141a;
}