/* Controller setup and phone deck share the player's console materials. */
.player-ports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.player-port, .choice .player-port { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); min-height: 80px; padding: var(--space-3);
  text-align: left; border: var(--border) solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); }
.player-port svg { grid-row: span 2; width: 32px; height: 32px; }
.player-port b { font: 800 1.25rem/1.1 var(--font-display); }
.player-port small { font: 400 .8rem/1.3 var(--font-text); color: var(--ink-muted); }
.player-port svg, .controller-methods svg, .controller-method-guide > svg, .btn svg:has(use), .controller-port-icon svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.port-light { position: absolute; right: var(--space-2); top: var(--space-2); width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.player-port[data-controller="phone"] .port-light, .player-port[data-controller="gamepad"] .port-light { background: var(--good); }
.player-port[data-controller="empty"] svg { color: var(--ink-faint); }
.choice input:checked + .player-port small, .choice input:checked + .player-port svg { color: inherit; }
.choice input:checked + .player-port .port-light { background: currentColor; }
.compact-ports { gap: var(--control-gap); }
.compact-ports .player-port { min-height: 68px; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-1) var(--space-2); }
.compact-ports svg { width: 24px; height: 24px; }
.compact-ports b { font-size: 1.1rem; }
.compact-ports small { font-size: .75rem; }
.menu-player-icons { display: inline-flex; gap: var(--space-2); margin-left: var(--space-2); }
.controller-port-icon { display: inline-flex; align-items: center; gap: var(--space-1); }
.controller-port-icon svg { width: 16px; height: 16px; }
.controller-port-icon b { font: 500 .7rem var(--font-mono); }
.controller-port-icon[data-controller="empty"] { opacity: .45; }
.phone-pair-panel { width: 100%; max-width: 720px; max-height: 100%; display: flex; flex-direction: column; min-height: 0; }
.phone-pair-panel .panel-header { flex: none; margin-bottom: var(--space-3); }
.phone-pair-panel .panel-header h2 { text-wrap: balance; }
.phone-pair-panel .panel-header .eyebrow { margin-bottom: var(--space-1); }
.phone-pair-panel .close svg { width: 20px; height: 20px; }
.controller-setup-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-1); touch-action: pan-y; }
.controller-intro { margin: 0 0 var(--space-4); color: var(--ink-muted); text-wrap: pretty; }
.player-choice { grid-auto-flow: initial; margin-bottom: var(--space-4); }
.controller-methods { margin-bottom: var(--space-4); }
.controller-methods span { gap: var(--space-2); padding-inline: var(--space-2); }
.controller-methods svg { width: 20px; height: 20px; flex: none; }
.controller-methods b { font-weight: inherit; }
.controller-phone-details { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.qr-frame { align-self: start; padding: var(--space-3); border-radius: var(--radius-md); border: var(--border) solid var(--line); background: var(--surface-2); text-align: center; }
.phone-qr { display: block; width: min(208px, 100%); height: auto; margin: 0 auto; background: #ffffff; image-rendering: pixelated; }
.qr-frame p { margin: var(--space-3) 0 0; font-size: .85rem; text-wrap: balance; }
.pair-instructions h3, .controller-method-guide h3 { margin: 0 0 var(--space-3); color: var(--ink); }
.pair-instructions ol { padding-left: 1.25em; margin: 0; }
.pair-instructions li { margin-bottom: var(--space-3); padding-left: var(--space-1); text-wrap: pretty; }
.pair-instructions p { margin: var(--space-3) 0; }
.controller-method-guide { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-md); border: var(--border) solid var(--line); }
.controller-method-guide > svg { width: 40px; height: 40px; flex: none; color: var(--ink-muted); }
.controller-method-guide p { margin: 0; text-wrap: pretty; }
.controller-method-guide p + p { margin-top: var(--space-3); }
.controller-setup-body .problem { margin-top: var(--space-3); }
.controller-setup-footer { flex: none; padding-top: var(--space-3); margin-top: var(--space-3); border-top: var(--border) solid var(--line); }
.controller-setup-footer p { margin: 0 0 var(--space-2); text-wrap: pretty; }
.controller-setup-footer .btn { min-height: var(--control-height); }

/* Disconnected pages can scroll; the playing deck stays fixed beneath the thumbs. */
.phone-controller { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.phone-controller[data-connected="true"] { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.controller-shell { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-3); height: 100dvh; min-height: 280px;
  padding: calc(var(--safe-top) + var(--space-3)) calc(var(--safe-right) + var(--space-4)) calc(var(--safe-bottom) + var(--space-3)) calc(var(--safe-left) + var(--space-4)); }
.phone-controller[data-connected="false"] .controller-shell { height: auto; min-height: 100dvh; display: block; }
.controller-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: relative; z-index: 4; }
.controller-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.controller-device-icon { width: 32px; height: 32px; flex: none; color: var(--ink-muted); }
.controller-header h1 { font: 800 1.6rem/1.1 var(--font-display); margin: 0; text-wrap: balance; }
.controller-header p { margin: var(--space-1) 0 0; font-size: .8rem; line-height: 1.3; color: var(--ink-muted); }
.controller-header .controller-connection { display: flex; align-items: center; gap: var(--space-2); }
.controller-connection::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.phone-controller[data-connected="true"] .controller-connection { color: var(--good); }
.phone-controller[data-connected="true"] .controller-connection::before { background: currentColor; }
.controller-header .btn { flex: none; min-height: var(--control-height); padding-inline: var(--space-3); }
.controller-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.phone-controller #phonePause svg { display: none; }
.phone-controller #phonePause[data-action="pause"] .pause-game,
.phone-controller #phonePause[data-action="resume"] .resume-game,
.phone-controller #phonePause[data-action="back"] .back-game { display: block; }
.controller-header .controller-view-toggle { min-width: var(--control-height); padding: var(--space-2); gap: var(--space-1); font-size: .875rem; }
.controller-view-toggle svg { width: 22px; height: 22px; display: block; }
.controller-view-toggle[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-ink); }
.controller-connect { width: 100%; max-width: 440px; margin: clamp(24px, 7vh, 72px) auto var(--space-5); text-align: center; }
.controller-connect-art { display: block; width: 80px; height: 80px; margin: 0 auto var(--space-5); color: var(--ink-muted); }
.controller-connect h2 { margin: 0 0 var(--space-3); font: 800 2rem/1.1 var(--font-display); text-wrap: balance; }
.controller-connect p { margin: var(--space-4) 0; text-wrap: pretty; }
.controller-connect .btn { width: 100%; }
.controller-deck { position: relative; min-height: 0; border-radius: var(--radius-lg); border: var(--border) solid var(--line); background: var(--controller-deck-texture); box-shadow: var(--recess-shadow, none); }
.controller-deck::after { content: ''; position: absolute; top: var(--space-4); bottom: var(--space-4); left: 50%; border-left: var(--border) solid var(--line); }
.controller-game-view { position: absolute; top: 0; left: 0; right: 0; height: 46%; padding: var(--space-2); border-bottom: var(--border) solid var(--line); z-index: 3; pointer-events: none; }
.controller-game-view video { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.controller-view-status { position: absolute; inset: var(--space-3); margin: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); text-align: center; text-wrap: balance; color: var(--ink-muted); background: var(--surface-2); font-size: .85rem; }
.controller-view-status p { margin: 0; }
.controller-view-status .btn { pointer-events: auto; }
.phone-controller[data-view="true"] .controller-deck::after { top: var(--controller-view-height, 46%); }
.phone-controller[data-view-state="unavailable"] .controller-game-view { height: auto; }
.phone-controller[data-view-state="unavailable"] .controller-game-view video { display: none; }
.phone-controller[data-view-state="unavailable"] .controller-view-status { position: static; padding: var(--space-3); }
.controller-guide { position: absolute; top: var(--space-4); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; text-align: center; pointer-events: none; }
.controller-guide p { margin: 0; font: 800 1.6rem/1.1 var(--font-display); }
.controller-guide span { display: block; margin-top: var(--space-2); font: 400 .8rem/1.3 var(--font-text); color: var(--ink-muted); }
.controller-footer { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); z-index: 4; pointer-events: none; }
.controller-footer .hud-button { pointer-events: auto; }
.controller-port-tag { display: grid; place-content: center; width: var(--control-height); height: var(--control-height); border: var(--border) solid var(--line); border-radius: var(--radius-md); color: var(--ink-muted); font: 500 .9rem var(--font-mono); font-variant-numeric: tabular-nums; }
.phone-controller .touch-zone { top: var(--controller-top); bottom: var(--controller-bottom); }
.phone-controller .touch-controls::before { display: none; }
.phone-controller .stick { top: calc(var(--rest-y) - var(--controller-top)); }
.phone-controller .touch-zone.move .stick:not(.active) { left: var(--move-rest-x); }
.phone-controller .touch-zone.fire .stick:not(.active) { left: var(--fire-rest-x); }
.phone-controller .touch-controls .touch-buttons { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: var(--controller-buttons-bottom); height: var(--control-height); opacity: 1; }
.phone-controller .touch-button { min-width: 80px; min-height: var(--control-height); }
.phone-controller .touch-button.down { transform: scale(.96); }
.phone-controller .stick-label { display: none; }
.phone-controller .stick:not(.active) { opacity: .65; }
.phone-controller .stick.active { opacity: 1; }
@media (max-width: 560px) and (min-height: 461px) {
  .controller-phone-details { grid-template-columns: 1fr; gap: var(--space-4); }
  .qr-frame { padding: var(--space-3); }
  .phone-qr { width: 180px; }
  .controller-methods span { flex-direction: column; gap: var(--space-1); min-height: 64px; font-size: .875rem; }
  .player-port, .choice .player-port { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-1) var(--space-2); }
  .player-port svg { width: 24px; height: 24px; }
}
@media (max-height: 460px) {
  .phone-pair-panel .panel-header .eyebrow { display: none; }
  .phone-pair-panel .panel-header { margin-bottom: var(--space-2); }
  .player-port, .choice .player-port { min-height: 68px; }
  .controller-setup-footer { margin-top: var(--space-2); padding-top: var(--space-2); }
  .controller-setup-footer p { display: none; }
  .controller-connect { max-width: 640px; margin-top: var(--space-4); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 var(--space-4); text-align: left; }
  .controller-connect > * { grid-column: 2; }
  .controller-connect .controller-connect-art { grid-column: 1; grid-row: 1 / span 5; width: 64px; height: 64px; margin: auto 0; }
  .controller-connect h2 { font-size: 1.6rem; }
  .controller-connect p { margin: var(--space-2) 0; }
  .controller-connect .small { display: none; }
  .controller-guide { top: var(--space-3); }
  .controller-guide p { font-size: 1.3rem; }
  .controller-guide span { display: none; }
  .controller-game-view { top: var(--space-2); bottom: var(--space-2); left: 32%; right: 32%; height: auto; border: 0; padding: 0; }
  .phone-controller[data-view-state="unavailable"] .controller-view-status { height: 100%; }
  .phone-controller[data-view="true"] .controller-deck::after { display: none; }
  .phone-controller[data-view="true"] .controller-guide { grid-template-columns: 40% 20% 40%; }
  .phone-controller[data-view="true"] .controller-guide p:last-child { grid-column: 3; }
}
@media (max-width: 380px) {
  .controller-header h1 { font-size: 1.4rem; }
  .controller-header .btn { font-size: .875rem; }
  .controller-identity { gap: var(--space-2); }
  .controller-device-icon { display: none; }
  .player-port b { font-size: 1.15rem; }
}

