/*
 * Quantum Pong — controls layer (QP.Controls, SPEC §12).
 * Neon touch controls over the playfield: cyan = left player, magenta = right player, gold = sandbox lab tools.
 * Offsets of the clusters / pause button and the touch unit --qpc-u (>= 48 px) are computed in controls.js from
 * the View, the paddle lanes and env(safe-area-inset-*) (read through .qpc-safe-probe).
 * Every control is translucent and only the controls themselves take pointer events, so the gaps between
 * buttons still steer the paddle.
 */

.qpc-root {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #e8f6ff;
  --qpc-u: 54px;
  --qpc-gap: 6px;
  --qpc-rgb: 56, 232, 255;
  --qpc-c: #38e8ff;
  --qpc-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.qpc-root * { box-sizing: border-box; }
.qpc-root.qpc-hidden { visibility: hidden; pointer-events: none; }
.qpc-root.qpc-hidden * { pointer-events: none !important; }

/* Measures env(safe-area-inset-*) for the layout code; invisible. */
.qpc-safe-probe {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  visibility: hidden; pointer-events: none;
  padding: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ---------------- colour themes ---------------- */
.qpc-c0 { --qpc-rgb: 56, 232, 255; --qpc-c: #38e8ff; }
.qpc-c1 { --qpc-rgb: 255, 79, 216; --qpc-c: #ff4fd8; }
.qpc-clab { --qpc-rgb: 255, 200, 87; --qpc-c: #ffc857; }

/* ---------------- clusters ---------------- */
.qpc-cluster {
  position: absolute;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.qpc-cluster.qpc-at-left { left: 8px; align-items: flex-start; }
.qpc-cluster.qpc-at-right { right: 8px; align-items: flex-end; }
.qpc-cluster > * + * { margin-top: var(--qpc-gap); }
.qpc-cluster > .qpc-slider { align-self: stretch; }

.qpc-row { display: flex; align-items: flex-end; pointer-events: none; }
.qpc-at-right .qpc-row { flex-direction: row-reverse; }
.qpc-at-left .qpc-row > * + * { margin-left: var(--qpc-gap); }
.qpc-at-right .qpc-row > * + * { margin-right: var(--qpc-gap); }

/* Rail layout: vertical stack in the side margin (OBSERVE nearest the bottom corner). */
.qpc-cluster.qpc-rail { align-items: center; }
.qpc-cluster.qpc-rail > .qpc-slider { align-self: center; }
.qpc-cluster.qpc-rail .qpc-row { flex-direction: column-reverse; align-items: center; }
.qpc-cluster.qpc-rail .qpc-row > * + * { margin: 0 0 var(--qpc-gap) 0; }
.qpc-cluster.qpc-rail .qpc-btn .qpc-key { left: auto; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
.qpc-cluster.qpc-rail.qpc-at-left .qpc-btn .qpc-key { right: -12px; }
.qpc-cluster.qpc-rail.qpc-at-right .qpc-btn .qpc-key { left: -12px; }
.qpc-cluster.qpc-rail.qpc-at-left .qpc-fan { left: calc(100% + var(--qpc-gap)); right: auto; bottom: auto; transform-origin: 0 20%; }
.qpc-cluster.qpc-rail.qpc-at-right .qpc-fan { right: calc(100% + var(--qpc-gap)); left: auto; bottom: auto; transform-origin: 100% 20%; }

/* ---------------- round neon buttons ---------------- */
.qpc-btn {
  position: relative;
  flex: 0 0 auto;
  width: var(--qpc-u);
  height: var(--qpc-u);
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--qpc-c);
  background: radial-gradient(circle at 50% 34%, rgba(var(--qpc-rgb), .26) 0%, rgba(var(--qpc-rgb), .08) 46%, rgba(6, 9, 22, .56) 74%);
  border: 1.5px solid rgba(var(--qpc-rgb), .8);
  box-shadow: 0 0 12px rgba(var(--qpc-rgb), .34), inset 0 0 10px rgba(var(--qpc-rgb), .16);
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  transition: transform .09s ease-out, opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qpc-ico {
  display: block;
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 0 2.5px rgba(var(--qpc-rgb), .85));
  pointer-events: none;
}
.qpc-ico .qpc-fill { fill: currentColor; stroke: none; }
.qpc-ico .qpc-dim { opacity: .45; stroke-width: 1.3; }
.qpc-lbl {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eafcff;
  text-shadow: 0 0 4px rgba(var(--qpc-rgb), .95), 0 0 1px #000;
  pointer-events: none;
}

/* energy cost badge */
.qpc-cost {
  position: absolute;
  top: -5px;
  right: -8px;
  height: 16px;
  min-width: 24px;
  padding: 0 4px 0 2px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--qpc-mono);
  color: #05060d;
  background: var(--qpc-c);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 0 6px rgba(var(--qpc-rgb), .75);
  pointer-events: none;
  transition: background-color .2s, color .2s;
}
.qpc-cost svg { width: 9px; height: 9px; margin-right: 1px; fill: currentColor; }
.qpc-at-right .qpc-cost { right: auto; left: -8px; }

/* charge / active progress ring */
.qpc-ring {
  position: absolute;
  left: -5px; top: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.qpc-ring circle { fill: none; stroke-width: 2.4; }
.qpc-ring-bg { stroke: rgba(var(--qpc-rgb), .14); }
.qpc-ring-fg {
  stroke: var(--qpc-c);
  stroke-linecap: round;
  stroke-dasharray: 116.24;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 2px rgba(var(--qpc-rgb), .9));
}
.qpc-btn.is-charging .qpc-ring, .qpc-btn.is-active .qpc-ring { opacity: 1; }

/* states */
.qpc-btn.is-charging {
  border-color: rgba(var(--qpc-rgb), .3);
  box-shadow: none;
  background: rgba(6, 9, 22, .58);
}
.qpc-btn.is-charging .qpc-ico, .qpc-btn.is-charging .qpc-lbl { opacity: .42; filter: none; }
.qpc-btn.is-charging .qpc-cost {
  color: var(--qpc-c);
  background: rgba(6, 9, 22, .92);
  border-color: rgba(var(--qpc-rgb), .6);
  box-shadow: none;
}
.qpc-btn.is-blocked { opacity: .5; box-shadow: none; }
.qpc-btn.is-blocked .qpc-ico { filter: none; }
.qpc-btn.is-active {
  color: #fff;
  border-color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(var(--qpc-rgb), .6) 0%, rgba(var(--qpc-rgb), .18) 58%, rgba(6, 9, 22, .6) 80%);
  animation: qpc-glow .8s ease-in-out infinite alternate;
}
.qpc-btn.is-pressed { transform: scale(.9); }
.qpc-btn.is-fired { animation: qpc-fire .38s ease-out; }
.qpc-btn.is-denied { animation: qpc-shake .3s ease-in-out; border-color: #ff5a6e; }

@keyframes qpc-glow {
  from { box-shadow: 0 0 10px rgba(var(--qpc-rgb), .5), inset 0 0 8px rgba(var(--qpc-rgb), .3); }
  to { box-shadow: 0 0 24px rgba(var(--qpc-rgb), .95), inset 0 0 14px rgba(var(--qpc-rgb), .55); }
}
@keyframes qpc-fire {
  0% { box-shadow: 0 0 0 0 rgba(var(--qpc-rgb), .95), 0 0 16px rgba(var(--qpc-rgb), .8); }
  100% { box-shadow: 0 0 0 18px rgba(var(--qpc-rgb), 0), 0 0 12px rgba(var(--qpc-rgb), .3); }
}
@keyframes qpc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---------------- gate picker ---------------- */
.qpc-gate-letter {
  display: block;
  font: 700 calc(var(--qpc-u) * .36) / 1 var(--qpc-mono);
  color: #fff;
  text-shadow: 0 0 6px var(--qpc-c), 0 0 12px rgba(var(--qpc-rgb), .7);
  pointer-events: none;
}
.qpc-gate { border-radius: 30%; }
.qpc-gate[aria-expanded="true"] { border-color: #fff; box-shadow: 0 0 18px rgba(var(--qpc-rgb), .8); }
.qpc-fan {
  position: absolute;
  bottom: calc(100% + var(--qpc-gap));
  display: none;
  padding: 5px;
  border-radius: 14px;
  background: rgba(6, 9, 22, .9);
  border: 1px solid rgba(var(--qpc-rgb), .6);
  box-shadow: 0 0 20px rgba(var(--qpc-rgb), .32), inset 0 0 14px rgba(var(--qpc-rgb), .08);
  pointer-events: auto;
}
.qpc-at-left .qpc-fan { right: 0; transform-origin: 85% 100%; }
.qpc-at-right .qpc-fan { left: 0; transform-origin: 15% 100%; }
.qpc-fan.is-open { display: block; animation: qpc-pop .14s ease-out; }
.qpc-fan-grid { display: flex; flex-wrap: wrap; width: 156px; }
.qpc-chip {
  width: 48px;
  height: 48px;
  margin: 2px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--qpc-c);
  background: rgba(var(--qpc-rgb), .08);
  border: 1px solid rgba(var(--qpc-rgb), .4);
  pointer-events: auto;
  cursor: pointer;
  transition: transform .08s, background-color .12s;
}
.qpc-chip b { font: 700 20px/1 var(--qpc-mono); pointer-events: none; }
.qpc-chip small {
  display: block;
  max-width: 46px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0;          /* "HADAMARD" fits the 48 px chip */
  text-transform: uppercase;
  opacity: .8;
  pointer-events: none;
}
.qpc-chip small:empty { display: none; }
.qpc-chip.is-current { color: #fff; background: rgba(var(--qpc-rgb), .3); border-color: #fff; box-shadow: 0 0 10px rgba(var(--qpc-rgb), .7); }
.qpc-chip.is-hover, .qpc-chip.is-pressed { background: rgba(var(--qpc-rgb), .5); color: #fff; transform: scale(1.07); }
.qpc-fan-info {
  max-width: 156px;
  margin: 3px 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  color: rgba(232, 246, 255, .82);
}
.qpc-fan-info:empty { display: none; }
@keyframes qpc-pop {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------------- analyzer toggle ---------------- */
.qpc-analyzer .qpc-arrow { transition: transform .18s ease-out; }
.qpc-analyzer .qpc-ico { width: 46%; height: 46%; }
.qpc-an-lbl { font-family: var(--qpc-mono); letter-spacing: 0; font-size: 9px; text-transform: none; }

/* ---------------- sliders (focus Δy, sandbox α) ---------------- */
.qpc-slider {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  min-width: 200px;
  padding: 0 14px 0 8px;
  border-radius: 24px;
  background: rgba(6, 9, 22, .5);
  border: 1px solid rgba(var(--qpc-rgb), .48);
  box-shadow: 0 0 10px rgba(var(--qpc-rgb), .16), inset 0 0 12px rgba(var(--qpc-rgb), .07);
  pointer-events: auto;
  cursor: ew-resize;
}
.qpc-slider-alpha { padding-left: 16px; }
.qpc-glyph { flex: 0 0 auto; width: 26px; height: 34px; margin-right: 7px; overflow: visible; pointer-events: none; }
.qpc-glyph-axis { fill: none; stroke: rgba(var(--qpc-rgb), .4); stroke-width: 1; }
.qpc-glyph-curve {
  fill: rgba(var(--qpc-rgb), .22);
  stroke: var(--qpc-c);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(var(--qpc-rgb), .85));
}
.qpc-slider-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.qpc-slider-head { display: flex; align-items: baseline; white-space: nowrap; font-size: 11px; line-height: 14px; }
.qpc-slider-lbl { margin-right: 5px; font-weight: 700; color: var(--qpc-c); text-shadow: 0 0 4px rgba(var(--qpc-rgb), .85); }
.qpc-slider-val { font-family: var(--qpc-mono); color: #f2fbff; }
.qpc-slider-sub {
  margin-left: auto;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: rgba(232, 246, 255, .74);
}
.qpc-slider-sub.is-short { color: #ff8a5c; text-shadow: 0 0 4px rgba(255, 110, 60, .6); }
.qpc-slider-sub.is-bonus { color: #7dffb0; }
.qpc-track { position: relative; height: 20px; margin-top: 2px; }
.qpc-track-bg { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: rgba(var(--qpc-rgb), .38); }
.qpc-track-mark { position: absolute; top: 4px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, .6); }
.qpc-thumb {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, var(--qpc-c) 62%);
  box-shadow: 0 0 8px rgba(var(--qpc-rgb), .95), 0 0 0 3px rgba(var(--qpc-rgb), .2);
  transition: transform .1s ease-out;
}
.qpc-slider.is-dragging { border-color: rgba(var(--qpc-rgb), .9); }
.qpc-slider.is-dragging .qpc-thumb { transform: scale(1.3); }

/* vertical slider (rail layout): glyph, value, track (min at the bottom), readout */
.qpc-slider.qpc-vertical {
  flex-direction: column;
  width: var(--qpc-u);
  min-width: 48px;
  padding: 7px 0 6px;
  border-radius: calc(var(--qpc-u) / 2);
  cursor: ns-resize;
}
.qpc-vertical .qpc-glyph { width: 24px; height: 28px; margin: 0 0 1px; }
.qpc-vertical .qpc-slider-body { width: 100%; min-height: 0; align-items: center; }
.qpc-vertical .qpc-slider-head { flex-direction: column; align-items: center; line-height: 12px; }
.qpc-vertical .qpc-slider-lbl { margin: 0; font-size: 10px; }
.qpc-vertical .qpc-slider-val { font-size: 10px; }
.qpc-vertical .qpc-track { flex: 1 1 auto; width: 20px; height: auto; min-height: 24px; margin: 5px 0 4px; }
.qpc-vertical .qpc-track-bg { left: 8px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; }
.qpc-vertical .qpc-track-mark { left: 4px; top: auto; width: 12px; height: 2px; margin: 0 0 -1px 0; }
.qpc-vertical .qpc-thumb { left: 2px; top: auto; margin: 0 0 -8px 0; }
.qpc-vertical .qpc-slider-sub {
  margin: 0;
  padding: 0 3px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  font-size: 8px;
  line-height: 9px;
  letter-spacing: 0;
}
.qpc-slider.qpc-vertical .qpc-key { top: -7px; right: auto; left: 50%; transform: translateX(-50%); }
.qpc-slider.qpc-vertical.is-compact .qpc-glyph { display: none; }
/* tight rail slider (4-button rails on 360 px tall phones): one-line readout ("cost 8"), less padding */
.qpc-slider.qpc-vertical.is-tight { padding: 5px 0 4px; }
.qpc-vertical.is-tight .qpc-slider-head { line-height: 11px; }
.qpc-vertical.is-tight .qpc-track { margin: 4px 0 3px; }
.qpc-vertical.is-tight .qpc-slider-sub { white-space: nowrap; overflow: visible; }
.qpc-vertical.is-tight .qpc-long { display: none; }

/* ---------------- pause ---------------- */
.qpc-pause {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  --qpc-rgb: 200, 228, 255;
  --qpc-c: #d6ecff;
  background: rgba(6, 9, 22, .55);
  box-shadow: 0 0 10px rgba(var(--qpc-rgb), .22);
  border-color: rgba(var(--qpc-rgb), .55);
}
.qpc-pause .qpc-ico { width: 42%; height: 42%; }
.qpc-pause .qpc-ico-play { display: none; }
.qpc-pause.is-paused .qpc-ico-pause { display: none; }
.qpc-pause.is-paused .qpc-ico-play { display: block; }

/* ---------------- sandbox ---------------- */
.qpc-arena {
  width: auto;
  min-width: calc(var(--qpc-u) * 2.7);
  max-width: 220px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 16px 0 12px;
  border-radius: calc(var(--qpc-u) / 2);
}
.qpc-arena .qpc-ico { flex: 0 0 auto; width: 24px; height: 24px; margin-right: 8px; }
.qpc-arena-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; pointer-events: none; }
.qpc-arena .qpc-lbl { margin-top: 0; }
.qpc-arena-name {
  display: block;
  max-width: 150px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 6px rgba(var(--qpc-rgb), .8);
}
.qpc-arena .qpc-arena-short { display: none; }
/* rail layout: NEXT ARENA becomes a round button (the hint pill announces the arena name) */
.qpc-cluster.qpc-rail .qpc-arena {
  width: var(--qpc-u);
  min-width: 48px;
  max-width: none;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  border-radius: 50%;
}
.qpc-cluster.qpc-rail .qpc-arena .qpc-ico { width: 44%; height: 44%; margin: 0; }
.qpc-cluster.qpc-rail .qpc-arena-txt { display: none; }
.qpc-cluster.qpc-rail .qpc-arena .qpc-arena-short { display: block; margin-top: 2px; }

.qpc-sling { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.qpc-sling.is-on { display: block; }
.qpc-sling-band { stroke: rgba(255, 200, 87, .75); stroke-width: 2; stroke-dasharray: 5 5; }
.qpc-sling-finger { fill: rgba(255, 200, 87, .08); stroke: rgba(255, 200, 87, .55); stroke-width: 1.5; }
.qpc-sling-anchor { fill: rgba(255, 200, 87, .18); stroke: #ffc857; stroke-width: 2; filter: drop-shadow(0 0 5px #ffc857); }
.qpc-sling-arrow { stroke: #fff3cc; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px #ffc857); }
.qpc-sling-head { fill: #fff3cc; filter: drop-shadow(0 0 4px #ffc857); }
.qpc-sling-txt {
  fill: #ffe7a3;
  font: 700 12px var(--qpc-mono);
  paint-order: stroke;
  stroke: #05060d;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.qpc-sling.is-weak .qpc-sling-arrow, .qpc-sling.is-weak .qpc-sling-head { opacity: 0; }

.qpc-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  max-width: calc(100% - 140px);
  padding: 6px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 16px;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: #ffe7a3;
  background: rgba(6, 9, 22, .72);
  border: 1px solid rgba(255, 200, 87, .45);
  box-shadow: 0 0 12px rgba(255, 200, 87, .18);
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .6s ease;
}
.qpc-hint.is-gone { opacity: 0; }

/* ---------------- desktop key hints ---------------- */
.qpc-key {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -7px;
  padding: 1px 4px;
  border-radius: 4px;
  font: 700 9px/11px var(--qpc-mono);
  white-space: nowrap;
  color: var(--qpc-c);
  background: #05060d;
  border: 1px solid rgba(var(--qpc-rgb), .55);
  transform: translateX(-50%);
  pointer-events: none;
}
.qpc-slider .qpc-key { top: -7px; bottom: auto; left: auto; right: 18px; transform: none; }
.qpc-pause .qpc-key { left: -12px; bottom: auto; top: 50%; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .qpc-key { display: block; }
}

/* ---------------- small screens / reduced motion ---------------- */
@media (max-height: 380px) {
  .qpc-lbl { font-size: 8px; letter-spacing: .06em; }
  .qpc-slider-head { font-size: 10.5px; }
}
.qpc-root.qpc-reduce-motion, .qpc-root.qpc-reduce-motion * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .qpc-root, .qpc-root * { animation: none !important; transition: none !important; }
}