/* Kadabra Games Room v14
   Touch targets, mobile pan/scroll reliability, full-image fitting, and a
   center-pivot rotary dial. Loaded last so it can correct older room rules. */

:root {
  --touch-target: 44px;
  --touch-target-large: 48px;
}

/* General input behavior. Do not disable selection inside text fields or the
   1996 browser; only physical hardware and control surfaces are protected. */
button,
a,
[role="button"],
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(219, 184, 102, .18);
}

.tv-set button,
.vcr-unit button,
.side-tv-station button,
.phone-station button,
.computer-station button,
.room-gadget-shelf button,
.room-signal-console button,
.utility-inspect-row button,
.tape-library button,
.device-focus-overlay button,
.wall-calendar,
.phonebook-cover {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Game pages: the CRT itself owns vertical panning. A running VHS animation on
   the overflow element caused unreliable scrolling in mobile Chromium/Safari. */
.screen-content {
  overflow: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: auto !important;
}

html.touch-client body[data-effects="on"][data-tv-state="on"] .screen-content {
  animation: none !important;
}

.game-program {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: calc(100% + 1px);
  overflow: visible;
  padding-bottom: clamp(24px, 7cqw, 54px) !important;
}

/* The image is now a non-button frame, so swiping vertically over the picture
   scrolls the game page instead of being interpreted as a button gesture. */
.program-hero {
  display: grid !important;
  grid-template-rows: auto auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(203,231,181,.42);
  border-radius: 2px;
  background: #030503;
  touch-action: pan-y pinch-zoom;
  cursor: default;
}

.program-hero-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(190,220,175,.025) 25%, transparent 25% 75%, rgba(190,220,175,.025) 75%),
    #030503;
  background-size: 14px 14px;
  touch-action: pan-y pinch-zoom;
}

.program-hero img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 auto;
  background: #030503;
  touch-action: pan-y pinch-zoom;
  -webkit-user-drag: none;
  user-select: none;
}

.program-caption {
  position: static !important;
  display: block;
  min-height: 30px;
  margin: 0;
  padding: 7px 9px !important;
  border-top: 1px solid rgba(203,231,181,.24);
  background: rgba(0,0,0,.86) !important;
  color: rgba(231,244,216,.88);
  line-height: 1.35;
}

.program-next-image {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
  min-width: 86px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(218,185,95,.62);
  border-radius: 2px;
  background: rgba(3,7,4,.86);
  color: #e5d286;
  font: 800 7px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.program-next-image:hover,
.program-next-image:focus-visible {
  border-color: #ead579;
  background: rgba(20,29,19,.95);
}

.program-gallery {
  width: 100%;
  max-width: 100%;
}

.gallery-thumb {
  min-width: 0;
  touch-action: manipulation;
}

.gallery-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  -webkit-user-drag: none;
  user-select: none;
}

/* Rotary dial: the outer housing and finger stop stay fixed. Only the inner
   rotor spins, exactly around its center, then springs back. */
