/* Match controls and responsive presentation. */

html.game-viewport-root,
body.game-viewport,
body.app-game-route {
  width: 100%;
  height: var(--viewport-height, var(--bb-visual-height, 100dvh));
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body.app-game-route > #appRoot {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  min-height: 0;
  pointer-events: none;
}

body.app-game-route > #appRoot .react-landscape-gate,
body.app-game-route > #appRoot .game-react-status {
  pointer-events: auto;
}

body.app-game-route .view3d,
body.app-game-route .powerSliderContainer,
body.app-game-route .ballContainer,
body.app-game-route angle-input {
  touch-action: none;
}

body.app-game-route .shot-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  grid-template-columns:
    minmax(132px, 188px)
    minmax(420px, 680px)
    minmax(260px, 1fr);
  color: var(--color-ink);
  background:
    radial-gradient(
      circle at 18% 122%,
      color-mix(in oklch, var(--optic-cyan) 18%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 78% 128%,
      color-mix(in oklch, var(--optic-energy) 20%, transparent),
      transparent 38%
    ),
    linear-gradient(
      112deg,
      color-mix(in oklch, var(--glass-paper-faint) 16%, transparent),
      transparent
    );
  border-top: 1px solid var(--glass-highlight-medium);
  box-shadow:
    0 -8px 24px color-mix(in oklch, var(--shadow-optic-soft) 28%, transparent),
    inset 0 1px var(--glass-highlight-medium);
  backdrop-filter: blur(10px) saturate(1.18);
}

body.app-game-route .shot-dock.optical-glass-active {
  background: transparent;
  backdrop-filter: none;
}

body.app-game-route .shot-dock.liquid-glass-fallback {
  background:
    radial-gradient(
      circle at 16% 118%,
      color-mix(in oklch, var(--optic-cyan) 9%, transparent),
      transparent 32%
    ),
    radial-gradient(
      circle at 76% 120%,
      color-mix(in oklch, var(--optic-energy) 10%, transparent),
      transparent 38%
    ),
    color-mix(in oklch, var(--glass-paper-faint) 8%, transparent);
  backdrop-filter: blur(5px) saturate(1.06);
}

body.app-game-route .shot-dock::before {
  opacity: 0.22;
  background:
    linear-gradient(
      108deg,
      transparent 18%,
      var(--glass-highlight-soft) 38%,
      transparent 58%
    ),
    radial-gradient(ellipse at 77% 112%, var(--optic-energy), transparent 48%);
}

body.app-game-route .liquid-glass-fx {
  inset: 0;
  height: 100%;
  opacity: 0.76;
  filter: saturate(1.08) contrast(1.018);
  mask-image: none;
  mix-blend-mode: normal;
}

body.app-game-route .tray-score-container {
  --game-ink: #f4faff;
  --game-muted: #cbdbe5;
  --game-cyan: #66e9fa;

  text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
  border-color: var(--glass-paper-strong);
  background:
    radial-gradient(
      circle at 15% 0%,
      color-mix(in oklch, var(--optic-cyan) 14%, transparent),
      transparent 43%
    ),
    radial-gradient(
      circle at 85% 0%,
      color-mix(in oklch, var(--optic-violet) 12%, transparent),
      transparent 43%
    ),
    rgb(235 244 249 / 86%);
  box-shadow:
    0 12px 34px color-mix(in oklch, var(--shadow-optic-soft) 54%, transparent),
    inset 0 -1px var(--glass-highlight-medium);
  backdrop-filter: blur(7px) saturate(1.12);
}

body.app-game-route .control-tutorial {
  z-index: 20000;
  pointer-events: auto;
  isolation: isolate;
}

body.app-game-route .game-settings,
body.app-game-route .cue-selector,
body.app-game-route .table-selector,
body.app-game-route #helpOverlay {
  z-index: 22000;
}

body.app-game-route .control-tutorial__card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

body.app-game-route .p1Score,
body.app-game-route .p2Score {
  border-color: var(--glass-highlight-medium);
  background: linear-gradient(
    115deg,
    color-mix(in oklch, var(--glass-highlight-soft) 42%, transparent),
    transparent
  );
}

body.app-game-route .hudMiddle {
  border-color: var(--glass-highlight-medium);
  background: color-mix(
    in oklch,
    var(--glass-highlight-medium) 34%,
    transparent
  );
  box-shadow:
    0 12px 28px var(--shadow-optic-soft),
    inset 0 1px var(--glass-highlight-medium);
}

body.app-game-route .view3d {
  /* Let fixed/popover descendants participate in the page stacking context.
     Raising the complete WebGL view above the HUD hid the match chrome and
     forced Chrome to recompose an idle drawing buffer. */
  z-index: auto;
  width: 100%;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  flex: 1 0 var(--viewport-height);
}

.camera-control-hint__touch {
  display: none;
}

.control-tutorial__touch {
  display: none;
}

body.app-game-route .shot-dock[data-action-mode="placement"] .shot-action {
  position: fixed;
  z-index: var(--game-z-popover);
  right: auto;
  bottom: calc(var(--game-dock-height) + 18px);
  left: 50%;
  width: max-content;
  display: grid;
  grid-column: auto;
  grid-row: auto;
  place-items: center;
  place-self: auto;
  pointer-events: none;
  transform: translateX(-50%);
}

