/* Motion controls: the setup panel camera-controls.js builds, the join screen's
   control rows and the phone controller page. Widgets are the vanilla sprites
   under gui/sprites/widget at --px, like the rest of the interface. */

/* --- the setup page -------------------------------------------------------- */
/* A page of the game menu, laid out like vanilla's Options: the title up
   top, rows of two 150x20 buttons on the dimmed world, Done at the bottom.
   On the phone page it sits inside the page's own panel. */
#camera-controls {
  width: calc(310 * var(--u)); max-width: 92vw;
  padding: 0 0 calc(12 * var(--u));
  text-align: left; color: var(--mc-white);
}
#camera-controls[hidden] { display: none; }
#camera-controls h2 {
  margin: calc(20 * var(--u)) 0 calc(12 * var(--u));
  font-size: calc(var(--px) * 8px); font-weight: normal; line-height: 1; text-align: center;
}
#camera-controls p { margin: calc(2 * var(--u)) 0; }
#camera-controls small { display: block; color: var(--mc-gray); font-size: calc(var(--px) * 6px); line-height: 1.4; }
#camera-controls a { color: var(--mc-white); }
#camera-controls .motion-live { color: var(--mc-green); }

/* The camera, framed like the join screen's player figure. Not scoped to the
   panel: the same element moves into #motion-feed while the panel is closed. */
.motion-preview {
  position: relative;
  background: #000;
  border-style: solid; border-width: var(--u);
  border-color: var(--slot-dark) var(--gui-lit) var(--gui-lit) var(--slot-dark);
}
.motion-preview video { display: block; width: 100%; max-height: calc(95 * var(--u)); object-fit: contain; transform: scaleX(-1); }
.motion-preview [data-role=landmarks] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); pointer-events: none; }

/* Vanilla options rows: two 150x20 buttons per line, 10 apart, or one the
   full 310 wide. */
#camera-controls .motion-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)) calc(10 * var(--u));
  margin: calc(4 * var(--u)) 0;
}
#camera-controls .motion-buttons > * { width: 100%; min-width: 0; height: calc(20 * var(--u)); margin: 0; }
#camera-controls .motion-buttons .wide { grid-column: 1 / -1; }
#camera-controls .motion-buttons + .motion-buttons { margin-top: 0; }

/* Vanilla cycles a choice with a button reading "Camera: Front". The native
   select sits inside the button, drawn as its text, so the list still opens. */
.mc-cycle {
  display: flex; align-items: center; justify-content: center; gap: 0;
  cursor: pointer; white-space: nowrap;
}
.mc-cycle select {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-shadow: inherit; cursor: pointer;
  outline: none;
  /* Webcam labels ("Logitech BRIO (046d:085e)") are longer than the button. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mc-cycle select option { color: #000; text-shadow: none; }

/* A checkbox drawn as vanilla's "Autojump: ON" toggle. The input covers the
   button unseen so clicks, Space and the browser test land on the control. */
.mc-toggle { position: relative; display: flex; align-items: center; justify-content: center; }
.mc-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mc-toggle span::after { content: ': OFF'; }
.mc-toggle:has(input:checked) span::after { content: ': ON'; }
.mc-toggle:has(input:focus-visible) { background-image: url('/assets/gui/sprites/widget/button_highlighted.png'); color: var(--mc-yellow); }

/* Vanilla's slider: a 200x20 track, an 8x20 handle, the value printed over. */
.mc-slider {
  position: relative; display: block;
  height: calc(20 * var(--u));
  color: var(--mc-white); text-shadow: var(--u) var(--u) 0 var(--shadow);
}
.mc-slider input {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: calc(20 * var(--u)); margin: 0; padding: 0;
  background: url('/assets/gui/sprites/widget/slider.png') 0 0 / 100% 100%;
  image-rendering: pixelated; cursor: pointer; outline: none;
}
.mc-slider input::-webkit-slider-runnable-track { height: calc(20 * var(--u)); background: none; }
.mc-slider input::-moz-range-track { height: calc(20 * var(--u)); background: none; }
.mc-slider input::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: calc(8 * var(--u)); height: calc(20 * var(--u)); border: 0; border-radius: 0;
  background: url('/assets/gui/sprites/widget/slider_handle.png') 0 0 / 100% 100%;
}
.mc-slider input::-moz-range-thumb {
  width: calc(8 * var(--u)); height: calc(20 * var(--u)); border: 0; border-radius: 0;
  background: url('/assets/gui/sprites/widget/slider_handle.png') 0 0 / 100% 100%;
}
.mc-slider input:hover::-webkit-slider-thumb, .mc-slider input:focus-visible::-webkit-slider-thumb { background-image: url('/assets/gui/sprites/widget/slider_handle_highlighted.png'); }
.mc-slider input:hover::-moz-range-thumb, .mc-slider input:focus-visible::-moz-range-thumb { background-image: url('/assets/gui/sprites/widget/slider_handle_highlighted.png'); }
.mc-slider span {
  position: absolute; inset: 0; text-align: center; line-height: calc(20 * var(--u));
  pointer-events: none; white-space: nowrap;
}
.mc-slider:hover span, .mc-slider:has(input:focus-visible) span { color: var(--mc-yellow); }
#camera-controls [data-role=sliders] { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin: calc(4 * var(--u)) 0; }
/* A quiet caption naming the body action the sliders under it tune. */
#camera-controls [data-role=sliders] .cs-group {
  margin: calc(3 * var(--u)) 0 calc(-1 * var(--u));
  font: inherit; font-size: calc(var(--px) * 6px); font-weight: normal; line-height: 1;
  color: var(--mc-gray);
}
#camera-controls [data-role=sliders] .cs-group:first-child { margin-top: 0; }