.rotary-dial {
  --dial-turn: 180deg;
  --dial-duration: 760ms;
  transform: none !important;
  rotate: 0deg !important;
  animation: none !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.dial-rotor {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.dial-plate {
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid rgba(193,172,126,.28);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, rgba(255,255,255,.035) 0 3deg, transparent 3deg 18deg),
    radial-gradient(circle, transparent 0 27%, rgba(181,166,128,.13) 28% 31%, rgba(0,0,0,.14) 32% 66%, transparent 67%);
  box-shadow: inset 0 0 10px rgba(0,0,0,.4);
  pointer-events: none;
}

.rotary-dial .dial-rotor button,
.rotary-dial .dial-center {
  z-index: 4;
}

.rotary-dial .dial-stop {
  z-index: 8;
}

.rotary-dial.is-turning .dial-rotor {
  animation: rotary-center-turn var(--dial-duration) cubic-bezier(.36,.02,.2,1) both;
}

@keyframes rotary-center-turn {
  0% { transform: rotate(0deg); }
  58% { transform: rotate(var(--dial-turn)); }
  68% { transform: rotate(var(--dial-turn)); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotary-dial.is-turning .dial-rotor { animation-duration: 1ms !important; }
}

/* Capability-based mobile/touch mode. The JS also adds .touch-client and a
   data-mobile-os value, but the media query works even before JS executes. */
@media (hover: none), (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  .tv-set button,
  .vcr-unit button,
  .side-tv-station button,
  .phone-station button,
  .computer-station button,
  .room-gadget-shelf button,
  .room-signal-console button,
  .utility-inspect-row button,
  .tape-library button,
  .device-focus-overlay button,
  .wall-calendar,
  .phonebook-cover {
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  /* Core controls reach a real finger-sized target instead of relying on tiny
     ornamental geometry. */
  .main-tv-service-controls button,
  .side-tv-button-row button,
  .vcr-button,
  .phone-controls button,
  .utility-inspect-row button,
  #room-signal-open,
  #device-focus-close,
  .dialog-action,
  .dialog-close,
  .chat-join-button,
  .chat-send-button,
  .chat-join-cancel {
    min-width: var(--touch-target) !important;
    min-height: var(--touch-target) !important;
    padding: 9px 10px !important;
    font-size: max(9px, .66rem) !important;
    line-height: 1.05 !important;
  }

  .tv-knob,
  .channel-knob,
  .side-knob,
  .pc-round-button,
  .pc-tower-switch,
  .pc-drive,
  .pc-small-button,
  .phone-receiver,
  .phone-crank,
  .room-intercom {
    min-width: var(--touch-target-large) !important;
    min-height: var(--touch-target-large) !important;
  }

  .tv-control-panel,
  .side-control-panel {
    gap: 8px;
  }

  .main-tv-service-controls {
    grid-template-columns: repeat(2, minmax(44px, 1fr)) !important;
    gap: 6px !important;
  }

  .side-tv-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .phone-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .utility-inspect-row {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .rotary-dial {
    width: 190px !important;
    height: 190px !important;
    --dial-radius: 72px !important;
  }

  .rotary-dial button {
    width: 40px !important;
    height: 40px !important;
    margin: -20px !important;
    font-size: 13px !important;
  }

  .dial-center {
    width: 54px !important;
    height: 54px !important;
    font-size: 22px !important;
  }

  .phone-body {
    min-height: 520px !important;
  }

  .device-in-focus[data-focus-kind="phone"] .rotary-dial {
    width: 230px !important;
    height: 230px !important;
    --dial-radius: 90px !important;
  }

  .device-in-focus[data-focus-kind="phone"] .rotary-dial button {
    width: 44px !important;
    height: 44px !important;
    margin: -22px !important;
    font-size: 15px !important;
  }


  #vcr-slot {
    min-height: var(--touch-target) !important;
  }

  .pc-mouse,
  .corgi-sticker {
    min-width: var(--touch-target) !important;
    min-height: var(--touch-target) !important;
  }

  .device-in-focus[data-focus-kind="computer"] .pc-start-button,
  .device-in-focus[data-focus-kind="computer"] .pc-task-button,
  .device-in-focus[data-focus-kind="computer"] .pc-tray {
    min-height: 36px !important;
  }

  .pc-key-row button {
    min-width: 29px !important;
    min-height: 29px !important;
    font-size: 8px !important;
    touch-action: manipulation !important;
  }

  .device-in-focus[data-focus-kind="computer"] .pc-key-row button {
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 10px !important;
  }

  .screen-content {
    animation: none !important;
    touch-action: pan-y pinch-zoom !important;
  }

  .program-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .gallery-thumb {
    min-height: 70px;
  }

  .program-next-image {
    min-width: 104px;
    min-height: 40px;
    font-size: 8px;
  }

  .program-caption {
    min-height: 38px;
    font-size: max(9px, .62rem) !important;
  }

  .screen-content::-webkit-scrollbar { width: 5px; }
}

/* Explicit JS-detected iOS/Android mode. This is a fallback for browsers that
   report unusual media capabilities (notably iPadOS desktop mode). */
html.touch-client .screen-content {
  animation: none !important;
  touch-action: pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch;
}

html.touch-client .physical-touch-control {
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

html[data-mobile-os="ios"] .screen-content {
  transform: none !important;
  translate: none !important;
}

@media (max-width: 620px) {
  .program-hero-media { aspect-ratio: 16 / 10; }
  .program-copy { font-size: 10px !important; line-height: 1.55 !important; }
  .feature-strip { grid-template-columns: 1fr !important; }
}

/* Prevent the room itself from becoming a sideways pan surface on phones. The
   K95 keyboard's decorative perspective transform was the largest offender. */
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .background-bay,
  .computer-bay,
  .background-zone .computer-station,
  .computer-station,
  .pc-monitor,
  .pc-monitor-shell,
  .pc-screen-bezel,
  .pc-desk,
  .pc-inputs,
  .pc-keyboard {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .background-zone .computer-station,
  .computer-station:not(.device-in-focus) {
    width: 100% !important;
  }

  .computer-station:not(.device-in-focus) .pc-desk {
    width: 100% !important;
    margin-inline: 0 !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }

  .pc-keyboard {
    width: 100% !important;
    transform: none !important;
    perspective: none !important;
    overflow: hidden;
  }

  .device-in-focus[data-focus-kind="computer"] {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    overflow-x: hidden !important;
  }

  .device-in-focus[data-focus-kind="computer"] .pc-monitor,
  .device-in-focus[data-focus-kind="computer"] .pc-desk,
  .device-in-focus[data-focus-kind="computer"] .pc-keyboard {
    width: 100% !important;
    max-width: 100% !important;
  }

  .device-in-focus[data-focus-kind="computer"] .pc-desk {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
}