.portal-live {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 30px;
  display: grid;
  gap: 20px;
}

.live-command-hero {
  min-height: 440px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns:
    1.05fr .95fr;
  border: 1px solid #26495b;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 72% 47%,
      rgba(55,215,255,.08),
      transparent 31%
    ),
    linear-gradient(
      120deg,
      #11141a,
      #071720 60%,
      #08151d
    );
}

.live-command-hero.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 62%,
      #36dbee
    );
}

.live-command-hero.is-shiny {
  border-color: #f1ce62;
  box-shadow:
    inset 0 0 80px
    rgba(240,200,70,.04);
}

.live-command-copy {
  position: relative;
  z-index: 4;
  align-self: center;
  padding:
    clamp(
      42px,
      5vw,
      72px
    );
}

.live-breadcrumb {
  margin-bottom: 30px;
  display: flex;
  gap: 12px;
  color: #6f8793;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.live-breadcrumb a,
.live-footer a {
  color: #ff686e;
  text-decoration: none;
}

.live-breadcrumb span {
  opacity: .4;
}

.live-kicker-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.live-signal-dot {
  padding: 6px 10px;
  border: 1px solid #2e424a;
  border-radius: 999px;
  color: #6c818b;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.live-signal-dot i {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #63727a;
}

.live-signal-dot.is-live {
  border-color:
    rgba(55,225,160,.48);
  color: #54dca8;
}

.live-signal-dot.is-live i {
  background: #45e1a0;
  box-shadow:
    0 0 12px #45e1a0;
  animation:
    liveSignalPulse 1.2s infinite;
}

.live-command-hero h1 {
  margin: 13px 0 9px;
  font-size:
    clamp(
      4rem,
      7vw,
      7.3rem
    );
  line-height: .87;
  letter-spacing: -.075em;
  font-weight: 950;
}

.live-command-hero h1 span {
  display: block;
  color: var(--region-accent);
}

.live-command-copy > p {
  max-width: 670px;
  color: #94a9b4;
  font-size: 1.04rem;
  line-height: 1.65;
}

.live-hero-tags {
  margin-top: 25px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.live-hero-tags span {
  padding: 6px 10px;
  border: 1px solid #1b3946;
  border-radius: 999px;
  background: #06141b;
  color: #698390;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.live-command-stage {
  min-height: 440px;
  position: relative;
  overflow: hidden;
}

.live-radar {
  position: absolute;
  left: 50%;
  top: 47%;
  transform:
    translate(-50%,-50%);
  border: 1px solid
    rgba(70,220,245,.18);
  border-radius: 50%;
}

.live-radar--one {
  width: 190px;
  height: 190px;
}

.live-radar--two {
  width: 300px;
  height: 300px;
}

.live-radar--three {
  width: 415px;
  height: 415px;
}

.live-command-hero.is-active
.live-radar {
  animation:
    liveRadar 2.4s
    ease-in-out infinite;
}

.live-wild-label {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 35px;
  transform:
    translateX(-50%);
  color: #60dff5;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .15em;
  white-space: nowrap;
}

.live-command-hero.is-shiny
.live-wild-label {
  color: #ffe06d;
}

.live-command-pokemon {
  width:
    clamp(
      210px,
      23vw,
      340px
    );
  height:
    clamp(
      210px,
      23vw,
      340px
    );
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 45%;
  transform:
    translate(-50%,-50%);
  object-fit: contain;
  filter:
    drop-shadow(
      0 28px 25px
      rgba(0,0,0,.48)
    );
}

.live-command-hero.is-active
.live-command-pokemon {
  animation:
    livePokemonFloat
    2.2s ease-in-out
    infinite;
}

.live-command-hero.is-shiny
.live-command-pokemon {
  filter:
    drop-shadow(
      0 28px 25px
      rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 25px
      rgba(255,220,80,.35)
    );
}

.live-command-specimen {
  min-width: 260px;
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 52px;
  transform:
    translateX(-50%);
  text-align: center;
}

.live-command-specimen small,
.live-command-specimen strong,
.live-command-specimen span {
  display: block;
}

.live-command-specimen small {
  color: #668894;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.live-command-specimen strong {
  margin-top: 3px;
  color: #f2f8fa;
  font-size: 1.5rem;
  letter-spacing: -.03em;
}

.live-command-specimen span {
  margin-top: 3px;
  color: var(--region-accent);
  font-size: .65rem;
  font-weight: 950;
}

.live-command-timer {
  position: absolute;
  z-index: 7;
  right: 20px;
  bottom: 16px;
  padding: 7px 10px;
  border: 1px solid #1c3d49;
  border-radius: 7px;
  background:
    rgba(4,16,23,.82);
  color: #67838f;
  font-size: .56rem;
  font-weight: 900;
}

.live-trainer-bar {
  min-height: 84px;
  padding: 15px 22px;
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid #1b3946;
  border-radius: 17px;
  background: #071720;
}

.live-trainer-avatar {
  width: 49px;
  height: 49px;
  flex: 0 0 49px;
  display: grid;
  place-items: center;
  border: 2px solid
    var(--region-accent);
  border-radius: 50%;
  font-weight: 950;
}

.live-trainer-name {
  flex: 1;
}

.live-trainer-bar span,
.live-trainer-vip span {
  display: block;
  color: #637d89;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.live-trainer-name strong {
  display: block;
  margin-top: 4px;
}

.live-ball-grid {
  display: flex;
  gap: 6px;
}

.live-ball-grid article {
  min-width: 62px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns:
    auto auto;
  gap: 2px 6px;
  align-items: center;
  border: 1px solid #193643;
  border-radius: 8px;
  background: #06131a;
}

.live-ball-grid article > span {
  grid-row: 1 / 3;
  font-size: 1rem;
}

.live-ball-grid b {
  font-size: .73rem;
}

.live-ball-grid small {
  color: #607b87;
  font-size: .45rem;
  font-weight: 900;
}

.live-trainer-vip {
  min-width: 130px;
  padding-left: 20px;
  border-left:
    1px solid #1e3742;
  text-align: right;
}

.live-trainer-vip strong {
  display: block;
  margin-top: 4px;
  color: #758894;
}

.live-trainer-vip.is-active
strong {
  color: #ffd85c;
}

.live-trainer-bar > a {
  padding: 10px 15px;
  border: 1px solid
    var(--region-accent);
  border-radius: 8px;
  color: var(--region-accent);
  text-decoration: none;
  font-weight: 900;
}

.live-main-grid {
  display: grid;
  grid-template-columns:
    minmax(0,1.65fr)
    minmax(330px,.75fr);
  gap: 18px;
  align-items: start;
}

.live-primary-column,
.live-side-column {
  display: grid;
  gap: 14px;
}

.live-chat-panel,
.live-vip-panel,
.live-catch-feed,
.live-rules-panel {
  border: 1px solid #193947;
  border-radius: 18px;
  background: #071720;
}

.live-chat-panel {
  overflow: hidden;
}

.live-chat-panel > header,
.live-vip-panel > header,
.live-catch-feed > header {
  min-height: 75px;
  padding: 17px 20px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  border-bottom:
    1px solid #17313c;
}

.live-chat-panel h2,
.live-vip-panel h2,
.live-catch-feed h2,
.live-rules-panel h2 {
  margin: 5px 0 0;
  font-size: 1.25rem;
}

.live-chat-online {
  padding: 7px 10px;
  border: 1px solid
    rgba(60,220,155,.35);
  border-radius: 999px;
  color: #4fd9a1;
  font-size: .55rem;
  font-weight: 950;
}

.live-chat-online i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 4px;
  border-radius: 50%;
  background: #4fe1a3;
  box-shadow:
    0 0 8px #4fe1a3;
}

.live-chat-messages {
  height: 550px;
  padding: 17px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(50,210,245,.035),
      transparent 30%
    ),
    #05131a;
}

