/* Connection showcase: attached edition tabs, clear server fields and Terraverse art. */
#como-jugar.join-showcase {
  background: transparent;
  border: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.join-showcase .join-showcase-inner {
  position: relative;
}

.join-showcase .join-intro {
  margin: 0 auto 34px;
  text-align: center;
}

.join-showcase .join-intro .eyebrow {
  margin-bottom: 13px;
  color: #afc6d4;
  letter-spacing: 2.2px;
}

.join-showcase .join-intro h2 {
  font-size: clamp(2.75rem, 4.4vw, 4.25rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--gold);
}

.join-showcase .connection-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(800px, 76%);
  margin: 0 auto -1px;
  padding: 0;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: transparent;
}

.join-showcase .connection-tabs > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 16px 20px;
  border: 1px solid #53c8ed24;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #101c26;
  color: #94abba;
  font-size: 1.063rem;
  font-weight: 800;
  line-height: 1.35;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.join-showcase .connection-tabs > button.selected {
  background: #173b50;
  border-color: #6fd5f64d;
  color: #e1f5fc;
  box-shadow: inset 0 3px 0 #53c8ed;
}

.join-showcase .connection-tabs > button:hover {
  color: #e1f5fc;
  background: #1b3547;
}

.join-showcase .connection-tabs > button.selected:hover {
  background: #1c4359;
}

.join-showcase .connection-tabs .icon {
  width: 22px;
  height: 22px;
}

.join-showcase .connection-shell {
  position: relative;
  isolation: isolate;
  border: 1px solid #70d2f23b;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 92% 52%, #23658e63, transparent 52%),
    linear-gradient(115deg, #173247, #102132 75%);
  box-shadow: 0 20px 55px #0003, inset 0 1px 0 #e5f8ff0c;
}

.join-showcase .connection-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 4%;
  right: -2%;
  width: 35%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #53c8ed1f, transparent 69%);
}

.join-showcase .connection-panel {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 340px);
  align-items: center;
  gap: 38px;
  min-height: 390px;
  padding: 34px 340px 34px 34px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}

.join-showcase .connection-panel[hidden] {
  display: none !important;
}

.join-showcase .connection-fields {
  display: grid;
  gap: 17px;
  min-width: 0;
  padding: 24px;
  border: 1px solid #91d9f53b;
  border-radius: 18px;
  background: linear-gradient(140deg, #3a769442, #1b4b654a);
  box-shadow: inset 0 1px 2px #d9f3ff12, 0 6px 20px #040d191a;
}

.join-showcase .connection-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.join-showcase .connection-field > span {
  font-size: .688rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: #c2dce9;
}

.join-showcase .connection-field > strong {
  display: block;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #67bbdb1a;
  border-radius: 9px;
  background: #071721b3;
  box-shadow: inset 0 2px 6px #02070e1f;
  color: #eff7fa;
  font-size: clamp(1.063rem, 1.6vw, 1.375rem);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.join-showcase .connection-welcome {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.join-showcase .connection-welcome h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.813rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.035em;
  color: #f1f7fa;
}

.join-showcase .connection-welcome > p {
  margin-top: 15px;
  font-size: .938rem;
  line-height: 1.8;
  color: #b6cbd8;
}

.join-showcase .connection-welcome > p strong {
  color: #e4eef3;
  font-weight: 800;
}

.join-showcase .connection-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  margin-top: 23px;
  padding: 14px 20px;
  border: 1px solid #ffe8b16b;
  border-radius: 10px;
  background: linear-gradient(120deg, #f9d787, #dca940);
  color: #241a07;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.4;
  box-shadow: 0 4px 0 #926523, 0 8px 26px #d5a33b1f;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.join-showcase .connection-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: #fff2c5;
  opacity: 0;
  transition: opacity 200ms ease;
}

.join-showcase .connection-copy:hover {
  background: linear-gradient(120deg, #f9d787, #dca940);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #926523, 0 12px 32px #d5a33b32;
}

.join-showcase .connection-copy:hover::before {
  opacity: .16;
}

.join-showcase .connection-copy:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 #926523, 0 6px 20px #d5a33b20;
}

.join-showcase .connection-copy.copy-success {
  width: 100%;
  min-width: 0;
  min-height: max(58px, var(--copy-feedback-height, 58px));
  padding: 11px 12px;
  background: #103026;
  color: #6ee7a5;
  border-color: #6ee7a566;
  box-shadow: 0 4px 0 #0a211b, 0 8px 26px #56d79418;
}

.join-showcase .connection-copy.copy-success:hover {
  background: #103026;
  box-shadow: 0 6px 0 #0a211b, 0 12px 32px #56d79422;
}

.join-showcase .connection-copy.copy-success::before {
  background: #6ee7a5;
}

.join-showcase .connection-copy .copy-feedback {
  width: 100%;
  text-align: center;
  gap: 8px;
}

.join-showcase .connection-copy .copy-feedback > .icon {
  width: 18px;
  height: 18px;
}

.join-showcase .connection-copy .copy-feedback strong {
  font-size: .813rem;
}

.join-showcase .connection-copy .copy-feedback small {
  font-size: .625rem;
  line-height: 1.5;
}

.join-showcase .connection-copy.copy-success .copy-feedback small {
  white-space: normal;
}

.join-showcase .connection-welcome > .connection-note {
  display: block;
  margin-top: 19px;
  font-size: .719rem;
  line-height: 1.6;
  color: #8da8ba;
}

.join-showcase .connection-art {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  right: -26px;
  bottom: -32px;
  width: 345px;
}

.join-showcase .connection-art img {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 15px 20px #030a1559);
}

.join-showcase .connection-devices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px 34px;
  margin: 36px auto 0;
  color: #8599a8;
}

.join-showcase .connection-devices > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
}