/* Vanilla opens a sub screen from a "Controls..." button. A collapsible with
   the button as its summary is the same idea without leaving the page. */
#camera-controls details { margin-top: calc(4 * var(--u)); }
#camera-controls summary { list-style: none; width: 100%; height: calc(20 * var(--u)); margin: 0; display: flex; align-items: center; justify-content: center; }
#camera-controls summary::-webkit-details-marker { display: none; }
#camera-controls details[open] > summary { color: var(--mc-yellow); }
#camera-controls details > :not(summary) { margin-top: calc(2 * var(--u)); }
#camera-controls ol { margin: 0; padding-left: calc(8 * var(--u)); font-size: calc(var(--px) * 7px); }
#camera-controls li { margin-bottom: var(--u); }
#camera-controls .motion-help p { font-size: calc(var(--px) * 7px); }

/* Numbers, in the inset black field of a vanilla text box. */
#camera-controls [data-role=diagnostics] {
  margin: 0; white-space: pre-wrap;
  font: inherit; font-size: calc(var(--px) * 6px); line-height: 1.5;
  padding: calc(2 * var(--u));
  color: var(--mc-white); background: #000;
  border-style: solid; border-width: var(--u);
  border-color: var(--slot-dark) var(--gui-lit) var(--gui-lit) var(--slot-dark);
}

/* Pairing: the code large enough to read across a room, the QR on white. The
   one block (.phone-pair) is mounted on the join screen and inside the
   motion panel, so it is styled standalone rather than under an id. */
.phone-pair { margin-top: calc(2 * var(--u)); }
.phone-pair > summary {
  list-style: none; width: 100%; height: calc(20 * var(--u)); margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.phone-pair > summary::-webkit-details-marker { display: none; }
.phone-pair[open] > summary { color: var(--mc-yellow); }
.phone-pair > :not(summary) { margin-top: calc(2 * var(--u)); }
.phone-pair p { margin: calc(2 * var(--u)) 0; }
.phone-pair small { display: block; color: var(--mc-gray); font-size: calc(var(--px) * 6px); line-height: 1.4; }
.phone-pair a { color: var(--mc-white); }
.phone-pair .motion-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)) calc(10 * var(--u));
  margin: calc(4 * var(--u)) 0;
}
.phone-pair .motion-buttons > * { width: 100%; height: calc(20 * var(--u)); margin: 0; }
.phone-pair [data-role=pair-code] {
  display: block; text-align: center;
  font-size: calc(var(--px) * 12px); font-weight: normal; letter-spacing: calc(1 * var(--u));
  user-select: all;
}
.phone-pair [data-role=pair-code]:empty { display: none; }
.phone-pair [data-role=pair-link] { display: block; overflow-wrap: anywhere; font-size: calc(var(--px) * 6px); }
.phone-pair [data-role=pair-qr] {
  display: block; width: calc(120 * var(--u)); max-width: 100%; height: auto; margin: calc(2 * var(--u)) auto;
  image-rendering: pixelated;
  border-style: solid; border-width: var(--u);
  border-color: var(--slot-dark) var(--gui-lit) var(--gui-lit) var(--slot-dark);
}
.phone-pair [data-role=pair-qr][hidden] { display: none; }
.phone-pair label.motion-field { display: block; }
.phone-pair .motion-field .mc-text { margin-top: var(--u); }
/* On the light join panel the chat colours are unreadable — the same ink
   switch the companion page makes inside its own panel. */