.live-chat-message {
  display: grid;
  grid-template-columns:
    38px minmax(0,1fr);
  gap: 9px;
  align-items: start;
}

.live-chat-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #294754;
  border-radius: 50%;
  background: #0b1c24;
  font-size: .7rem;
  font-weight: 950;
}

.live-chat-message.is-vip
.live-chat-avatar {
  border-color:
    rgba(255,213,74,.55);
  box-shadow:
    0 0 12px
    rgba(255,213,74,.08);
}

.live-chat-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border: 1px solid #193540;
  border-radius:
    4px 12px 12px 12px;
  background: #091b23;
}

.live-chat-message.is-me
.live-chat-bubble {
  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 35%,
      #193540
    );
}

.live-chat-message.is-catch-command
.live-chat-bubble {
  border-color:
    rgba(255,197,70,.4);
  background:
    linear-gradient(
      110deg,
      rgba(255,190,60,.08),
      #091b23
    );
}

.live-chat-bubble header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}

.live-chat-bubble header strong {
  color: #7bdff1;
  font-size: .65rem;
}

.live-chat-bubble header em {
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #6e5313;
  color: #ffe36f;
  font-size: .43rem;
  font-style: normal;
  font-weight: 950;
}

.live-vip-name {
  color:
    var(
      --vip-name-color,
      #ffd54a
    ) !important;
  text-shadow:
    0 0 8px
    var(
      --vip-name-color,
      #ffd54a
    );
}