/* Shared play uses the same picture-first safe area and floating controls as
   local mobile play. The original deck remains useful while watching the TV. */
.phone-controller.shared-view .controller-shell { display: block; padding: 0; }
.phone-controller.shared-view .controller-deck { position: absolute; inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  border: 0; border-radius: 0; background: none; box-shadow: none; }
.phone-controller.shared-view .controller-deck::after { display: none; }
.phone-controller.shared-view .controller-game-view { left: var(--remote-picture-left); top: var(--remote-picture-top); right: auto; bottom: auto;
  width: var(--remote-picture-width); height: var(--remote-picture-height); padding: 0; border: 0; z-index: 1; }
.phone-controller.shared-view .controller-header, .phone-controller.shared-view .controller-actions { display: contents; }
.phone-controller.shared-view .controller-actions .hud-button { position: absolute; z-index: 4; top: calc(var(--safe-top) + var(--space-2)); }
.phone-controller.shared-view #phonePause { left: calc(var(--safe-left) + var(--space-2)); }
.phone-controller.shared-view #viewPhone { right: calc(var(--safe-right) + var(--control-height) + 2 * var(--space-2)); }
.phone-controller.shared-view #phoneImmersive { right: calc(var(--safe-right) + var(--space-2)); }
.phone-controller #phoneImmersive .contract-view, .phone-controller #phoneImmersive[aria-pressed="true"] .expand-view { display: none; }
.phone-controller #phoneImmersive[aria-pressed="true"] .contract-view { display: block; }
.phone-controller .controller-view-toggle[aria-pressed="true"] { background: var(--hud-bg); color: var(--ink); }
.phone-controller.shared-view .touch-controls .touch-buttons { top: calc(var(--safe-top) + var(--space-2)); bottom: auto;
  left: calc(50% - var(--control-height) - var(--control-height) / 2 - var(--space-2)); transform: none; opacity: 1; }