.mc-panel .phone-pair { color: var(--ink); }
.mc-panel .phone-pair small { color: #7f7f7f; }
.mc-panel .phone-pair a { color: var(--ink); }
/* The join menu is too narrow for two buttons a row, and its own gap already
   spaces the pairing block from the menu items around it. */
#join-phone .phone-pair { margin-top: 0; }
#join-phone .phone-pair .motion-buttons { grid-template-columns: 1fr; gap: calc(2 * var(--u)); }

/* --- the camera feed in the HUD --------------------------------------------- */
/* Left of the minimap, in its translucent frame: 64px tall, a 4:3 frame wide. */
#motion-feed {
  top: calc(2 * var(--u)); right: calc(70 * var(--u));
  padding: var(--u);
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
#motion-feed.live { display: block; }
#minimap:not(.live) ~ #motion-feed { right: calc(2 * var(--u)); }
#motion-feed .motion-preview { width: calc(85 * var(--u)); height: calc(64 * var(--u)); border: 0; }
#motion-feed video { width: 100%; height: 100%; max-height: none; }

/* --- the phone controller page ---------------------------------------------- */
body.companion {
  margin: 0; min-height: 100dvh;
  padding: calc(4 * var(--u));
  display: flex; align-items: flex-start; justify-content: center;
  color: var(--mc-white);
}
.companion main {
  width: calc(200 * var(--u)); max-width: 100%;
  padding: calc(4 * var(--u)) calc(5 * var(--u));
}
.companion h1 {
  margin: 0 0 calc(3 * var(--u));
  font-size: calc(var(--px) * 8px); font-weight: normal; text-align: center;
}
.companion p { margin: calc(2 * var(--u)) 0; }
.companion small { display: block; color: #7f7f7f; font-size: calc(var(--px) * 6px); line-height: 1.4; }
.companion a { color: var(--ink); }
.companion .mc-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin: calc(2 * var(--u)) 0 0;
  color: var(--mc-white); text-decoration: none;
}
.companion .mc-button:hover, .companion .mc-button:focus-visible { color: var(--mc-yellow); }
.companion .mc-button[hidden] { display: none; }
.companion #pair-code { margin-top: var(--u); }
/* Hold to Talk: red while the mic is open, dimmed while the last recording
   is being transcribed, the same states as the game's own mic button. */
.companion #talk { height: calc(30 * var(--u)); }
body.companion.talking #talk { background: #a03030; border-color: #ff8080 #501010 #501010 #ff8080; }
body.companion.talk-busy #talk { opacity: 0.4; }
/* Inside the page's own panel, under a rule, narrower than the game's page. */
.companion #camera-controls {
  width: auto; max-width: none;
  margin: calc(4 * var(--u)) 0 0; padding: calc(3 * var(--u)) 0 0;
  border-top: var(--u) solid var(--slot);
  color: var(--ink);
}
.companion #camera-controls h2 { margin: 0 0 calc(3 * var(--u)); }
.companion #camera-controls small { color: #7f7f7f; }
.companion #camera-controls a { color: var(--ink); }
.companion #camera-controls .motion-live { color: var(--ink-green); }
.companion #camera-controls .motion-buttons { gap: calc(2 * var(--u)); margin: calc(2 * var(--u)) 0; }
.companion #camera-controls [data-role=diagnostics] { color: var(--ink); background: var(--slot); }