.live-vip-name.is-rainbow {
  background:
    linear-gradient(
      90deg,
      #ff6570,
      #ffd85b,
      #51e5a7,
      #56dff6,
      #c17eff,
      #ff6570
    );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  animation:
    liveRainbow 3s
    linear infinite;
}

.live-chat-bubble time {
  color: #526c77;
  font-size: .5rem;
}

.live-chat-bubble p {
  margin: 5px 0 0;
  color: #d2e1e7;
  font-size: .75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.live-chat-empty {
  padding: 40px;
  color: #607b87;
  text-align: center;
}

.live-catch-command-bar {
  padding: 10px 14px;
  display: grid;
  grid-template-columns:
    repeat(5,1fr);
  gap: 6px;
  border-top:
    1px solid #17313c;
  background: #071720;
}

.live-catch-command-bar
button {
  min-height: 37px;
  border: 1px solid #1d3d49;
  border-radius: 7px;
  background: #06131a;
  color: #7894a0;
  font-size: .55rem;
  font-weight: 950;
  cursor: pointer;
}

.live-catch-command-bar
button:hover {
  border-color:
    var(--region-accent);
  color: #e8f4f8;
}

.live-chat-writer {
  padding: 12px 14px;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    80px;
  gap: 8px;
  border-top:
    1px solid #17313c;
}

.live-chat-writer input {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #244452;
  border-radius: 8px;
  outline: 0;
  background: #041219;
  color: #e9f3f7;
}

.live-chat-writer input:focus {
  border-color:
    var(--region-accent);
}

.live-chat-writer button {
  border: 1px solid
    var(--region-accent);
  border-radius: 8px;
  background:
    color-mix(
      in srgb,
      var(--region-accent) 14%,
      #071720
    );
  color: var(--region-accent);
  font-weight: 950;
  cursor: pointer;
}

.live-chat-writer button:disabled {
  opacity: .45;
}

.live-chat-hint {
  padding: 0 14px 13px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #5d7884;
  font-size: .5rem;
  font-weight: 900;
}

.live-chat-hint span {
  padding: 4px 6px;
  border: 1px solid #19343f;
  border-radius: 5px;
}

.live-chat-hint b {
  color: #eac15b;
}

.live-chat-login {
  padding: 25px;
  text-align: center;
}

.live-chat-login p {
  color: #78909b;
}

.live-chat-login a {
  margin-top: 10px;
  padding: 10px 14px;
  display: inline-block;
  border: 1px solid
    var(--region-accent);
  border-radius: 8px;
  color: var(--region-accent);
  text-decoration: none;
  font-weight: 900;
}

.live-vip-panel {
  padding-bottom: 17px;
  border-color:
    rgba(202,155,50,.45);
  background:
    linear-gradient(
      150deg,
      #151208,
      #09161b 54%
    );
}

.live-vip-panel > header {
  border-bottom-color:
    rgba(193,151,49,.25);
}

.live-vip-state {
  padding: 6px 9px;
  border: 1px solid #6e5826;
  border-radius: 999px;
  color: #a89057;
  font-size: .52rem;
  font-weight: 950;
}

.live-vip-state.is-active {
  border-color: #d6aa3c;
  color: #ffda62;
  box-shadow:
    0 0 14px
    rgba(255,210,80,.08);
}

.live-vip-active {
  margin: 16px;
  padding: 15px;
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid #725b26;
  border-radius: 11px;
  background:
    rgba(255,199,60,.055);
}

.live-vip-crown {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #d2a838;
  border-radius: 50%;
  background: #201a08;
  font-size: 1.5rem;
}

.live-vip-active small,
.live-vip-active strong,
.live-vip-active span {
  display: block;
}

.live-vip-active small {
  color: #8c794c;
  font-size: .52rem;
  font-weight: 900;
}

.live-vip-active strong {
  margin-top: 2px;
  color: #ffda62;
}

.live-vip-active span {
  margin-top: 3px;
  color: #d1c49d;
  font-size: .66rem;
  font-weight: 850;
}

.live-vip-locked {
  margin: 16px;
  padding: 15px;
  border: 1px solid #55441f;
  border-radius: 11px;
  background: #100f09;
}

.live-vip-locked strong {
  color: #e6c359;
  font-size: .72rem;
}

.live-vip-locked p {
  margin: 7px 0 0;
  color: #928763;
  font-size: .66rem;
  line-height: 1.5;
}

.live-vip-progress {
  padding: 0 17px;
}

.live-vip-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  color: #88784f;
  font-size: .54rem;
  font-weight: 900;
}