body.app-game-route
  .shot-dock[data-action-mode="placement"]
  .shot-action
  .hitButton {
  width: 132px;
  height: 72px;
  padding: 8px 18px;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 18% 8%, var(--optic-cyan), transparent 42%),
    linear-gradient(
      112deg,
      color-mix(in oklch, white 82%, transparent),
      color-mix(in oklch, var(--color-energy-soft) 58%, transparent)
    );
  border: 1px solid var(--glass-highlight-strong);
  border-radius: 24px;
  box-shadow:
    0 14px 38px var(--shadow-optic),
    inset 0 1px var(--glass-highlight-strong),
    0 0 0 2px color-mix(in oklch, var(--color-accent) 22%, transparent);
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(1.3);
}

body.app-game-route
  .shot-dock[data-action-mode="placement"]
  .shot-action
  .shot-label {
  font-size: 16px;
}

body.app-game-route .game-social-dock,
body.app-game-route .chatarea[data-chat-state="open"],
body.app-game-route .match-chat-message,
body.app-game-route .shot-radial__surface,
body.app-game-route .quick-loadout {
  backdrop-filter: blur(24px) saturate(1.42);
}

body.app-game-route .aimControlColumn {
  height: 126px;
  grid-template-rows: 30px 96px;
}

body.app-game-route .powerSliderContainer {
  height: 132px;
  grid-template-rows: 98px auto;
}

body.app-game-route .power-arc__labels {
  top: 82px;
}

body.app-game-route .match-chat-toggle {
  min-height: 44px;
  color: var(--color-ink);
  background: var(--glass-paper-medium);
  border-color: var(--glass-highlight-strong);
  box-shadow:
    0 12px 34px var(--shadow-optic),
    inset 3px 0 0 var(--color-accent);
}

body.app-game-route .match-chat-message {
  color: var(--color-ink);
  background: var(--glass-paper-strong);
  border-color: var(--glass-highlight-strong);
  box-shadow: 0 12px 32px var(--shadow-optic-strong);
}

body.app-game-route .match-chat-message.is-mine {
  background: color-mix(in oklch, var(--color-accent-soft) 70%, white 30%);
}

body.app-game-route #inputTextDiv {
  bottom: calc(
    max(12px, var(--safe-bottom)) +
      max(var(--keyboard-height, 0px), var(--bb-keyboard-height, 0px))
  );
}

body.app-game-route .shot-radial__surface {
  background:
    radial-gradient(
      circle at 50% 50%,
      var(--glass-highlight-faint) 0 31%,
      transparent 32%
    ),
    radial-gradient(circle at 24% 18%, var(--optic-cyan), transparent 38%),
    radial-gradient(circle at 70% 30%, var(--optic-energy), transparent 36%),
    conic-gradient(
      from 184deg,
      var(--spectral-cyan),
      var(--spectral-violet),
      var(--spectral-energy),
      var(--spectral-cyan)
    );
  border-color: var(--glass-highlight-strong);
  box-shadow:
    -26px -24px 62px var(--shadow-optic),
    0 0 0 2px var(--glass-highlight-soft),
    inset 0 0 0 48px var(--glass-highlight-faint),
    inset 0 0 0 50px var(--control-ring),
    inset 0 0 64px var(--optic-cyan);
}

body.app-game-route .shot-radial__cue {
  background:
    radial-gradient(
      circle at 30% 22%,
      var(--glass-highlight-strong),
      transparent 34%
    ),
    linear-gradient(145deg, var(--control-cyan-mist), var(--control-cyan-deep));
  border-color: var(--glass-highlight-medium);
}

body.app-game-route .power-knob {
  border-color: var(--glass-highlight-strong);
  background: linear-gradient(
    90deg,
    var(--glass-highlight-medium),
    var(--control-cyan-bright)
  );
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--color-accent) 54%, transparent),
    0 12px 28px var(--shadow-control),
    inset 0 0 16px var(--optic-cyan);
}

body.app-game-route .power-readout {
  background: linear-gradient(
    110deg,
    var(--color-accent),
    color-mix(in oklch, var(--color-accent) 68%, var(--color-optic-violet))
  );
}

