/* ControlsView (js/ui/views/controlsView.js): key caps and gamepad buttons, a card per player, the
   short strip of a seat's main controls, and the live test (a cap lights up while it is held).
   Everything is sized in em, so the same caps serve the options, the seat panels and the prompts. */

/* ---------------------------------------------------------------- caps */
.cap {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0 0.45em;
  font-family: inherit;
  font-size: 1em;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow: none;
  transition: transform var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}

.cap-key {
  color: #1a2540;
  background: linear-gradient(#fff, #dbe4f6);
  border-radius: 0.42em;
  box-shadow: 0 0 0 0.1em var(--c-ink), 0 0.22em 0 0.1em #6d7a9c;
}

.cap-wide {
  height: 2.2em;
  padding: 0 0.6em;
  font-size: 0.86em;
}

.cap-arrow {
  width: 1em;
  height: 1em;
  fill: #1a2540;
}

/* gamepad buttons: the engine's glyphs (engine/ui/padGlyphs.js) for the kind of pad in use. They draw in
   currentColor (white here: letters, symbols, outlines); the buttons are filled here. 1em of a glyph is a
   face button's height. */
.cap-pad {
  min-width: 0;
  height: auto;
  padding: 0;
  color: #fff;
}

.cap-pad .pad-glyph { font-size: 1.9em; overflow: visible; }
.cap-stick .pad-glyph { font-size: 1.62em; }
.cap-pad .pg-body { fill: #3a4666; stroke: var(--c-ink); stroke-width: 2.2; }
.cap-pad.cap-bumper .pg-body,
.cap-pad.cap-trigger .pg-body,
.cap-pad.cap-pill .pg-body { fill: #55638a; }
.cap-pad .pg-dim { fill: currentColor; }
.cap-pad .pg-lit:not(circle),
.pad-map .pg-lit:not(circle) { fill: #ffc93a; stroke: var(--c-ink); stroke-width: 1.2; }
.cap-pad circle.pg-lit,
.pad-map circle.pg-lit { stroke: #ffc93a; }

/* an Xbox pad's face buttons in the colours the guide always had; the other families' stay dark with white marks
   (the glyph's own data-family / data-control: the same in a cap and on the whole pad) */
.pad-glyph[data-family="xbox"][data-control="south"] .pg-body { fill: #2fae4e; }
.pad-glyph[data-family="xbox"][data-control="east"] .pg-body { fill: #e8433f; }
.pad-glyph[data-family="xbox"][data-control="west"] .pg-body { fill: #2f86e8; }
.pad-glyph[data-family="xbox"][data-control="north"] { color: #3b2a00; }
.pad-glyph[data-family="xbox"][data-control="north"] .pg-body { fill: #ffc93a; }

/* the live test: held right now */
.cap.is-held {
  background: linear-gradient(var(--c-gold-top), var(--c-gold-bottom));
  color: var(--c-ink);
  box-shadow: 0 0 0 0.12em var(--c-ink), 0 0 0.8em rgb(255 200 60 / 85%);
  transform: translateY(0.12em);
}

.cap.is-held .cap-arrow { fill: var(--c-ink); }
/* (a glyph has no box: its button turns gold instead) */
.cap-pad.is-held { color: var(--c-ink); background: none; box-shadow: none; filter: drop-shadow(0 0 0.35em rgb(255 200 60 / 85%)); }
.cap-pad.is-held .pg-body { fill: var(--c-gold); }

/* ---------------------------------------------------------------- a whole pad (Options → Controls → Gamepad) */
.pad-map { margin: 0; color: var(--c-text); }
.pad-map > svg { display: block; width: 100%; max-width: 38rem; height: auto; margin: 0 auto; overflow: visible; }
.pad-map .pg-body { fill: #3a4666; stroke: var(--c-ink); stroke-width: 2; }
.pad-map .pg-bumper .pg-body, .pad-map .pg-trigger .pg-body, .pad-map .pg-pill .pg-body { fill: #55638a; }
.pad-map .pd-outline { fill: rgb(8 16 36 / 45%); stroke: rgb(255 255 255 / 55%); }
.pad-map .pd-line { color: #ffc93a; }
.pad-map .pd-text { paint-order: stroke fill; stroke: var(--c-ink); stroke-width: 3px; stroke-linejoin: round; }
.pad-family { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------------------------------------------------------------- a line: what to press */
.ctl-binding,
.ctl-ways,
.ctl-way {
  display: inline-flex;
  align-items: center;
}

.ctl-binding { gap: 0.9em; }
.ctl-ways { gap: 0.3em; }
.ctl-way { gap: 0.32em; }

.ctl-or {
  font-size: 0.72em;
  font-style: normal;
  font-weight: 700;
  opacity: 0.75;
}

/* (keys and gamepad side by side: a thin rule between them) */
.ctl-ways-keys + .ctl-ways-pad {
  padding-left: 0.9em;
  border-left: 2px solid rgb(255 255 255 / 22%);
}

.keys-only .ctl-ways-pad { display: none; }

/* ---------------------------------------------------------------- the guide as a list */
.ctl-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctl-row {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 2.3em;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
}

.dense .ctl-row,
.detail .ctl-row {
  flex-basis: 118px;
  flex-wrap: nowrap;
  min-height: 2em;
}

.ctl-label { font-weight: 800; }

.ctl-hint {
  flex: 1 1 100%;
  padding-bottom: 3px;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--c-text-soft);
}

.ctl-device {
  display: flex;
  gap: 0.4em;
  align-items: center;
  font-size: 0.92em;
  font-weight: 800;
  line-height: 1.2;
}

.ctl-device svg {
  flex: none;
  width: 1.7em;
  height: 1.2em;
}

.ctl-device.missing { color: #ff9a9a; }

.controls-shown { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-sm); }
.detail .ctl-rows, .detail .ctl-device { font-size: var(--t-xs); }

/* ---------------------------------------------------------------- a card per player (pause → controls) */
.ctl-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.ctl-card {
  display: flex;
  flex: 1 1 40%;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px 10px;
  font-size: var(--t-sm);
  color: var(--c-text);
  background: var(--glass-2);
  border-top: 0.4rem solid var(--player-color, #ccc);
  border-radius: var(--r-md);
}

.ctl-card.dense { gap: 5px; padding: 6px 10px 8px; font-size: 0.85rem; }
.ctl-cards[data-count="1"] .ctl-card { flex-basis: 100%; }
.ctl-cards[data-count="3"] .ctl-card { flex-basis: 30%; }
.ctl-cards[data-count="4"] .ctl-card { flex-basis: 20%; }

.ctl-head { display: flex; gap: 0.6em; align-items: center; min-width: 0; }
.ctl-face { width: 3em; height: 3em; background: var(--player-color, #ccc); box-shadow: 0 0 0 0.14em var(--c-ink); }
.dense .ctl-face { width: 2.7em; height: 2.7em; }
.ctl-who { display: flex; flex-direction: column; min-width: 0; }
.ctl-title { display: flex; flex-wrap: wrap; gap: 0 0.5em; align-items: baseline; }

.ctl-player {
  font-size: 1.3em;
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
  color: var(--player-color, #fff);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.22em var(--c-ink);
}

.ctl-name { font-size: 0.86em; font-weight: 700; opacity: 0.8; }

/* ---------------------------------------------------------------- a seat's strip of main controls */
.ctl-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.5em;
}

.ctl-chip {
  display: flex;
  gap: 0.35em;
  align-items: center;
  padding: 0.2em 0.5em 0.2em 0.35em;
  font-weight: 800;
  background: rgb(8 16 36 / 55%);
  border-radius: 0.6em;
}

.ctl-chip .ctl-binding { gap: 0.4em; }
.ctl-chip .ctl-ways-keys + .ctl-ways-pad { padding-left: 0.4em; }

/* a player alone's strip: the keys, or the gamepad's buttons once a gamepad was used (html[data-input]: js/ui/prompts.js) */
.ctl-strip[data-pad="first"] .ctl-ways-pad { display: none; }
html[data-input="pad"] .ctl-strip[data-pad="first"] .ctl-ways-pad { display: inline-flex; padding-left: 0; border-left: 0; }
html[data-input="pad"] .ctl-strip[data-pad="first"] .ctl-ways-keys { display: none; }

@media (max-width: 760px) {
  .ctl-cards .ctl-card { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- the rebinding page (Options → Controls → Change:
   js/ui/views/rebindView.js): a line an action, its slots as buttons with the caps in them, a reset; every target at
   least 44 px for fingers */
.rebind-seg { align-self: flex-start; }
.rebind-note { display: flex; flex-wrap: wrap; gap: 0.35em; align-items: center; min-height: 2.4em; margin: 0; font-weight: 700; }
.rebind-note.is-swap { color: #ffe08a; }
.rebind-note.is-refused { color: #ff9a9a; }
.rebind-row { gap: 0.4em 10px; }
.rebind-slots { display: flex; gap: 0.5em; align-items: center; margin-left: auto; }

.rebind-slot {
  display: inline-flex;
  gap: 0.3em;
  align-items: center;
  justify-content: center;
  min-width: 7.5em;
  min-height: 44px;
  padding: 0.2em 0.6em;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--glass-2);
  border: 2px solid rgb(255 255 255 / 18%);
  border-radius: var(--r-md);
}

.rebind-slot:hover { border-color: rgb(255 255 255 / 45%); }
.rebind-slot.is-capturing { border-color: var(--c-gold); box-shadow: 0 0 0 0.18em rgb(255 200 60 / 55%); animation: rebind-wait 1.1s ease-in-out infinite; }
.rebind-wait { font-size: 0.85em; font-weight: 800; color: var(--c-gold); }
.rebind-empty { opacity: 0.5; }

@keyframes rebind-wait { 50% { box-shadow: 0 0 0 0.35em rgb(255 200 60 / 25%); } }

.rebind-reset {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.15em;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 2px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
}

.rebind-reset:disabled { cursor: default; opacity: 0.25; }
.rebind-row.is-fixed { opacity: 0.8; }
.rebind-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.calm .rebind-slot.is-capturing { animation: none; }

@media (max-width: 760px) {
  .rebind-slot { min-width: 5.5em; }
}