.join-showcase .connection-devices .icon {
  width: 25px;
  height: 25px;
  color: #a7bbca;
}

@media (max-width: 1100px) {
  .join-showcase .connection-tabs {
    width: min(730px, 82%);
  }

  .join-showcase .connection-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 25px;
    min-height: 368px;
    padding: 28px 260px 28px 28px;
  }

  .join-showcase .connection-fields {
    padding: 20px;
    gap: 15px;
  }

  .join-showcase .connection-field > strong {
    padding: 11px 12px;
    font-size: 1.063rem;
  }

  .join-showcase .connection-welcome h3 {
    font-size: 1.438rem;
  }

  .join-showcase .connection-art {
    right: -18px;
    bottom: -20px;
    width: 270px;
  }

  .join-showcase .connection-art img {
    max-height: 370px;
  }
}

@media (max-width: 820px) {
  .join-showcase .join-intro {
    margin-bottom: 27px;
  }

  .join-showcase .connection-tabs {
    width: 87%;
  }

  .join-showcase .connection-tabs > button {
    min-height: 60px;
    padding: 14px 12px;
    font-size: .938rem;
  }

  .join-showcase .connection-shell {
    display: grid;
    border-radius: 18px;
  }

  .join-showcase .connection-panel {
    min-height: 0;
    gap: 26px;
    padding: 26px;
  }

  .join-showcase .connection-art {
    position: relative;
    justify-self: center;
    right: auto;
    bottom: auto;
    width: min(270px, 50%);
    margin-top: -12px;
    margin-bottom: -18px;
  }

  .join-showcase .connection-art img {
    max-height: 240px;
  }

  .join-showcase .connection-shell::before {
    top: auto;
    bottom: 0;
    right: 10%;
    width: 80%;
    height: 55%;
  }

  .join-showcase .connection-devices {
    margin-top: 36px;
    gap: 13px 25px;
  }
}

@media (max-width: 560px) {
  .join-showcase .join-intro h2 {
    font-size: clamp(2.438rem, 9.4vw, 3rem);
  }

  .join-showcase .join-intro .eyebrow {
    font-size: .625rem;
    letter-spacing: 1.5px;
  }

  .join-showcase .connection-tabs {
    width: 93%;
    gap: 4px;
  }

  .join-showcase .connection-tabs > button {
    gap: 7px;
    min-height: 55px;
    padding: 12px 7px;
    border-radius: 12px 12px 0 0;
    font-size: .813rem;
  }

  .join-showcase .connection-tabs .icon {
    width: 19px;
    height: 19px;
  }

  .join-showcase .connection-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 21px 19px 22px;
  }

  .join-showcase .connection-fields {
    padding: 18px;
    gap: 14px;
    border-radius: 14px;
  }

  .join-showcase .connection-field > span {
    font-size: .625rem;
  }

  .join-showcase .connection-field > strong {
    font-size: 1.125rem;
  }

  .join-showcase .connection-welcome {
    text-align: center;
  }

  .join-showcase .connection-welcome h3 {
    font-size: 1.625rem;
  }

  .join-showcase .connection-welcome > p {
    font-size: .875rem;
    line-height: 1.8;
    margin-top: 13px;
  }

  .join-showcase .connection-copy {
    min-height: 56px;
    margin-top: 20px;
    font-size: .938rem;
  }

  .join-showcase .connection-welcome > .connection-note {
    margin-top: 17px;
    font-size: .688rem;
  }

  .join-showcase .connection-art {
    width: min(230px, 72%);
    margin-top: -12px;
    margin-bottom: -14px;
  }

  .join-showcase .connection-art img {
    max-height: 215px;
  }

  .join-showcase .connection-devices {
    gap: 10px 19px;
    margin-top: 30px;
  }

  .join-showcase .connection-devices > span {
    font-size: .688rem;
    gap: 6px;
  }

  .join-showcase .connection-devices .icon {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .join-showcase .connection-tabs > button,
  .join-showcase .connection-copy,
  .join-showcase .connection-copy::before {
    transition: none;
  }

  .join-showcase .connection-copy:hover,
  .join-showcase .connection-copy:active {
    transform: none;
  }
}