/* Match stub: a wide ticket with three roomy, individually marked power-up slots. */
.game-board .scoreboard .score-helps {
  display: flex !important;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.game-board .scoreboard .stub-powerup {
  position: relative;
  display: flex !important;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  min-height: 156px !important;
  border: 1px solid var(--line) !important;
  background: var(--deep) !important;
}

.game-board .scoreboard .stub-powerup > button[data-life] {
  display: grid !important;
  place-items: center;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 154px !important;
  padding: 12px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
}

.game-board .scoreboard .stub-powerup .powerup-icon {
  display: block;
  width: clamp(88px, 8vw, 126px) !important;
  height: clamp(88px, 8vw, 126px) !important;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0 !important;
  filter: none !important;
}

.game-board .scoreboard .stub-powerup > button[data-life] > span {
  display: none !important;
}

.game-board .scoreboard .stub-info {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  display: grid !important;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background: var(--deep) !important;
  color: var(--cream) !important;
}

.game-board .scoreboard .stub-info svg {
  width: 19px;
  height: 19px;
}

.game-board .scoreboard .stub-tooltip {
  display: none !important;
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: min(260px, 80vw);
  padding: 12px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--deep);
  color: var(--cream);
  text-align: left;
  pointer-events: none;
}

.game-board .scoreboard .stub-info[aria-expanded="true"] + .stub-tooltip {
  display: block !important;
}

.game-board .scoreboard .stub-tooltip strong,
.game-board .scoreboard .stub-tooltip p {
  display: block;
  margin: 0;
}

.game-board .scoreboard .stub-tooltip p {
  margin-top: 5px;
  color: var(--pale);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .game-board .scoreboard .stub-powerup,
  .game-board .scoreboard .stub-powerup > button[data-life] {
    min-height: 112px !important;
  }

  .game-board .scoreboard .stub-powerup .powerup-icon {
    width: clamp(66px, 18vw, 92px) !important;
    height: clamp(66px, 18vw, 92px) !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup,
  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup > button[data-life] {
    min-height: 72px !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-title .score-counter button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/* Spread both match tickets across the board instead of leaving them in a narrow centered cluster. */
@media (min-width: 761px) {
  body.playing[data-score-concept="extra-ticket"] #app .game-board > .scoreboard {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: clamp(12px, 1.2vw, 24px) !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: var(--board-gutter, 2vw) !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board > .scoreboard > .score-team {
    grid-template-columns: clamp(68px, 7vw, 88px) minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board > .scoreboard > .score-team > .score-helps {
    width: 100% !important;
    justify-content: stretch !important;
    gap: clamp(4px, .65vw, 10px) !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board > .scoreboard > .score-team > .score-helps > .stub-powerup {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Win over the later-loaded game power-up rules on the fixed match stub. */
body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup {
  background: var(--deep) !important;
  border-color: var(--line) !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup > button[data-life] {
  background: var(--deep) !important;
  border: 0 !important;
  color: var(--cream) !important;
  opacity: 1 !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup > button[data-life] > span {
  display: none !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup .powerup-icon {
  filter: none !important;
}

/* Compact open slots keep the two ticket teams visually connected. */
body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps {
  display: flex !important;
  grid-template-columns: none !important;
  justify-content: center !important;
  gap: 8px !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup {
  min-height: 96px !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup > button[data-life] {
  min-height: 96px !important;
  padding: 2px !important;
  border: 0 !important;
  background: transparent !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup .powerup-icon {
  width: 94px !important;
  height: 94px !important;
  border-radius: 50% !important;
  transform: none !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board > .scoreboard {
  gap: 14px !important;
  padding-block: 4px !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team {
  gap: 4px !important;
  padding: 4px !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-title .score-counter button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  font-size: 1.25em !important;
  line-height: 1 !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-info {
  top: 1px !important;
  right: -4px !important;
  transform: none !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
  border-radius: 50% !important;
  background: var(--deep) !important;
}

body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-info svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 600px) {
  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup,
  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup > button[data-life] {
    min-height: 78px !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup .powerup-icon {
    width: 72px !important;
    height: 72px !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-powerup {
    flex-basis: 82px !important;
    width: 82px !important;
    max-width: 82px !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-helps .stub-info {
    top: 0 !important;
    right: -3px !important;
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  body.playing[data-score-concept="extra-ticket"] #app .game-board .scoreboard .score-team .score-title .score-counter button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

}