body,
html {
  margin: 0;
  background-color: #000;
  color: #444;
  width: 100%;
  height: 100%;
  border: 0px solid black;
  overflow: hidden;
}

::selection {
  color: white;
}

div {
  color: antiquewhite;
  touch-action: none;
}

h1,
p {
  margin: 0 0 1em;
}

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #2e9097;
}

.flex-container > div {
  background-color: #1c802d;
  border: 1px;
  color: grey;
}

#snookerScore {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: xx-large;
  font-style: italic;
  color: yellow;
  text-align: center;
  filter: drop-shadow(0.08em 0.08em black);
}

#snookerScoreOverlay {
  position: absolute;
  bottom: 1em;
  right: 3em;
}

.view3d {
  width: 100%;
  height: 83%;
  cursor: none;
  caret-color: transparent;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
}
.view3d:focus {
  outline: none;
}

/* Dead zone cursor - camera rotation (3D cursor rendered in scene) */
.view3d.orbitzone-cursor {
  cursor: none !important;
}

/* Cue ball hover cursor */
.view3d.cueball-cursor {
  cursor: grab !important;
}

/* Cue ball camera-reset target (custom 3D cursor rendered in scene) */
.view3d.cueball-reset-cursor {
  cursor: none !important;
}

/* Cue ball dragging cursor - HIGHEST PRIORITY (placed last) */
.view3d.cueball-dragging {
  cursor: grabbing !important;
}

/*
 * Balls-rolling cursor - keep a visible "move" cursor while the shot animates.
 * The base .view3d cursor is `none` (the custom 3D/aim cursors take over during
 * aiming), but the aim controller is disposed once balls start moving, so without
 * this the canvas would show no cursor at all and moving the mouse feels dead.
 * Mirrors the aim-drag move cursor (AIM_DRAG_CURSOR_PATH) so it matches the aim phase.
 * Used by the ACTIVE shooter during their own shot. Passive viewers also pick up
 * this class, but `.spectator-cursor` below overrides it so they get a consistent
 * standard move cursor across both the aim and shot-animation phases.
 */
.view3d.balls-rolling {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 100 100'%3E%3Cpath d='M50 2 L66 18 L58 18 L58 42 L82 42 L82 34 L98 50 L82 66 L82 58 L58 58 L58 82 L66 82 L50 98 L34 82 L42 82 L42 58 L18 58 L18 66 L2 50 L18 34 L18 42 L42 42 L42 18 L34 18 Z' fill='%23111111' stroke='%23ffffff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E")
      16 16,
    move !important;
}

/*
 * Spectator / passive player cursor - the base .view3d cursor is `none` because
 * the active shooter's custom 3D/aim cursors take over. Passive players and
 * spectators (WatchAim / WatchShot) never install those cursors, so without this
 * the viewport would show no cursor at all and moving the mouse feels dead.
 * Show the standard system "move" cursor at its native size for them.
 * Declared AFTER .balls-rolling (equal specificity, both !important) so it wins
 * when a passive viewer has both classes — giving one consistent cursor type
 * across the aim phase and the shot-animation phase.
 */
.view3d.spectator-cursor {
  cursor: move !important;
}

canvas {
  border-radius: 5px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel {
  width: 100%;
  height: 17%;
  display: flex;
  padding: 0px;
  background: linear-gradient(rgb(0, 64, 94), #000214);
  border-radius: 5px;
  align-items: center;
}

.panel.is-disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Keep outerMenu accessible when panel is disabled (NPC thinking, spectator mode)
   Moved to base theme layer (`public/theme-system/base/base-theme.css`). */