.phone-controller.shared-view .touch-zone.move .stick:not(.active) { left: var(--rest-inset); }
.phone-controller.shared-view .touch-zone.fire .stick:not(.active) { left: calc(100% - var(--rest-inset)); }
.phone-controller.shared-view .controller-footer { position: absolute; left: calc(var(--safe-left) + var(--space-2));
  bottom: calc(var(--safe-bottom) + var(--space-2)); }
.phone-controller.shared-view .controller-port-tag { display: none; }
.phone-controller.shared-view .controller-identity { position: absolute; z-index: 4; left: calc(var(--safe-left) + var(--touch-rail) + var(--space-2));
  bottom: calc(var(--safe-bottom) + var(--space-3)); max-width: calc(100% - var(--safe-left) - var(--safe-right) - var(--touch-rail) - 2 * var(--space-3)); pointer-events: none; }
.phone-controller.shared-view .controller-device-icon { display: none; }
.phone-controller.shared-view .controller-identity h1 { font-size: 1rem; }
.phone-controller.shared-view .controller-identity .controller-connection { margin-top: var(--space-1); font-size: .75rem; }
.phone-controller.shared-view .controller-guide { grid-template-columns: 1fr 1fr; }
.phone-controller.shared-view .controller-guide p:last-child { grid-column: 2; }
.phone-controller.shared-view.immersive #controllerGuide,
.phone-controller.shared-view.immersive #phoneGameState { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.phone-controller.shared-view.immersive .stick:not(.active) { opacity: 0; }
@media (orientation: landscape) {
  .phone-controller.shared-view .controller-guide { grid-template-columns: var(--remote-gutter) 1fr var(--remote-gutter); }
  .phone-controller.shared-view .controller-guide p:last-child { grid-column: 3; }
  .phone-controller.shared-view .controller-identity { left: auto; right: calc(var(--safe-right) + var(--space-2));
    width: calc(var(--touch-rail) - 2 * var(--space-2)); bottom: calc(var(--safe-bottom) + var(--space-3)); text-align: center; }
  .phone-controller.shared-view .controller-identity h1 { font-size: .85rem; }
  .phone-controller.shared-view .controller-identity .controller-connection { justify-content: center; gap: 0; height: var(--space-2); font-size: 0; }
  .phone-controller.shared-view #phoneGameState { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .phone-controller.shared-view.immersive .controller-actions .hud-button { right: auto; left: calc(var(--safe-left) + var(--space-2)); }
  .phone-controller.shared-view.immersive #viewPhone { top: calc(var(--safe-top) + var(--touch-rail)); }
  .phone-controller.shared-view.immersive #phoneImmersive { top: calc(var(--safe-top) + var(--touch-rail) + var(--control-height) + var(--space-2)); }
  .phone-controller.shared-view.immersive .touch-buttons { display: contents; }
  .phone-controller.shared-view.immersive .touch-button { position: absolute; right: calc(var(--safe-right) + var(--space-2)); z-index: 4; }
  .phone-controller.shared-view.immersive .touch-button[data-button="SELECT"] { top: calc(var(--safe-top) + var(--space-2)); }
  .phone-controller.shared-view.immersive .touch-button[data-button="START"] { top: calc(var(--safe-top) + var(--touch-rail)); }
}