#cube-gate {
  --cube-action-gap: 12px;
  --safe-edge-desktop: 24px;
  --safe-edge-mobile: 16px;
  color: #242320;
  font: 10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .1em;
}
#cube-gate [hidden] { display:none !important; }

/* CENTER ZONE: the cube hit-proxy only. position/size are set by
   playrs-core-gate-v1.js (left/top/width/height), tracking the real
   rendered THREE.js mesh -- this rule only supplies the anchor. */
#cube-manipulator {
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 40;
  touch-action: none;
  cursor: grab;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
#cube-manipulator:active { cursor: grabbing; }

/* CLICK-ENTER indicator (2026-10-18): hangs just under the cube and moves
   with it. Text only -- no box, no outline. */
#cube-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: .62;
  pointer-events: none;
}

#cube-fallback {
  width: 110px; height: 110px; margin: 40px;
  border: 1px solid #353530; background: #181817; color: #c7c5bc;
  display: grid; place-items: center; font-size: 35px;
}

/* BOTTOM ACTION ZONE: anchored to the viewport edge, not to the cube --
   this guarantees zero collision with the cube regardless of its
   dynamic size/position at any tested viewport. */
#cube-action-zone {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--safe-edge-desktop));
  transform: translateX(-50%);
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cube-action-gap);
  width: min(360px, calc(100% - 2 * var(--safe-edge-desktop)));
  text-align: center;
  pointer-events: none;
}
#cube-action-zone > * { pointer-events: auto; }

#cube-context { opacity: .6; }

#cube-response {
  min-height: 14px;
  opacity: .7;
  /* #cube-response is a <p>; clubs-landing-presentation-v1.css sets a
     global p{color:rgba(242,242,240,.46)} for the dark-theme body,
     which reads as near-invisible on this light background. Override
     it explicitly -- an ID selector beats that element selector
     regardless of stylesheet load order. */
  color: #242320;
}

#cube-close, #cube-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
#cube-close { opacity: .58; border: 0; }
#cube-close:hover, #cube-close:focus-visible { opacity: 1; outline: none; }
#cube-enter { border: 1px solid #b8b5ab; }

/* #cube-manipulator intentionally has NO focus outline: its hit area is
   deliberately larger than the visible cube (forgiving tap target), so
   outlining it draws a box that doesn't match the visible object -- the
   exact "border box around the cube" the design law forbids. */
#cube-enter:focus-visible,
#cube-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

#clubs-store-link {
  position: fixed; right: 22px; top: 22px; z-index: 45;
  padding: 12px 0; color: #242320; font: 10px monospace; text-decoration: none;
}

@media (max-width: 700px) {
  #cube-action-zone {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--safe-edge-mobile));
    width: min(320px, calc(100% - 2 * var(--safe-edge-mobile)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none !important; }
}