:root {
  color-scheme: light;
  --shell: #fafafa;
  --control: #eeeeee;
  --control-strong: #e5e5e5;
  --ink: #202126;
  --muted: #66717a;
  --blue: #5f8291;
  --blue-bright: #2aa6d8;
  --press: #b9dbea;
  --shadow: rgba(0, 0, 0, 0.22);
  --primary-drive-size: min(54vw, 214px);
  --direction-hit-size: 46%;
  --direction-glyph-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--shell);
  color: var(--ink);
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  user-select: none;
  -webkit-user-select: none;
}

button,
input {
  font: inherit;
}

button {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--control);
  color: var(--ink);
  padding: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 0 5px 9px var(--shadow), inset 0 1px 0 #fff;
}

button:active,
button.pressed {
  background: var(--press);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
}

input {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 14px 12px;
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}

.app {
  min-height: 100svh;
  padding:
    max(7px, env(safe-area-inset-top))
    max(7px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(7px, env(safe-area-inset-left));
}

/* Pairing remains readable in either orientation; the paired remote is the
   intentionally rotated surface below. */
.connect-panel {
  max-width: 34rem;
  margin: 0 auto;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
}

.kicker {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.connect-panel h1 {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  line-height: 0.92;
}

.intro,
.status {
  color: var(--muted);
}

.field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.pair-actions,
.pair-data,
.manual-pair {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.pair-actions,
.pair-data {
  grid-template-columns: 1fr 1fr;
}

.primary,
.secondary {
  min-height: 48px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 12px;
  font-weight: 800;
}

.primary {
  background: var(--ink);
  color: #fff;
}

.pair-data div {
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 11px;
}

.pair-data span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

.pair-data strong {
  display: block;
  margin-top: 7px;
  font: 700 clamp(1.3rem, 6vw, 2.3rem) / 1 monospace;
  letter-spacing: 0.12em;
}

.status {
  min-height: 2.8em;
  margin: 16px 0 0;
}

.controller {
  min-height: calc(100svh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.controller-surface {
  min-height: calc(100svh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: 100%;
  display: grid;
  grid-template-columns: minmax(205px, 1.35fr) minmax(58px, 0.4fr) minmax(158px, 0.9fr) minmax(164px, 0.9fr) minmax(218px, 1.35fr);
  gap: clamp(7px, 1.2vw, 14px);
  align-items: center;
  padding: clamp(5px, 1vw, 10px);
  overflow: hidden;
}

.rotated-label,
.connection-compact,
.tilt-readout {
  transform: rotate(90deg);
}

.rotated-label {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.face-zone,
.action-zone,
.motion-zone,
.dpad-zone,
.system-zone {
  min-width: 0;
  min-height: 0;
  height: min(92svh, 390px);
  display: grid;
  place-items: center;
}

.face-zone {
  grid-template-columns: minmax(120px, 1.4fr) minmax(74px, 0.6fr);
  gap: 10px;
}

.face-button,
.a-button {
  border-radius: 50%;
  font-weight: 500;
}

.face-button.two {
  width: min(38vw, 190px);
  height: min(38vw, 190px);
  max-width: 82%;
  max-height: 82%;
  font-size: clamp(4.4rem, 13vw, 7.5rem);
  border: 3px solid rgba(42, 166, 216, 0.45);
}

.face-button.one {
  width: clamp(68px, 10vw, 104px);
  height: clamp(68px, 10vw, 104px);
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.system-zone {
  align-content: center;
  grid-template-rows: repeat(3, auto);
  gap: clamp(16px, 5svh, 28px);
}

.system-button {
  width: clamp(42px, 5.5vw, 58px);
  height: clamp(42px, 5.5vw, 58px);
  border-radius: 50%;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
}

.home-button {
  color: var(--blue);
}

.home-glyph {
  transform: rotate(90deg) translateY(-1px);
}

.action-zone {
  grid-template-columns: 0.82fr 1.18fr;
  gap: 12px;
}

.b-trigger {
  width: clamp(62px, 8vw, 84px);
  height: min(72%, 238px);
  border-radius: 7px;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

.a-button {
  width: clamp(88px, 11vw, 124px);
  height: clamp(88px, 11vw, 124px);
  font-size: clamp(3rem, 7vw, 5rem);
}

.motion-zone {
  grid-template-columns: 42px minmax(132px, 1fr);
  gap: 6px;
}

.connection-compact {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 0.66rem;
  letter-spacing: 0.07em;
}

.connection-compact strong {
  color: var(--blue-bright);
}

.build-label {
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 2px 4px;
}

.tilt-meter {
  width: clamp(76px, 9vw, 106px);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.tilt-ring {
  --tilt-angle: 0deg;
  position: relative;
  width: clamp(72px, 8.5vw, 98px);
  aspect-ratio: 1;
  border: 8px solid #ededed;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #d6d6d6, 0 4px 8px var(--shadow);
  transform: rotate(90deg);
}

.tilt-zero {
  position: absolute;
  inset: 50% auto auto 50%;
  color: var(--blue-bright);
  transform: translate(-50%, -50%);
  font-size: 1rem;
}

.tilt-needle {
  position: absolute;
  left: calc(50% - 2px);
  bottom: 50%;
  width: 4px;
  height: 38%;
  border-radius: 3px;
  background: var(--blue);
  transform-origin: 50% 100%;
  transform: rotate(var(--tilt-angle));
  transition: transform 60ms linear;
}

.tilt-readout {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
}

.tilt-readout strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.motion-cluster {
  width: 100%;
  height: 96%;
  display: grid;
  grid-template-rows: minmax(48px, 1.55fr) repeat(3, minmax(22px, 0.62fr));
  gap: 3px;
}

.motion-enable {
  width: 100%;
  min-height: 22px;
  border-radius: 7px;
  color: var(--blue);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.motion-enable.recenter {
  color: var(--ink);
}

.motion-label {
  line-height: 1.05;
}

.controller-menu {
  position: relative;
  width: 100%;
  min-height: 22px;
}

.controller-menu summary {
  width: 100%;
  height: 100%;
  min-height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 7px;
  background: var(--control);
  color: var(--ink);
  box-shadow: 0 4px 8px var(--shadow), inset 0 1px 0 #fff;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  list-style: none;
}

.controller-menu summary::-webkit-details-marker {
  display: none;
}

.controller-menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.36);
}

.menu-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 41;
  width: min(330px, calc(100vw - 28px));
  padding: 14px;
  display: grid;
  gap: 9px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: #fafafa;
  color: var(--ink);
  transform: translate(-50%, -50%) rotate(90deg);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto !important;
  min-height: 30px !important;
  padding: 0 10px;
  background: var(--ink) !important;
  color: #fff !important;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.menu-panel header {
  display: grid;
  gap: 3px;
  padding-right: 78px;
}

.menu-panel header strong {
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.menu-panel header small,
.menu-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.menu-panel label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.menu-panel select,
.menu-panel button {
  min-height: 38px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.menu-panel select {
  padding: 0 10px;
}

#stop-pairing-button {
  color: #8a1b16;
}

.dpad-zone {
  justify-items: end;
}

.dpad-disc {
  width: min(37vw, 232px);
  height: min(37vw, 232px);
  max-width: 92%;
  max-height: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f1f1f1;
  display: grid;
  place-items: center;
}

.dpad-grid {
  width: 88%;
  height: 88%;
  position: relative;
}

.dpad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: #fff;
  color: #315f73;
  font-size: clamp(2.35rem, 6vw, 4rem);
}

/* Four broad, disjoint wedges make almost the whole disc tappable. Logical
   directions are quarter-turned because portrait CSS is played 90° CCW. */
.dpad.up {
  justify-content: flex-end;
  padding-right: 13%;
  clip-path: polygon(54% 47%, 93% 10%, 100% 50%, 93% 90%, 54% 53%);
}

.dpad.right {
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 13%;
  clip-path: polygon(47% 54%, 53% 54%, 90% 93%, 50% 100%, 10% 93%);
}

.dpad.down {
  justify-content: flex-start;
  padding-left: 13%;
  clip-path: polygon(46% 47%, 46% 53%, 7% 90%, 0 50%, 7% 10%);
}

.dpad.left {
  justify-content: center;
  align-items: flex-start;
  padding-top: 13%;
  clip-path: polygon(47% 46%, 10% 7%, 50% 0, 90% 7%, 53% 46%);
}

.dpad-center {
  position: absolute;
  left: calc(50% - (var(--direction-hit-size) / 8));
  top: calc(50% - (var(--direction-hit-size) / 8));
  width: calc(var(--direction-hit-size) / 4);
  height: calc(var(--direction-hit-size) / 4);
  border-radius: 50%;
  background: #f1f1f1;
  pointer-events: none;
}

.dpad .rotated-label {
  font-family: Arial, sans-serif;
  font-weight: var(--direction-glyph-weight);
}

@media (orientation: portrait) {
  .controller-surface {
    height: calc(100svh - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 1fr) minmax(190px, 1fr) minmax(100px, 0.55fr) 48px minmax(230px, 1.2fr);
    grid-template-areas:
      "dpad"
      "motion"
      "action"
      "system"
      "face";
    gap: 6px;
    padding: 3px;
  }

  .dpad-zone { grid-area: dpad; }
  .motion-zone { grid-area: motion; }
  .action-zone { grid-area: action; }
  .system-zone { grid-area: system; }
  .face-zone { grid-area: face; }

  .face-zone,
  .action-zone,
  .motion-zone,
  .dpad-zone,
  .system-zone {
    width: 100%;
    height: 100%;
  }

  .dpad-zone {
    justify-items: center;
  }

  .dpad-disc {
    width: min(54vw, 210px);
    height: min(54vw, 210px);
  }

  .face-zone {
    grid-template-columns: 1.4fr 0.6fr;
  }

  .face-button.two {
    width: var(--primary-drive-size);
    height: var(--primary-drive-size);
    max-width: 96%;
    max-height: 96%;
  }

  .face-button.one {
    width: min(25vw, 96px);
    height: min(25vw, 96px);
  }

  .system-zone {
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 1fr;
    gap: clamp(22px, 10vw, 42px);
  }

  .action-zone {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .b-trigger {
    width: min(20vw, 78px);
    height: 88%;
  }

  .a-button {
    width: min(29vw, 112px);
    height: min(29vw, 112px);
  }

  .motion-zone {
    grid-template-columns: 42px 100px;
    justify-content: center;
    gap: 10px;
  }

  .motion-cluster {
    width: 100px;
    height: 180px;
    grid-template-rows: 48px repeat(3, 40px);
    justify-items: center;
    gap: 4px;
  }

  .motion-cluster .tilt-meter {
    width: 100px;
    gap: 3px;
  }

  .motion-cluster .tilt-ring {
    width: 60px;
  }

  .motion-cluster .motion-enable,
  .motion-cluster .controller-menu {
    width: 34px;
    height: 40px;
  }

  .motion-cluster .controller-menu summary {
    min-height: 40px;
    font-size: 0.54rem;
  }

  .motion-cluster .motion-label {
    font-size: 0.54rem;
  }

  .motion-cluster .tilt-readout span {
    display: none;
  }
}

@media (max-height: 740px) and (orientation: portrait) {
  .controller-surface {
    grid-template-rows: minmax(160px, 1fr) minmax(138px, 0.86fr) minmax(78px, 0.5fr) 40px minmax(205px, 1.25fr);
    gap: 4px;
  }

  .motion-cluster {
    height: 134px;
    grid-template-rows: 38px repeat(3, 30px);
  }

  .motion-cluster .tilt-ring {
    width: 50px;
  }

  .motion-cluster .motion-enable,
  .motion-cluster .controller-menu {
    width: 30px;
    height: 30px;
  }

  .motion-cluster .controller-menu summary {
    min-height: 30px;
  }

  .dpad-disc {
    width: 160px;
    height: 160px;
  }

  .face-button.two {
    width: 196px;
    height: 196px;
  }

  .face-button.one {
    width: 82px;
    height: 82px;
  }

  .system-button {
    width: 40px;
    height: 40px;
  }

  .a-button {
    width: 82px;
    height: 82px;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .controller-surface {
    grid-template-columns: minmax(160px, 1.25fr) 48px minmax(118px, 0.82fr) minmax(132px, 0.9fr) minmax(172px, 1.25fr);
    gap: 6px;
    padding: 3px;
  }

  .face-button.two {
    width: min(34vw, 164px);
    height: min(34vw, 164px);
  }

  .face-button.one {
    width: clamp(64px, 9vw, 82px);
    height: clamp(64px, 9vw, 82px);
  }

  .action-zone {
    gap: 6px;
  }

  .b-trigger {
    width: clamp(54px, 7vw, 68px);
  }

  .a-button {
    width: clamp(78px, 10vw, 94px);
    height: clamp(78px, 10vw, 94px);
  }

  .motion-zone {
    grid-template-columns: 34px minmax(118px, 1fr);
    gap: 4px;
  }

  .dpad-disc {
    width: min(31vw, 194px);
    height: min(31vw, 194px);
  }
}

@media (max-height: 330px) and (orientation: landscape) {
  .controller-surface {
    grid-template-columns: minmax(130px, 1.2fr) 40px minmax(96px, 0.82fr) minmax(108px, 0.9fr) minmax(140px, 1.2fr);
    gap: 4px;
    padding: 2px;
  }

  .face-zone,
  .action-zone,
  .motion-zone,
  .dpad-zone,
  .system-zone {
    height: 286px;
  }

  .face-button.two {
    width: 126px;
    height: 126px;
  }

  .face-button.one {
    width: 58px;
    height: 58px;
  }

  .system-button {
    width: 38px;
    height: 38px;
  }

  .a-button {
    width: 70px;
    height: 70px;
  }

  .b-trigger {
    width: 48px;
  }

  .dpad-disc {
    width: 150px;
    height: 150px;
  }
}