/* Secondary gallery with independently selectable left/right reel artwork. */
.reel-skin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1.3%;
}
.reel-skin-tabs button {
  flex: 1;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(89,255,115,.50);
  border-radius: 7px;
  color: #9bffae;
  background: #071d10;
  font: 900 clamp(11px,.83vw,17px) "Courier New",monospace;
  cursor: pointer;
}
.reel-skin-tabs button[aria-selected="true"] {
  border-color: #bbffc5;
  background: #17472a;
  box-shadow: inset 0 0 0 1px #6fff8d;
}
.reel-skin-tabs button:focus-visible,
.reel-skin-choice:focus-visible,
.reel-side-button:focus-visible,
.reel-home-follow:focus-visible {
  outline: 2px solid #bbffc5;
  outline-offset: 2px;
}
.skin-grid[hidden], .reel-skin-grid[hidden], .skin-surprise[hidden],
.reel-side-toolbar[hidden], .reel-current-selection[hidden] {
  display: none !important;
}
.reel-side-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  font: 900 clamp(11px,.73vw,15px) "Courier New",monospace;
}
.reel-side-label { color: #c7fbd0; margin-right: 3px; }
.reel-side-button {
  border: 1px solid #4cb268;
  border-radius: 7px;
  min-height: 35px;
  padding: 7px 13px;
  background: #0a1b11;
  color: #b5ffc0;
  cursor: pointer;
  font: inherit;
}
.reel-side-button[aria-pressed="true"] {
  background: #237744;
  color: #fff;
  border-color: #adffc0;
  box-shadow: inset 0 0 0 1px #adffc0;
}
.reel-home-follow {
  margin-left: auto;
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid #4c8058;
  border-radius: 7px;
  background: #102015;
  color: #bddac3;
  cursor: pointer;
  font: inherit;
}
.reel-home-follow[aria-pressed="true"] {
  border-color: #c1ff8f;
  background: #285525;
  color: #ecffd7;
}
.reel-current-selection {
  color: #a7ffba;
  margin: 6px 0 12px;
  overflow-wrap: anywhere;
  font: 700 clamp(11px,.69vw,14px) "Courier New",monospace;
}
.reel-skin-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.reel-skin-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 10px;
  border: 1px solid rgba(90,255,115,.40);
  border-radius: 10px;
  background: #071b0c;
  color: #b9ffc4;
  font: 900 clamp(11px,.75vw,16px) "Courier New",monospace;
  cursor: pointer;
  text-align: left;
}
.reel-skin-choice.is-selected {
  border-color: #91ffa4;
  box-shadow: inset 0 0 0 1px #66ec7b;
}
.reel-skin-choice.is-home-reel:not(.is-selected) { border-color: #a2c36d; }
.reel-skin-choice img {
  display: block;
  flex: 0 0 auto;
  width: clamp(45px,7vw,96px);
  aspect-ratio: 1;
  object-fit: contain;
  background: #172c1d;
  border-radius: 50%;
  pointer-events: none;
}
.reel-skin-choice > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.reel-selection-badges { display: flex; flex-direction: column; gap: 3px; }
.reel-selection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 1px solid #39684b;
  border-radius: 5px;
  color: #5a8d65;
  background: #0e2014;
  font: 900 12px "Courier New",monospace;
}
.reel-selection-badge.is-active {
  border-color: #bcffd0;
  background: #27864c;
  color: #fff;
}
.reel-home-badge {
  padding: 3px 4px;
  border: 1px solid #b7d879;
  border-radius: 5px;
  color: #e8f6b7;
  background: #344320;
  font: 900 10px "Courier New",monospace;
}
.reel-skin-status {
  min-height: 1.1em;
  color: #a9ffae;
  font: 700 clamp(11px,.7vw,14px) "Courier New",monospace;
}
@media (max-width: 600px) {
  .reel-skin-grid { grid-template-columns: 1fr; }
  .reel-skin-choice { min-height: 60px; }
  .reel-side-button { flex: 1; }
  .reel-home-follow { flex: 1 0 100%; margin-left: 0; }
}