@media (orientation: landscape) and (pointer: coarse) {
  :root {
    --game-topbar-height: clamp(48px, 13.5vh, 56px);
    --game-dock-height: clamp(92px, 26vh, 108px);
  }

  body.app-game-route .tray-score-container {
    height: var(--game-topbar-height);
    min-height: var(--game-topbar-height);
    padding: 0 max(8px, var(--safe-right)) 0 max(8px, var(--safe-left));
    grid-template-columns:
      44px minmax(132px, 1fr) minmax(126px, 0.78fr) minmax(132px, 1fr)
      minmax(68px, auto);
    gap: 4px;
    border-radius: 0 0 18px 18px;
  }

  body.app-game-route .tray-score-container::before,
  body.app-game-route .hud-system-status > span,
  body.app-game-route .hud-rule-label {
    display: none;
  }

  body.app-game-route .hud-player-detail {
    display: flex;
    max-width: min(24vw, 150px);
    overflow: hidden;
    font-size: clamp(6px, 1.55vw, 8px);
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.app-game-route .hud-player-detail > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-game-route .hud-system-status button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px;
  }

  body.app-game-route a#lobbyOverlay {
    width: auto;
    min-width: 64px;
    height: 40px;
    min-height: 40px;
    padding-inline: 7px;
    border-radius: 13px;
  }

  body.app-game-route .lobby-count {
    display: inline;
    font-size: 9px;
  }

  body.app-game-route .p1Score,
  body.app-game-route .p2Score {
    min-height: 44px;
    padding: 3px 8px;
    gap: 7px;
    border-radius: 14px;
  }

  body.app-game-route .p1Score {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  body.app-game-route .p2Score {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  body.app-game-route .hud-avatar {
    width: 34px;
    height: 34px;
    border-width: 2px;
    font-size: 10px;
  }

  body.app-game-route .hud-name {
    max-width: 13ch;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.app-game-route .hudMiddle {
    min-height: 48px;
    padding: 6px 8px 3px;
    border-radius: 0 0 16px 16px;
  }

  body.app-game-route .hud-scoreline {
    gap: 9px;
    font-size: 26px;
  }

  body.app-game-route .hud-turn-label {
    font-size: 9px;
  }

  body.app-game-route .shot-dock {
    height: var(--game-dock-height);
    min-height: var(--game-dock-height);
    flex-basis: var(--game-dock-height);
    grid-template-columns: 78px minmax(300px, 1fr);
    grid-template-rows: 1fr;
    gap: 8px;
    padding: 4px max(8px, var(--safe-right)) max(4px, var(--safe-bottom))
      max(8px, var(--safe-left));
  }

  body.app-game-route .shot-dock__toggle {
    top: -29px;
    min-height: 30px;
    padding-inline: 10px;
    border-radius: 12px 12px 0 0;
    font-size: 9px;
  }

  body.app-game-route .aimControlColumn {
    height: 86px;
    grid-template-columns: 24px 58px;
    grid-template-rows: 0 86px;
  }

  body.app-game-route .shot-control-heading,
  body.app-game-route .power-instruction span,
  body.app-game-route .hitButton small,
  body.app-game-route .quick-loadout,
  body.app-game-route .camera-control-hint {
    display: none;
  }

  body.app-game-route .camera-control-hint__mouse {
    display: none;
  }

  body.app-game-route .camera-control-hint__touch {
    display: inline;
  }

  body.app-game-route .control-tutorial__desktop {
    display: none;
  }

  body.app-game-route .control-tutorial__touch {
    display: grid;
  }

  body.app-game-route .ballContainerWrapper,
  body.app-game-route .ballContainerWrapper.is-disabled,
  body.app-game-route .ballContainer,
  body.app-game-route .ballContainer.is-disabled {
    width: 58px;
    height: 58px;
  }

  body.app-game-route .openElevation {
    left: -26px;
    width: 28px;
    height: 36px;
  }

  body.app-game-route .powerSliderContainer {
    width: min(100%, clamp(420px, 68vw, 560px));
    max-width: none;
    height: 80px;
    grid-template-rows: 64px auto;
    place-self: center;
  }

  body.app-game-route .power-arc__labels {
    top: 63px;
  }

  body.app-game-route .power-knob {
    width: 26px;
    height: 40px;
    border-width: 3px;
  }

  body.app-game-route .power-readout {
    min-width: 44px;
    min-height: 25px;
    top: calc(var(--power-y) - 35px);
    font-size: 11px;
  }

  body.app-game-route .power-instruction strong {
    font-size: 9px;
  }

  body.app-game-route .shot-radial {
    position: relative;
    right: auto;
    bottom: auto;
    width: 144px;
    height: 144px;
    place-self: center end;
    transform: none;
  }

  body.app-game-route .shot-radial__surface {
    width: 144px;
    height: 144px;
    inset: 0;
    box-shadow:
      0 0 0 1px var(--glass-highlight-medium),
      inset 0 0 0 24px var(--glass-highlight-faint),
      inset 0 0 34px var(--optic-energy);
  }

  body.app-game-route .shot-radial__surface::before {
    inset: 29px;
  }

  body.app-game-route .shot-radial__surface::after {
    inset: 50px;
  }

  body.app-game-route .shot-radial__orbit {
    top: 34px;
    left: 34px;
    width: 76px;
    height: 76px;
    box-shadow:
      0 0 0 5px var(--glass-highlight-faint),
      0 0 24px var(--optic-cyan);
  }

  body.app-game-route .shot-radial__item {
    width: 40px;
    height: 40px;
  }

  body.app-game-route .shot-radial__item[data-orbit="aim"] {
    --angle: 224deg;
    --radius: 51px;
  }

  body.app-game-route .shot-radial__item[data-orbit="spin"] {
    --angle: 190deg;
    --radius: 51px;
  }

  body.app-game-route .shot-radial__item[data-orbit="elevation"] {
    --angle: 154deg;
    --radius: 51px;
  }

  body.app-game-route .shot-radial__item[data-orbit="camera"] {
    --angle: 120deg;
    --radius: 51px;
  }

  body.app-game-route .shot-radial__item i {
    font-size: 19px;
  }

  body.app-game-route .shot-radial__item span {
    display: none;
  }

  body.app-game-route .shot-radial__cue {
    width: 72px;
    height: 72px;
    padding: 0;
    border-width: 6px;
  }

  body.app-game-route .shot-radial__cue::before {
    top: 28px;
    left: 11px;
    width: 48px;
    height: 6px;
  }

  body.app-game-route .shot-radial__cue span,
  body.app-game-route .shot-radial__cue i {
    display: none;
  }

  body.app-game-route .game-social-dock {
    bottom: calc(var(--game-dock-height) + 8px);
    left: max(8px, var(--safe-left));
    min-width: 168px;
    min-height: 42px;
    padding: 4px 10px;
  }

  body.app-game-route .game-social-drawer {
    inset: calc(var(--game-topbar-height) + 6px) max(8px, var(--safe-right))
      auto auto;
    width: min(252px, 36vw);
    max-height: calc(
      var(--viewport-height) - var(--game-topbar-height) -
        var(--game-dock-height) - 14px
    );
    padding: 10px;
    gap: 8px;
  }

  body.app-game-route .game-social-dock__avatars i {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }

  body.app-game-route .chatarea {
    top: calc(var(--game-topbar-height) + 7px);
    left: max(8px, var(--safe-left));
    width: min(260px, 31vw);
  }

  body.app-game-route .chatoutput {
    max-height: min(
      126px,
      calc(
        var(--viewport-height) - var(--game-topbar-height) -
          var(--game-dock-height) - 24px
      )
    );
  }

  body.app-game-route .outerMenu {
    top: calc(var(--game-topbar-height) + 7px);
    right: max(7px, var(--safe-right));
  }

  body.app-game-route .view3d {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
  }

  body.app-game-route .shot-dock[data-action-mode="placement"] .shot-action {
    bottom: calc(var(--game-dock-height) + 8px);
  }

  body.app-game-route
    .shot-dock[data-action-mode="placement"]
    .shot-action
    .hitButton {
    width: 116px;
    height: 54px;
    border-width: 1px;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (height <= 390px) {
  :root {
    --game-topbar-height: 48px;
    --game-dock-height: 94px;
  }

  body.app-game-route .shot-dock {
    grid-template-columns: 66px minmax(260px, 1fr);
  }

  body.app-game-route .aimControlColumn {
    height: 78px;
    grid-template-columns: 20px 52px;
    grid-template-rows: 0 78px;
  }

  body.app-game-route .ballContainerWrapper,
  body.app-game-route .ballContainerWrapper.is-disabled,
  body.app-game-route .ballContainer,
  body.app-game-route .ballContainer.is-disabled {
    width: 52px;
    height: 52px;
  }

  body.app-game-route .powerSliderContainer {
    width: min(100%, clamp(360px, 64vw, 500px));
    height: 62px;
    grid-template-rows: 50px auto;
    transform: translateY(-5px);
  }

  body.app-game-route .power-arc__labels {
    top: 49px;
  }

  body.app-game-route .power-knob {
    width: 24px;
    height: 36px;
  }

  body.app-game-route .power-readout {
    top: calc(var(--power-y) - 31px);
    min-width: 40px;
    min-height: 22px;
  }

  body.app-game-route .power-instruction {
    transform: translateY(-2px);
  }

  body.app-game-route .shot-radial {
    width: 124px;
    height: 124px;
  }

  body.app-game-route .shot-radial__surface {
    width: 124px;
    height: 124px;
  }

  body.app-game-route .shot-radial__surface::before {
    inset: 25px;
  }

  body.app-game-route .shot-radial__surface::after {
    inset: 44px;
  }

  body.app-game-route .shot-radial__orbit {
    top: 29px;
    left: 29px;
    width: 66px;
    height: 66px;
  }

  body.app-game-route .shot-radial__item[data-orbit="aim"],
  body.app-game-route .shot-radial__item[data-orbit="spin"],
  body.app-game-route .shot-radial__item[data-orbit="elevation"],
  body.app-game-route .shot-radial__item[data-orbit="camera"] {
    --radius: 44px;
  }

  body.app-game-route .shot-radial__cue {
    width: 62px;
    height: 62px;
  }

  body.app-game-route .shot-radial__cue::before {
    top: 24px;
    left: 9px;
    width: 42px;
  }

  body.app-game-route .game-social-dock {
    min-width: 150px;
  }
}

@media (orientation: portrait) and (pointer: coarse) {
  body.app-game-route > :not(#appRoot, script) {
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-game-route .liquid-glass-fx {
    display: none;
  }
}

/* Scene-first cleanup: one top social entry, one bottom shot path, no radial dock. */
@media (pointer: fine) {
  body.app-game-route {
    --game-dock-height: clamp(132px, 14.5vh, 152px);
  }
}

body.app-game-route .quick-loadout {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(100%, 360px);
  min-width: 0;
  place-self: center end;
}

body.app-game-route .game-social-drawer {
  inset: calc(var(--game-topbar-height) + 10px) max(12px, var(--safe-right))
    auto auto;
}

body.app-game-route a#lobbyOverlay {
  min-width: 112px;
  justify-content: center;
}

body.app-game-route .game-overflow-menu {
  min-width: 48px;
  justify-items: center;
}

body.app-game-route [data-precision-aim="true"][aria-pressed="true"] {
  color: var(--color-accent-ink);
  background: var(--color-accent-soft);
}

@media (901px <= width <= 1500px) and (pointer: fine) {
  body.app-game-route .shot-dock {
    grid-template-columns: minmax(124px, 180px) minmax(420px, 720px);
    justify-content: start;
  }
}

body.app-game-route .shot-dock > .reposition-cue-ball {
  position: fixed;
  right: auto;
  bottom: calc(var(--game-dock-height) + 18px);
  left: 50%;
  z-index: var(--game-z-popover);
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 7px;
  color: var(--color-ink);
  background: var(--glass-paper-strong);
  border-color: var(--glass-highlight-strong);
  transform: translateX(-50%);
}

body.app-game-route .shot-dock > .reposition-cue-ball[hidden] {
  display: none;
}

/* Mobile landscape control rail: the table owns the field; controls own one
   narrow, non-overlapping edge. */
@media (orientation: landscape) and (pointer: coarse) {
  body.app-game-route {
    --game-control-rail-width: calc(
      clamp(76px, 8.5vw, 88px) + var(--safe-right)
    );
    --game-dock-height: 0px;
  }

  body.app-game-route.shot-dock-collapsed {
    --game-control-rail-width: calc(48px + var(--safe-right));
  }

  body.app-game-route .view3d {
    width: calc(100% - var(--game-control-rail-width));
    min-width: 0;
    max-width: calc(100% - var(--game-control-rail-width));
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    margin-right: var(--game-control-rail-width);
    flex-basis: var(--viewport-height);
    transition: width 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  body.app-game-route .shot-dock {
    position: fixed;
    inset: calc(var(--game-topbar-height) + 4px) 0 0 auto;
    width: var(--game-control-rail-width);
    height: auto;
    min-height: 0;
    padding: 5px max(5px, var(--safe-right))
      calc(58px + max(4px, var(--safe-bottom))) 5px;
    display: grid;
    grid-template:
      "collapse" 40px
      "power" minmax(126px, 1fr)
      "spin" 62px
      "context" auto / minmax(0, 1fr);
    gap: 5px;
    align-content: stretch;
    align-items: center;
    color: var(--color-ink);
    background:
      radial-gradient(
        circle at 30% 18%,
        color-mix(in oklch, var(--optic-cyan) 10%, transparent),
        transparent 36%
      ),
      radial-gradient(
        circle at 24% 76%,
        color-mix(in oklch, var(--optic-energy) 8%, transparent),
        transparent 34%
      ),
      color-mix(in oklch, var(--glass-paper-faint) 38%, transparent);
    border: 0;
    border-left: 1px solid var(--glass-highlight-strong);
    border-radius: 22px 0 0;
    box-shadow:
      -12px 0 34px
        color-mix(in oklch, var(--shadow-optic-soft) 46%, transparent),
      inset 1px 0 var(--glass-highlight-medium);
    overflow: visible;
    backdrop-filter: blur(18px) saturate(1.34);
    transition:
      width 220ms cubic-bezier(0.23, 1, 0.32, 1),
      padding 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  body.app-game-route .shot-dock.optical-glass-active {
    background: color-mix(in oklch, var(--glass-paper-faint) 10%, transparent);
    backdrop-filter: none;
  }

  body.app-game-route .shot-dock .liquid-glass-fx {
    inset: 0;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(to left, black 78%, transparent);
  }

  body.app-game-route .shot-dock__toggle {
    position: relative;
    inset: auto;
    grid-area: collapse;
    width: 100%;
    min-width: 48px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
    color: var(--color-ink);
    background: color-mix(in oklch, var(--glass-paper-medium) 46%, transparent);
    border: 1px solid var(--glass-highlight-strong);
    border-radius: 14px;
    box-shadow:
      0 8px 22px var(--shadow-optic-soft),
      inset 0 1px var(--glass-highlight-medium);
    transform: none;
  }

  body.app-game-route .shot-dock__toggle i {
    transform: rotate(-90deg);
    transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  body.app-game-route.shot-dock-collapsed .shot-dock__toggle i {
    transform: rotate(90deg);
  }

  body.app-game-route .shot-dock__toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.app-game-route .powerSliderContainer {
    grid-area: power;
    width: 100%;
    height: 100%;
    min-height: 126px;
    max-width: none;
    padding: 0;
    display: block;
    place-self: stretch;
    overflow: visible;
    cursor: ns-resize;
    transform: none;
  }

  body.app-game-route .power-arc-canvas,
  body.app-game-route .power-arc {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body.app-game-route .power-arc__labels {
    inset: 15px auto 15px 2px;
    width: 16px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: color-mix(in oklch, var(--color-muted) 78%, transparent);
    font-size: 7px;
  }

  body.app-game-route .power-knob {
    width: 28px;
    height: 44px;
    border-width: 3px;
    transition: none;
  }

  body.app-game-route .power-readout {
    top: var(--power-y);
    left: 0;
    z-index: 3;
    min-width: 31px;
    min-height: 24px;
    padding-inline: 4px;
    border-radius: 8px;
    transform: translateY(-50%);
    transition: none;
    font-size: 10px;
  }

  body.app-game-route .power-readout span {
    font-size: 7px;
  }

  body.app-game-route .power-instruction {
    position: absolute;
    right: 2px;
    bottom: 2px;
    left: 2px;
    display: block;
    text-align: center;
  }

  body.app-game-route .power-instruction strong {
    padding: 2px 5px;
    color: var(--color-muted);
    background: color-mix(in oklch, var(--glass-paper-strong) 76%, transparent);
    border-radius: 999px;
    font-size: 8px;
  }

  body.app-game-route .power-instruction strong::before {
    content: "下拉 · ";
  }

  body.app-game-route .power-instruction span {
    display: none;
  }

  body.app-game-route
    .powerSliderContainer[data-gesture="pending"]
    .power-knob {
    transform: translate(-50%, -50%) rotate(var(--power-angle)) scale(1.04);
  }

  body.app-game-route .powerSliderContainer[data-gesture="cancel"] {
    filter: saturate(0.48);
  }

  body.app-game-route .powerSliderContainer[data-gesture="cancel"]::after {
    content: "松手取消";
    position: absolute;
    top: 50%;
    right: calc(100% + 8px);
    min-width: 64px;
    padding: 6px 8px;
    color: #a52242;
    background: rgb(255 247 249 / 94%);
    border: 1px solid rgb(207 69 99 / 24%);
    border-radius: 10px;
    box-shadow: 0 9px 24px var(--shadow-optic-soft);
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 750;
  }

  body.app-game-route .aimControlColumn {
    grid-area: spin;
    width: 100%;
    height: 62px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 62px;
    place-items: center;
  }

  body.app-game-route .shot-control-heading {
    display: none;
  }

  body.app-game-route .ballContainerWrapper,
  body.app-game-route .ballContainerWrapper.is-disabled,
  body.app-game-route .ballContainer,
  body.app-game-route .ballContainer.is-disabled {
    grid-column: 1;
    grid-row: 1;
    width: 58px;
    height: 58px;
    place-self: center;
  }

  body.app-game-route .openElevation {
    inset: -16px auto auto -6px;
    width: 44px;
    height: 44px;
    transform: none;
  }

  body.app-game-route .shot-dock[data-action-mode="placement"] .openElevation {
    display: none;
  }

  body.app-game-route .tiltSliderContainer {
    right: calc(100% + 8px);
    bottom: -8px;
    left: auto;
  }

  body.app-game-route .reposition-cue-ball,
  body.app-game-route .shot-action {
    position: relative;
    inset: auto;
    grid-area: context;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 48px;
    margin: 0;
    padding: 5px;
    place-self: stretch;
    pointer-events: auto;
    transform: none;
  }

  body.app-game-route .reposition-cue-ball,
  body.app-game-route .shot-dock[data-action-mode="placement"] .shot-action {
    position: fixed;
    right: max(5px, var(--safe-right));
    bottom: calc(58px + max(5px, var(--safe-bottom)));
    width: calc(clamp(76px, 8.5vw, 88px) - 10px);
  }

  body.app-game-route .reposition-cue-ball {
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--color-ink);
    background: color-mix(in oklch, var(--glass-paper-strong) 62%, transparent);
    border: 1px solid var(--glass-highlight-strong);
    border-radius: 13px;
    box-shadow:
      0 8px 22px var(--shadow-optic-soft),
      inset 0 1px var(--glass-highlight-medium);
    font-size: 9px;
  }

  body.app-game-route .reposition-cue-ball[hidden] {
    display: none;
  }

  body.app-game-route .reposition-cue-ball i {
    font-size: 17px;
  }

  body.app-game-route
    .shot-dock:has(.reposition-cue-ball:not([hidden]))
    .aimControlColumn {
    visibility: hidden;
    pointer-events: none;
  }

  body.app-game-route
    .shot-dock:has(.reposition-cue-ball:not([hidden]))
    .reposition-cue-ball {
    position: relative;
    inset: auto;
    grid-area: spin;
    width: 100%;
    min-height: 48px;
    place-self: stretch;
  }

  body.app-game-route .shot-action {
    display: none;
    padding: 0;
  }

  body.app-game-route .shot-dock[data-action-mode="placement"] .shot-action {
    display: grid;
  }

  body.app-game-route
    .shot-dock[data-action-mode="placement"]
    .shot-action
    .hitButton {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 4px;
    border: 1px solid var(--glass-highlight-strong);
    border-radius: 13px;
    pointer-events: auto;
  }

  body.app-game-route
    .shot-dock[data-action-mode="placement"]
    .powerSliderContainer {
    opacity: 0.24;
    pointer-events: none;
  }

  body.app-game-route .quick-loadout {
    display: none;
  }

  body.app-game-route .outerMenu {
    top: auto;
    right: max(5px, var(--safe-right));
    bottom: max(5px, var(--safe-bottom));
    width: calc(clamp(76px, 8.5vw, 88px) - 10px);
    height: 48px;
    min-height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.app-game-route .outerMenu > #menu {
    display: none;
  }

  body.app-game-route .game-overflow-toggle {
    width: 100%;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    color: var(--color-ink);
    background: color-mix(in oklch, var(--glass-paper-strong) 58%, transparent);
    border: 1px solid var(--glass-highlight-strong);
    border-radius: 14px;
    box-shadow:
      0 8px 22px var(--shadow-optic-soft),
      inset 0 1px var(--glass-highlight-medium);
  }

  body.app-game-route .game-overflow-menu {
    top: auto;
    right: calc(100% + 8px);
    bottom: 0;
    width: min(244px, 54vw);
    max-height: calc(var(--viewport-height) - var(--game-topbar-height) - 12px);
    padding: 8px;
    grid-template-columns: repeat(4, 48px);
    justify-content: end;
    gap: 6px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body.app-game-route .game-overflow-menu .menuButton {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  body.app-game-route .game-settings,
  body.app-game-route .cue-selector,
  body.app-game-route .table-selector {
    right: calc(var(--game-control-rail-width) + 6px);
  }

  body.app-game-route .chatarea {
    right: calc(var(--game-control-rail-width) + 7px);
    left: auto;
  }

  body.app-game-route #notificationOverlay {
    right: calc(var(--game-control-rail-width) + 8px);
  }

  body.app-game-route .shot-dock[data-dock-state="collapsed"] {
    width: var(--game-control-rail-width);
    height: auto;
    min-height: 0;
    padding: 5px max(4px, var(--safe-right)) 5px 4px;
    grid-template-rows: 48px;
  }

  body.app-game-route
    .shot-dock[data-dock-state="collapsed"]
    > :not(.shot-dock__toggle) {
    display: none;
  }

  body.app-game-route.shot-dock-collapsed .outerMenu {
    right: max(2px, var(--safe-right));
    width: 44px;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (height <= 390px) {
  body.app-game-route .shot-dock {
    grid-template-rows: 44px minmax(112px, 1fr) 54px auto;
    gap: 3px;
    padding-top: 3px;
  }

  body.app-game-route .shot-dock__toggle {
    min-height: 44px;
  }

  body.app-game-route .powerSliderContainer {
    min-height: 112px;
  }

  body.app-game-route .aimControlColumn {
    height: 54px;
    grid-template-rows: 54px;
  }

  body.app-game-route .ballContainerWrapper,
  body.app-game-route .ballContainerWrapper.is-disabled,
  body.app-game-route .ballContainer,
  body.app-game-route .ballContainer.is-disabled {
    width: 52px;
    height: 52px;
  }

  body.app-game-route .power-arc__labels {
    inset-block: 13px;
  }
}

@media (orientation: landscape) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  body.app-game-route .view3d,
  body.app-game-route .shot-dock,
  body.app-game-route .shot-dock__toggle i {
    transition: none;
  }
}

/* Compact touch controls: one hit target per row, no floating child buttons. */
@media (orientation: landscape) and (pointer: coarse) {
  body.app-game-route .shot-dock[data-action-mode="placement"] .shot-action {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    min-width: 0;
    grid-area: spin;
  }

  body.app-game-route
    .shot-dock[data-action-mode="placement"]
    .aimControlColumn {
    visibility: hidden;
    pointer-events: none;
  }

  body.app-game-route .shot-dock {
    grid-template:
      "collapse" 36px
      "power" minmax(80px, 1fr)
      "spin" 56px
      "context" auto / minmax(0, 1fr);
    gap: 4px;
  }

  body.app-game-route .powerSliderContainer {
    min-height: 80px;
  }

  body.app-game-route .power-instruction {
    bottom: 0;
    font-size: 0;
    white-space: nowrap;
  }

  body.app-game-route .power-instruction::after {
    content: "下拉蓄力";
    color: var(--color-ink);
    font-size: 10px;
  }

  body.app-game-route .power-instruction strong {
    display: none;
  }

  body.app-game-route .power-arc__labels {
    bottom: 22px;
  }

  body.app-game-route .aimControlColumn {
    height: 56px;
    grid-template-rows: 56px;
  }

  body.app-game-route .openElevation {
    inset: 0 auto auto -42px;
    width: 40px;
    height: 40px;
  }

  body.app-game-route
    .shot-dock[data-action-mode="placement"]
    .shot-action
    .hitButton {
    position: static;
    inset: auto;
    transform: none;
    margin: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 11px;
  }

  body.app-game-route .shot-dock .shot-action .hitButton small {
    display: none;
  }

  body.app-game-route #cueHit .shot-label {
    white-space: nowrap;
    font-size: 11px;
  }

  body.app-game-route
    .shot-dock:has(.reposition-cue-ball:not([hidden]))
    .reposition-cue-ball {
    transform: none;
    font-size: 10px;
    white-space: nowrap;
    padding: 4px 0;
    gap: 2px;
  }

  body.app-game-route .chatarea {
    top: calc(var(--game-topbar-height) + 6px);
    left: max(8px, var(--safe-left));
    right: auto;
    width: max-content;
    max-width: min(280px, 42vw);
  }

  body.app-game-route .chatarea[data-chat-state="peek"] .chatoutput {
    display: none;
  }

  body.app-game-route .chatarea[data-chat-state="open"] {
    width: min(280px, 42vw);
    padding: 8px;
    gap: 6px;
  }

  body.app-game-route .chatoutput {
    max-height: min(100px, 28dvh);
  }

  body.app-game-route .match-chat-toggle,
  body.app-game-route .match-chat-compose {
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }
}

body.app-game-route #notification {
  --notification-text-clr-main: #172b3c;
  --notification-text-clr-sub: #40586b;
  --notification-score-value-clr: #172b3c;
}

body.app-game-route #notification .notification-footer button {
  color: #243d50;
}

/* Clear match chrome: the scene continues behind both control surfaces. */
body.app-game-route .tray-score-container,
body.app-game-route .shot-dock,
body.app-game-route .shot-dock.optical-glass-active,
body.app-game-route .shot-dock.liquid-glass-fallback {
  color: #f4faff;
  background: rgb(8 20 32 / 18%);
  border-color: rgb(255 255 255 / 22%);
  box-shadow: inset 0 1px rgb(255 255 255 / 12%);
  backdrop-filter: blur(2px);
}

body.app-game-route .shot-dock::before,
body.app-game-route .shot-dock .liquid-glass-fx {
  display: none;
}

body.app-game-route .p1Score,
body.app-game-route .p2Score,
body.app-game-route .hudMiddle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.app-game-route .hud-turn-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}

body.app-game-route .hud-turn-status .breakScore {
  position: static;
  inset: auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  color: #ffdc88;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  font: 650 10px/1.2 var(--font-body);
  white-space: nowrap;
}

body.app-game-route .hud-turn-status .breakScore:empty {
  display: none;
}

body.app-game-route .hud-turn-label {
  min-width: 0;
}

body.app-game-route .hud-turn-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-game-route .hud-system-status {
  gap: 6px;
}

body.app-game-route .hud-system-status > button {
  pointer-events: auto;
  touch-action: manipulation;
}

body.app-game-route .hud-system-status button,
body.app-game-route .shot-dock__toggle,
body.app-game-route .game-overflow-toggle,
body.app-game-route .game-social-toggle,
body.app-game-route a#lobbyOverlay {
  color: #f4faff;
  background: rgb(8 20 32 / 24%);
  border: 1px solid rgb(255 255 255 / 30%);
  box-shadow: none;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}

body.app-game-route .hud-system-status .match-camera-toggle {
  width: 66px;
  min-width: 66px;
  padding: 4px;
  display: flex;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  font-size: 12px;
}

body.app-game-route .match-camera-toggle span {
  padding: 6px 3px;
  opacity: 0.65;
}

body.app-game-route
  .match-camera-toggle[data-camera-mode="2d"]
  [data-mode="2d"],
body.app-game-route
  .match-camera-toggle[data-camera-mode="3d"]
  [data-mode="3d"] {
  color: #071a24;
  background: #88e7f2;
  border-radius: 6px;
  opacity: 1;
  text-shadow: none;
}

body.app-game-route .hud-system-status .match-chat-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  position: relative;
}

body.app-game-route .match-chat-toggle > span {
  display: none;
}

body.app-game-route .chatarea[data-chat-state="peek"] {
  display: none;
}

@media (orientation: landscape) and (pointer: coarse) {
  body.app-game-route {
    --game-control-rail-width: calc(68px + var(--safe-right));
    --game-topbar-height: 52px;
  }

  body.app-game-route .view3d {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  body.app-game-route .tray-score-container {
    grid-template-columns:
      164px minmax(72px, 1fr) minmax(130px, 0.8fr) minmax(72px, 1fr)
      44px;
    gap: 4px;
    padding-inline: max(4px, var(--safe-left)) max(4px, var(--safe-right));
    border-radius: 0;
  }

  body.app-game-route .hud-system-status button {
    height: 44px;
    min-height: 44px;
  }

  body.app-game-route .p1Score,
  body.app-game-route .p2Score {
    padding: 2px;
    gap: 4px;
  }

  body.app-game-route .hudMiddle {
    padding: 2px;
    min-height: 48px;
  }

  body.app-game-route .hud-scoreline {
    color: #f4faff;
    font-size: 24px;
  }

  body.app-game-route .hud-scoreline > span:first-child {
    color: #70e2ff;
  }

  body.app-game-route .hud-scoreline > span:last-child {
    color: #d4afff;
  }

  body.app-game-route #lobbyContainer {
    min-width: 0;
    width: 44px;
    gap: 0;
  }

  body.app-game-route #lobbyOverlay {
    display: none;
  }

  body.app-game-route .game-social-toggle {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
  }

  body.app-game-route .shot-dock {
    inset: calc(var(--game-topbar-height) + 4px) 0 56px auto;
    padding: 4px max(4px, var(--safe-right)) 4px 4px;
    grid-template:
      "collapse" 44px "power" minmax(80px, 1fr)
      "spin" 56px "context" auto / minmax(0, 1fr);
    gap: 4px;
    border-radius: 16px 0 0 16px;
  }

  body.app-game-route .shot-dock__toggle {
    min-width: 44px;
    min-height: 44px;
  }

  body.app-game-route .outerMenu {
    width: 60px;
  }

  body.app-game-route .power-instruction::after {
    color: #f4faff;
    text-shadow: 0 1px 3px #000;
  }

  body.app-game-route .power-arc__labels {
    color: #e6f4fc;
    text-shadow: 0 1px 3px #000;
  }

  body.app-game-route .chatarea[data-chat-state="open"] {
    top: calc(var(--game-topbar-height) + 4px);
    left: max(4px, var(--safe-left));
    max-width: min(300px, 50vw);
    width: min(300px, 50vw);
  }

  body.app-game-route .shot-dock[data-dock-state="collapsed"] {
    bottom: auto;
    grid-template-rows: 44px;
  }
}

/* History belongs to the top bar; runtime tray updates cannot reopen it. */
body.app-game-route .match-history {
  width: 44px;
  flex: 0 0 44px;
  order: 2;
  pointer-events: auto;
}

body.app-game-route .match-history > summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #f4faff;
  background: rgb(8 20 32 / 24%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}

body.app-game-route .match-history > summary::-webkit-details-marker {
  display: none;
}

body.app-game-route .match-history > summary i {
  font-size: 22px;
}

body.app-game-route .match-history-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: max(6px, var(--safe-left));
  width: min(340px, 70vw);
  padding: 12px;
  color: #edf7ff;
  background: rgb(10 25 38 / 90%);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 14px;
  text-shadow: none;
}

body.app-game-route .match-history #ballTray {
  position: static;
  inset: auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

body.app-game-route .match-history-empty {
  display: block;
  padding-top: 8px;
  color: #cedee8;
  font-size: 12px;
}

body.app-game-route .match-history:has(.ball-item) .match-history-empty {
  display: none;
}

body.app-game-route #gameOverflowMenu .openElevation {
  position: static;
  inset: auto;
  width: 48px;
  height: 48px;
  transform: none;
}

@media (width >= 1024px) and (pointer: fine) {
  body.app-game-route .tray-score-container {
    grid-template-columns:
      minmax(204px, 0.8fr) minmax(200px, 1fr) minmax(180px, 0.8fr)
      minmax(200px, 1fr) minmax(128px, 0.6fr);
  }
}