.live-vip-progress > div:first-child
b {
  color: #dac460;
}

.live-vip-progress-bar {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #292411;
}

.live-vip-progress-bar i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #c4912e,
      #ffdd63
    );
}

.live-vip-meta {
  margin: 15px 17px;
  display: grid;
  grid-template-columns:
    repeat(3,1fr);
  gap: 6px;
}

.live-vip-meta article {
  padding: 10px 5px;
  border: 1px solid #453a1c;
  border-radius: 8px;
  text-align: center;
}

.live-vip-meta span {
  display: block;
  color: #7f704b;
  font-size: .45rem;
  font-weight: 900;
}

.live-vip-meta strong {
  display: block;
  margin-top: 3px;
  color: #e7c85b;
  font-size: .7rem;
}

.live-buy-vip {
  margin: 0 17px;
  min-height: 42px;
  padding: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #d5a637;
  border-radius: 8px;
  background:
    linear-gradient(
      120deg,
      #e8b743,
      #b97925
    );
  color: #1b1204;
  text-decoration: none;
  font-size: .65rem;
  font-weight: 950;
  cursor: pointer;
}

.live-vip-note {
  margin: 10px 17px 0;
  display: block;
  color: #776b4c;
  font-size: .5rem;
  line-height: 1.5;
}

.live-catch-feed,
.live-rules-panel {
  padding: 17px;
}

.live-catch-feed > header {
  margin: -17px -17px 12px;
}

.live-catch-feed
[data-live-catch-events] {
  display: grid;
  gap: 6px;
}

.live-catch-event {
  padding: 10px;
  border: 1px solid #1b3945;
  border-radius: 8px;
  background: #06131a;
}

.live-catch-event strong,
.live-catch-event span {
  display: block;
}

.live-catch-event strong {
  color: #6fdff2;
  font-size: .61rem;
}

.live-catch-event span {
  margin-top: 3px;
  color: #758d98;
  font-size: .58rem;
}

.live-catch-event.is-caught,
.live-catch-event.is-vip {
  border-color:
    rgba(67,220,155,.45);
}

.live-catch-event.is-caught
strong,
.live-catch-event.is-vip
strong {
  color: #52daa2;
}

.live-catch-event.is-shiny {
  border-color:
    rgba(255,215,80,.55);
}

.live-catch-event.is-shiny
strong {
  color: #ffe16b;
}

.live-catch-event.is-break,
.live-catch-event.is-error,
.live-catch-event.is-locked {
  border-color:
    rgba(255,94,100,.38);
}

.live-catch-event.is-break
strong,
.live-catch-event.is-error
strong,
.live-catch-event.is-locked
strong {
  color: #ff7379;
}

