/* The game's own pointer for a controller (js/game/gamepad.js): an ordinary arrow in the palette's accent color with a
   black outline, the real pointer hidden while it shows. The outline is the arrow drawn with a thick black stroke;
   the fill is the same arrow as a mask over the accent color, so it follows the palette as it changes. */
.pad-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 20px;
  height: 28px;
  z-index: 100000;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M1 1 L1 22 L6.5 17 L10.5 26 L14 24.5 L10 15.8 L17.5 15.8 Z' fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.pad-cursor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, #ffb000);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M2.1 3.6 L2.1 19.4 L6.9 15 L11 24.5 L12.7 23.8 L8.6 14.7 L14.9 14.7 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M2.1 3.6 L2.1 19.4 L6.9 15 L11 24.5 L12.7 23.8 L8.6 14.7 L14.9 14.7 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
}
/* Over anything the mouse's pointer would be a hand over (cursor: pointer), a pointing hand, drawn the same way: the
   hand stroked thick in black under the same hand as a mask over the accent color. Moved left so the fingertip sits
   where the arrow's tip was. */
.pad-cursor.hand {
  width: 22px;
  margin-left: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Cpath d='M6 3 A2 2 0 0 1 10 3 L10 11.5 A1.75 1.75 0 0 1 13.5 11.5 A1.8 1.8 0 0 1 17 12.5 A1.6 1.6 0 0 1 20.2 13.5 L20.2 20 Q20.2 26 15 26 L10 26 Q8 26 6.8 24 L2.2 17 Q1.4 15.6 2.7 14.8 Q4 14.2 5 15.4 L6 16.8 Z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.pad-cursor.hand::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Cpath d='M6 3 A2 2 0 0 1 10 3 L10 11.5 A1.75 1.75 0 0 1 13.5 11.5 A1.8 1.8 0 0 1 17 12.5 A1.6 1.6 0 0 1 20.2 13.5 L20.2 20 Q20.2 26 15 26 L10 26 Q8 26 6.8 24 L2.2 17 Q1.4 15.6 2.7 14.8 Q4 14.2 5 15.4 L6 16.8 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Cpath d='M6 3 A2 2 0 0 1 10 3 L10 11.5 A1.75 1.75 0 0 1 13.5 11.5 A1.8 1.8 0 0 1 17 12.5 A1.6 1.6 0 0 1 20.2 13.5 L20.2 20 Q20.2 26 15 26 L10 26 Q8 26 6.8 24 L2.2 17 Q1.4 15.6 2.7 14.8 Q4 14.2 5 15.4 L6 16.8 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat;
}
.pad-cursor[hidden] { display: none; }
html.pad-mode, html.pad-mode * { cursor: none !important; }

/* What the pointer is over: js/game/gamepad.js gives every :hover rule a .pad-hover twin, so the controller's pointer
   lights things up exactly as the mouse does. */

/* A slider grabbed with A (js/game/gamepad.js startEditing): outlined in the accent while held. */
.pad-editing { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A dropdown's choices, opened by A (js/game/gamepad.js openPickList): under the dropdown, over everything but the
   pointer, the one chosen now in the accent. */
.pad-pick-list {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .45);
}
.pad-pick-option {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: calc(12px * var(--ui-scale));
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  border: none;
}
.pad-pick-option:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.pad-pick-option.is-current { color: var(--accent); font-weight: 700; }

/* The hint tray (js/game/gamepad.js renderTray): the controller's main inputs in the map box's bottom-right corner,
   only while the controller is the input in use. Over the screens in the map box (z-index 60-70), under no panel's
   buttons since it takes no pointer events. */
.pad-tray { display: none; }
html.pad-mode .pad-tray {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  right: 26px; /* clear of a screen's scrollbar along the map box's right edge */
  bottom: 14px;
  z-index: 80;
  pointer-events: none;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bg-panel, #15130d) 88%, transparent);
  border: 1px solid var(--line, #3a3018);
  border-radius: var(--radius, 2px);
  font-family: var(--mono);
  font-size: calc(10px * var(--ui-scale));
  color: var(--ink, #ffcf7a);
}
.pad-tray-row { display: flex; align-items: center; gap: 6px; }
.pad-tray-glyph {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent, #ffb000);
  border-radius: 3px;
  color: var(--accent, #ffb000);
  font-weight: 700;
  font-size: calc(9px * var(--ui-scale));
}
.pad-tray-glyph.round { border-radius: 50%; padding: 0; }
@media (max-height: 480px) { html.pad-mode .pad-tray { right: 20px; bottom: 8px; padding: 4px 6px; font-size: calc(9px * var(--ui-scale)); } }