.cap-wrap {
  position: relative;   /* the saved-players panel sits over it */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}

.cap-stage canvas {
  width: 320px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(30, 136, 229, .25);
  background: var(--surface);
  cursor: grab;
  /* Horizontal drags rotate the player; vertical ones still scroll the page,
     so the canvas does not trap scrolling on a phone. */
  touch-action: pan-y;
}
.cap-stage canvas:active { cursor: grabbing; }
.cap-stage canvas:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* The host slots - the page drops its own buttons (Share, Make it your own,
   Save/Cancel in the team modal) in here. Empty on a page that has none, and an
   empty one must not push the layout around. */
[data-el="host-actions"]:empty,
[data-el="host-links"]:empty,
[data-el="host-footer"]:empty { display: none; }

.cap-controls {
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A shared link opens collapsed: the title and the controls go, the player
   stays. Driven off a class on the document element, set before the included
   markup arrives, so this is the first thing painted rather than a correction
   applied after the full layout has already been drawn.

   The controls COLUMN stays in the flex line with its contents hidden. It has
   no background of its own, so it is invisible either way, and keeping it means
   its flex-basis holds the stage exactly where it sits in the full layout -
   dropping it out let the lone stage re-centre and the canvas jumped sideways. */
.cap-shared #cap-intro,
.cap-shared [data-el="editor"] { display: none; }

.cap-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cap-editor[hidden] { display: none; }

.cap-edit {
  margin-top: .25rem;
  font-weight: 600;
  border-color: var(--accent);
  color: var(--accent);
}
.cap-edit[hidden] { display: none; }

.cap-tabs {
  display: flex;
  gap: .3rem;
  background: rgba(30, 136, 229, .10);
  border-radius: 999px;
  padding: .25rem;
}

.cap-tab {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  padding: .4rem .2rem;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.cap-tab:hover { color: var(--text); }
.cap-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(12, 27, 42, .12);
}

.cap-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cap-panel[hidden] { display: none; }

.cap-group {
  border: 1px solid rgba(30, 136, 229, .25);
  border-radius: var(--radius);
  background: var(--surface);
  padding: .7rem .9rem 1rem;
  margin: 0;
}

.cap-group legend {
  font-weight: 600;
  font-size: .95rem;
  padding: 0 .35rem;
  color: var(--text);
}

.cap-opts {
  display: flex;
  gap: .4rem;
}

.cap-group > .cap-opts { margin-bottom: .8rem; }

.cap-opt {
  flex: 1;
  font-size: .85rem;
  padding: .35rem .2rem;
  border-radius: 999px;
  border: 1px solid rgba(30, 136, 229, .35);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.cap-opt:hover { background: rgba(30, 136, 229, .10); }
.cap-opt.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.cap-swatches {
  display: flex;
  flex-wrap: nowrap;      /* presets + picker are sized to stay on one row */
  gap: .3rem;
}

.cap-swatch {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(12, 27, 42, .18);
  cursor: pointer;
}
.cap-swatch.active {
  border-color: var(--text);
  transform: scale(1.12);
}

/* The "any other colour" picker at the end of each row. The native colour
   input is sized to fill the circle so the whole swatch is the hit target. */
.cap-swatch-custom {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background:
    conic-gradient(#E53935, #FDD835, #43A047, #1E88E5, #8E24AA, #E53935);
}
.cap-swatch-custom input[type="color"] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
}

.cap-slot input[type="text"],
.cap-slot select {
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  padding: .3rem .5rem;
  border-radius: 8px;
  border: 1px solid rgba(30, 136, 229, .35);
  background: var(--surface);
  min-width: 0;
}
.cap-slot input[type="text"]:focus-visible,
.cap-slot select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.cap-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.cap-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}

.cap-actions .button {
  font-family: inherit;      /* an <a> inherits the page font, a <button> does not */
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Randomize and Highlight play with the picture in front of you - worth having,
   never the thing you came to do, so they carry less weight than the row under
   them. */
.cap-actions-play .button {
  font-size: .8rem;
  background: transparent;
  border-color: rgba(30, 136, 229, .35);
  color: var(--muted);
}
.cap-actions-play .button:hover { color: var(--accent); border-color: var(--accent); }

.cap-actions-main { margin-top: .15rem; }

/* Which player you are on. Buttons, because they do something, but styled as
   plain links: two more outlined boxes here and the row above stops reading as
   the main one. */
.cap-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem;
  margin-top: .2rem;
}

.cap-link {
  background: none;
  border: none;
  padding: .35rem .5rem;
  min-height: 32px;          /* still a tap target, however small it looks */
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.cap-link:hover { text-decoration: none; }
.cap-sep { color: var(--muted); font-size: .8rem; }

.cap-status {
  margin: 0;
  min-height: 1.1em;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}

.cap-status.show {
  font-weight: 600;
  color: #0D47A1;
  background: #FDD835;
  border-radius: 999px;
  padding: .45rem 1rem;
  max-width: 300px;
  box-shadow: 0 4px 14px rgba(12, 27, 42, .18);
  animation: cap-status-in .25s ease;
}

@keyframes cap-status-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.cap-bubble {
  position: relative;
  margin: 0;
  max-width: 260px;
  padding: .55rem 1rem;
  font-style: italic;
  font-size: .9rem;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border: 2px solid rgba(30, 136, 229, .30);
  border-radius: 14px;
}
.cap-bubble[hidden] { display: none; }
.cap-bubble::before,
.cap-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.cap-bubble::before {
  bottom: -14px;
  border-top-color: rgba(30, 136, 229, .30);
}
.cap-bubble::after {
  bottom: -10px;
  border-top-color: var(--surface);
}

.cap-caption {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  min-height: 1.2em;
}

.cap-slot {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--muted);
}

.cap-slot[hidden] { display: none; }

.cap-slot input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(30, 136, 229, .15);
  cursor: pointer;
}
.cap-slot input[type="range"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.cap-slot input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.cap-slot input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.cap-debug {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.cap-debug canvas {
  width: 100%;
  height: auto;
  border: 1px solid rgba(30, 136, 229, .25);
  border-radius: 8px;
}

@media (max-width: 620px) {
  .cap-wrap { gap: 1rem; }
  .cap-controls { max-width: 100%; }
  .cap-debug { grid-template-columns: repeat(2, 1fr); }

  /* Bigger tap targets on touch screens. */
  .cap-swatch { width: 32px; height: 32px; }

  /* A colour row cannot shrink below its swatches, so on a phone the one-row
     rule held the whole controls column wider than the screen and the page
     scrolled sideways - with the picker, last in the row, off the edge. The
     label goes above the colours and the row is allowed to wrap. */
  .cap-slot-wide { grid-template-columns: 1fr; }
  .cap-slot-wide .cap-swatches { flex-wrap: wrap; gap: .4rem; }
  .cap-opt, .cap-tab { padding: .55rem .2rem; }
  .cap-actions .button { padding: .5rem .9rem; }
  .cap-slot input[type="range"] { height: 10px; }
  .cap-slot input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .cap-slot input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
}

/* Appears under the stage once a player has been added to the team. */
.cap-team-link { display: inline-block; margin-top: .6rem; text-decoration: none; }

/* On a shared link, the card is the thing worth doing. */
/* The footer row mixes an <a> with a <button>, and the site's base button rule
   sets padding and colour but not the font - so a button keeps the browser's
   13.3px Arial while an anchor inherits the page's 16px. Pinning the font here
   makes the two the same size instead of the link towering over the button. */
[data-el="host-footer"] .button {
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;      /* the anchor inherits 1.5, the button uses UA normal */
  margin-top: .6rem;
}

.cap-card-link {
  display: inline-block;
  text-decoration: none;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cap-card-link:hover { background: var(--accent); color: #fff; }

/* ---- saved-player picker ----
   A panel over whatever opened it, from a button. It used to be a strip across
   the top of the builder, which put a shelf in front of the thing you came to
   do. */

.cap-gallery {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.cap-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(30, 136, 229, .2);
}
.cap-gallery-head h3 { margin: 0; font-size: 1rem; }

.cap-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .75rem;
  padding: 1rem;
  overflow-y: auto;
}

.cap-pick {
  width: 100%;
  display: grid;
  gap: .15rem;
  padding: .25rem;
  border: 1px solid rgba(30, 136, 229, .25);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.cap-pick:hover, .cap-pick:focus-visible { border-color: var(--accent); background: rgba(22, 104, 196, .08); outline: none; }
.cap-pick canvas { width: 100%; height: auto; display: block; }
.cap-pick span {
  font-size: .7rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* Deleting says the word. An icon in this position was read as "remove from
   the team" when the panel lived on the team page. */
.cap-pick-del {
  width: 100%;
  margin-top: .25rem;
  padding: .3rem;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(179, 38, 30, .3);
  background: none;
  color: #B3261E;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.cap-pick-del:hover, .cap-pick-del:focus-visible { background: #B3261E; color: #fff; }

.cap-pick-wrap { display: grid; }

/* The slot that is nobody yet. Dashed, so it reads as a space to fill rather
   than as a player with no picture. */
.cap-pick-new { border-style: dashed; border-color: rgba(30, 136, 229, .5); }
.cap-pick-plus {
  display: grid;
  place-items: center;
  aspect-ratio: 180 / 200;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---- saved-player picker ----
   A panel over whatever opened it, from a button. It used to be a strip across
   the top of the builder, which put a shelf in front of the thing you came to
   do. */

.cap-gallery {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.cap-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(30, 136, 229, .2);
}
.cap-gallery-head h3 { margin: 0; font-size: 1rem; }

.cap-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .75rem;
  padding: 1rem;
  overflow-y: auto;
}

.cap-pick {
  width: 100%;
  display: grid;
  gap: .15rem;
  padding: .25rem;
  border: 1px solid rgba(30, 136, 229, .25);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.cap-pick:hover, .cap-pick:focus-visible { border-color: var(--accent); background: rgba(22, 104, 196, .08); outline: none; }
.cap-pick canvas { width: 100%; height: auto; display: block; }
.cap-pick span {
  font-size: .7rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* Deleting says the word. An icon here was read as "remove from the team" when
   this panel lived on the team page. */
.cap-pick-wrap { display: grid; }
.cap-pick-del {
  width: 100%;
  margin-top: .25rem;
  padding: .3rem;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(179, 38, 30, .3);
  background: none;
  color: #B3261E;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.cap-pick-del:hover, .cap-pick-del:focus-visible { background: #B3261E; color: #fff; }