.live-event-empty {
  padding: 15px 5px;
  text-align: center;
}

.live-event-empty strong,
.live-event-empty span {
  display: block;
}

.live-event-empty strong {
  color: #6d8792;
  font-size: .62rem;
}

.live-event-empty span {
  margin-top: 4px;
  color: #536d78;
  font-size: .55rem;
}

.live-rules-panel > h2 {
  margin-bottom: 14px;
}

.live-rules-panel article {
  padding: 10px 0;
  display: grid;
  grid-template-columns:
    30px 1fr;
  gap: 8px;
  border-top:
    1px solid #17313c;
}

.live-rules-panel article > b {
  color: var(--region-accent);
  font-size: .62rem;
}

.live-rules-panel strong,
.live-rules-panel span {
  display: block;
}

.live-rules-panel strong {
  font-size: .64rem;
}

.live-rules-panel span {
  margin-top: 3px;
  color: #657e8a;
  font-size: .57rem;
  line-height: 1.4;
}

.live-footer {
  padding: 4px 2px 20px;
  display: flex;
  justify-content: space-between;
  color: #617b87;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.live-loading {
  min-height: 600px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 15px;
  color: #748e99;
  font-weight: 900;
}

.live-loading span {
  width: 38px;
  height: 38px;
  border: 3px solid #173744;
  border-top-color:
    var(--region-accent);
  border-radius: 50%;
  animation:
    liveLoading
    .8s linear infinite;
}

@keyframes liveLoading {
  to {
    transform: rotate(360deg);
  }
}

@keyframes liveSignalPulse {
  50% {
    opacity: .35;
  }
}

@keyframes liveRadar {
  50% {
    transform:
      translate(-50%,-50%)
      scale(1.035);
    opacity: .55;
  }
}

@keyframes livePokemonFloat {
  50% {
    transform:
      translate(-50%,-53%);
  }
}

@keyframes liveRainbow {
  to {
    background-position:
      220% 0;
  }
}

@media (max-width: 1050px) {
  .live-main-grid {
    grid-template-columns: 1fr;
  }

  .live-side-column {
    grid-template-columns:
      repeat(2,1fr);
  }

  .live-rules-panel {
    grid-column: 1 / 3;
  }
}

@media (max-width: 850px) {
  .portal-live {
    padding: 16px;
  }

  .live-command-hero {
    grid-template-columns: 1fr;
  }

  .live-command-stage {
    min-height: 330px;
  }

  .live-trainer-bar {
    flex-wrap: wrap;
  }

  .live-ball-grid {
    width: 100%;
  }

  .live-trainer-vip {
    width: 100%;
    padding: 10px 0 0;
    border-top:
      1px solid #1e3742;
    border-left: 0;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .live-command-copy {
    padding: 28px 22px;
  }

  .live-command-stage {
    min-height: 285px;
  }

  .live-command-pokemon {
    width: 190px;
    height: 190px;
  }

  .live-radar--three {
    width: 280px;
    height: 280px;
  }

  .live-radar--two {
    width: 220px;
    height: 220px;
  }

  .live-ball-grid {
    display: grid;
    grid-template-columns:
      repeat(2,1fr);
  }

  .live-side-column {
    grid-template-columns: 1fr;
  }

  .live-rules-panel {
    grid-column: auto;
  }

  .live-chat-messages {
    height: 430px;
  }

  .live-catch-command-bar {
    grid-template-columns:
      repeat(2,1fr);
  }

  .live-chat-writer {
    grid-template-columns: 1fr;
  }

  .live-chat-writer button {
    min-height: 42px;
  }

  .live-footer {
    flex-direction: column;
    gap: 8px;
  }
}


/* =========================================================
   BOOM LIVE // VIP CATCH BUTTONS V2
   Old VIP Catcher behavior, Portal design.
   ========================================================= */

.live-catch-controls {
  padding: 15px;
  border-top: 1px solid #17313c;
  border-bottom: 1px solid #17313c;
  background:
    linear-gradient(
      115deg,
      rgba(255,200,65,.025),
      rgba(43,214,240,.025)
    ),
    #06151d;
}

.live-catch-controls > header {
  margin-bottom: 11px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.live-catch-controls > header
strong {
  display: block;
  margin-top: 3px;
  color: #eaf4f7;
  font-size: .78rem;
}

.live-catch-access {
  padding: 6px 9px;
  border: 1px solid #4b4140;
  border-radius: 999px;
  color: #887779;
  font-size: .52rem;
  font-weight: 950;
  white-space: nowrap;
}

.live-catch-access.is-active {
  border-color:
    rgba(255,210,75,.55);
  background:
    rgba(255,203,60,.05);
  color: #ffda62;
}

.live-catch-ball-grid {
  display: grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap: 8px;
}

.live-ball-catch {
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  display: grid;
  grid-template-columns:
    34px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #25404c;
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      #091b24,
      #051219
    );
  color: #e9f3f7;
  text-align: left;
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.live-ball-catch:hover:not(:disabled) {
  transform:
    translateY(-2px);
  border-color:
    var(--region-accent);
  box-shadow:
    0 8px 24px
    rgba(0,0,0,.22);
}

.live-ball-catch:active:not(:disabled) {
  transform:
    translateY(0)
    scale(.98);
}

.live-ball-catch:disabled {
  opacity: .32;
  filter: grayscale(.65);
  cursor: default;
}

.live-ball-catch__icon {
  font-size: 1.55rem;
  text-align: center;
}

.live-ball-catch__copy {
  min-width: 0;
}

.live-ball-catch__copy
strong,
.live-ball-catch__copy
small {
  display: block;
}

.live-ball-catch__copy
strong {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eff7fa;
  font-size: .62rem;
  white-space: nowrap;
}

.live-ball-catch__copy
small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #657f8b;
  font-size: .45rem;
  font-weight: 900;
  white-space: nowrap;
}

.live-ball-catch > b {
  color: #8da4ae;
  font-size: .68rem;
}

.live-ball-catch.is-poke:not(:disabled) {
  border-color:
    rgba(236,83,90,.35);
}

.live-ball-catch.is-great:not(:disabled) {
  border-color:
    rgba(72,155,255,.38);
}

.live-ball-catch.is-ultra:not(:disabled) {
  border-color:
    rgba(255,210,62,.38);
}

.live-ball-catch.is-master:not(:disabled) {
  border-color:
    rgba(190,103,255,.42);
}

.live-best-ball {
  width: 100%;
  min-height: 50px;
  margin-top: 9px;
  padding: 9px 15px;
  display: grid;
  grid-template-columns:
    34px 1fr;
  grid-template-rows:
    auto auto;
  column-gap: 8px;
  align-items: center;
  border: 1px solid #d0a739;
  border-radius: 10px;
  background:
    linear-gradient(
      115deg,
      #4c3509,
      #8c6214 48%,
      #483107
    );
  color: #fff0a4;
  cursor: pointer;
  box-shadow:
    inset 0 1px
    rgba(255,255,255,.08);
}

.live-best-ball > span {
  grid-row: 1 / 3;
  font-size: 1.4rem;
}

.live-best-ball strong {
  align-self: end;
  font-size: .7rem;
  letter-spacing: .04em;
}

.live-best-ball small {
  align-self: start;
  color: #ccb86e;
  font-size: .43rem;
  font-weight: 900;
}

.live-best-ball:hover:not(:disabled) {
  border-color: #ffe16b;
  box-shadow:
    0 0 22px
    rgba(255,209,70,.12);
}

.live-best-ball:disabled {
  opacity: .3;
  filter: grayscale(.7);
  cursor: default;
}

.live-catch-control-note {
  margin-top: 9px;
  color: #657f8b;
  font-size: .52rem;
  font-weight: 850;
  text-align: center;
}

.live-catch-controls.is-vip
.live-catch-control-note {
  color: #9d8d57;
}


/*
 * Old command bar is no longer part
 * of the Portal catch interaction.
 */
.live-catch-command-bar {
  display: none !important;
}


@media (max-width: 760px) {
  .live-catch-ball-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 430px) {
  .live-catch-controls > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .live-catch-ball-grid {
    grid-template-columns: 1fr;
  }
}