/* A live connection panel framed with the supplied Aerborne artwork. */
.home-join {
  position: relative;
  isolation: isolate;
  padding: 2.3rem 1.5rem 1rem;
  border: 1px solid #f2d18c;
  border-radius: 25px;
  background: linear-gradient(110deg, #14233cf7 15%, #192d49ec 65%, #1d3653cc), url('../img/brand/sky-kingdom-800.webp') 68% 25% / auto 115%;
  box-shadow: 0 0 0 3px #243c58, 0 0 0 4px #dfba6c88, inset 0 0 32px #6bb5f523, 0 22px 55px #07132680;
  backdrop-filter: blur(16px);
  text-align: center;
}
.home-join::before { content: ''; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border: 1px solid #91c8f85c; border-radius: 19px; }
.home-join::after { content: ''; position: absolute; bottom: -12px; left: 50%; width: 20px; height: 24px; transform: translateX(-50%); background: #f8d88e; clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%); pointer-events: none; }
.join-crest, .join-mascot { position: absolute; display: block; height: auto; pointer-events: none; overflow: hidden; filter: drop-shadow(0 5px 10px #07132666); }
.join-crest { width: 65px; left: 50%; top: -48px; transform: translateX(-50%); }
.join-mascot { width: 106px; left: -74px; bottom: 46px; }
.join-frame-star { position: absolute; color: #ffe0a0; font-size: 1.1rem; text-shadow: 0 0 12px #75caff99; pointer-events: none; }
.join-frame-star-left { left: 13px; top: 15px; }
.join-frame-star-right { right: 13px; top: 15px; }
.home-join > .eyebrow { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .7rem; color: #f6d387; font-size: .58rem; letter-spacing: .15em; }
.home-join > .eyebrow::before, .home-join > .eyebrow::after { content: ''; width: 1.1rem; height: 1px; flex: none; background: linear-gradient(90deg, transparent, #f6d387); }
.home-join > .eyebrow::after { transform: rotate(180deg); }
.home-join h2 { margin: 0; color: #f6fbff; font-size: clamp(2rem, 2.8vw, 2.55rem); line-height: 1.04; letter-spacing: -.02em; text-shadow: 0 2px 15px #a8d4ff38; }
.home-join h2 > span { color: #9de1ff; text-shadow: 0 2px 17px #58b7fc66; }
.home-join .server-card { margin: 1.15rem 0 .6rem; text-align: left; }
.home-join .server-health { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .6rem .7rem; min-height: 44px; border: 1px solid #628cba85; border-radius: 13px; background: linear-gradient(115deg, #3152768f, #192f50cc); box-shadow: inset 0 1px 0 #b1dbff1f, 0 3px 8px #0b183238; }
.home-join .server-state { display: inline-flex; align-items: center; gap: .45rem; color: #c4d5e8; font-size: .76rem; font-weight: 800; }
.home-join .server-state::before { width: 9px; height: 9px; margin: 0; border-radius: 50%; background: #b1bed0; box-shadow: 0 0 0 3px #b1bed018; }
.home-join [data-state='online'] .server-state { color: #9bf6cb; }
.home-join [data-state='online'] .server-state::before { background: #89ffc2; box-shadow: 0 0 0 4px #6dffb52b, 0 0 12px #6dffb5ad; }
.home-join [data-state='offline'] .server-state, .home-join [data-state='maintenance'] .server-state { color: #ffd1a2; }
.home-join [data-state='offline'] .server-state::before, .home-join [data-state='maintenance'] .server-state::before { background: #ffba80; box-shadow: 0 0 0 3px #ffba801a; }
.home-join .server-latency { display: none; }
.home-join .server-refresh { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 28px; margin-left: auto; padding: 0 0 0 .55rem; border: 0; border-left: 1px solid #79a5d13b; background: none; color: #8edaff; font: 800 .7rem var(--body); white-space: nowrap; text-decoration: none; }
.home-join .server-refresh::before { content: ''; display: block; flex: none; width: 18px; height: 18px; background: url('../img/brand/join-panel-assets.webp') -58.5px -144px / 300.96px 169.2px no-repeat; }
.home-join .server-refresh:hover { color: #c6f1ff; }
.home-join .server-refresh:disabled { opacity: .7; }
.home-join .server-status { color: #d0dff0; font-size: .74rem; text-align: center; margin: .8rem 0; }
.home-join .address-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin-top: .8rem; }
.home-join .server-address { display: flex; align-items: stretch; min-width: 0; border: 1px solid #7b9fc5a8; border-radius: 12px; background: linear-gradient(120deg, #0c182c, #17263f); box-shadow: inset 0 0 0 2px #adc8e51c, 0 5px 10px #07142638; overflow: hidden; }
.home-join .address { display: flex; align-items: center; flex: 1; padding: .85rem .9rem; border: 0; border-radius: 0; background: none; color: #f9d17d; font-size: clamp(.8rem, 1.22vw, 1.05rem); font-weight: 800; letter-spacing: .025em; white-space: normal; overflow-wrap: anywhere; }
.server-address-copy { display: grid; place-items: center; flex: 0 0 43px; min-height: 50px; padding: 0 .3rem; border: 0; border-left: 1px solid #8aafd22b; background: #6c8dbd12; color: #a9eaff; font: 800 0 var(--body); cursor: pointer; }
.server-address-copy::before { content: ''; width: 19px; height: 21px; background: url('../img/brand/join-panel-assets.webp') -93.45px -168.21px / 351.12px 197.4px no-repeat; }
.server-address-copy:hover { background-color: #7acbff22; }
.server-address-copy[data-copied] { color: #9bf6cb; font-size: .6rem; }
.server-address-copy[data-copied]::before { display: none; }
.home-join .btn-copy { position: relative; min-height: 46px; width: 100%; padding: .7rem 1rem; border: 1px solid #ffe9ab; border-radius: 11px; background: linear-gradient(#ffe8a0, #f8c960 53%, #e4a944); box-shadow: inset 0 0 0 3px #f7d78a, inset 0 -4px 0 #bc81212e, 0 0 0 3px #906b39b3, 0 5px 15px #edb9582b; color: #452706; font-size: .9rem; font-weight: 800; text-shadow: 0 1px 0 #fff5d355; }
.home-join .btn-copy::before, .home-join .btn-copy::after { content: ''; position: absolute; top: 50%; width: 12px; height: 15px; transform: translateY(-50%); background: #fff5ce; clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%); pointer-events: none; }
.home-join .btn-copy::before { left: .8rem; }
.home-join .btn-copy::after { right: .8rem; }
.home-join .btn-copy:hover { background: linear-gradient(#fff0b9, #ffd778 53%, #f0b657); color: #452706; }
.home-join-note { margin: .8rem 0 .65rem; color: #c3d2e7; font-size: .68rem; line-height: 1.6; }
.home-join-help { position: relative; display: block; padding: .65rem .2rem 0; border-top: 1px solid #d9b86b5c; color: #bdcfe4; font-size: .67rem; line-height: 1.5; text-decoration: none; }
.home-join-help::before { content: ''; position: absolute; left: 50%; top: -5px; width: 9px; height: 10px; transform: translateX(-50%); background: #f5d38b; clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%); }
.home-join-help strong { display: inline-block; color: #8edaff; font-size: .76rem; font-weight: 800; }
.home-join-help:hover strong { color: #c0ecff; text-decoration: underline; }
@media (max-width: 1100px) and (min-width: 901px) { .home-join { padding-inline: 1.1rem; } .join-mascot { width: 84px; left: -55px; } .home-join > .eyebrow { font-size: .54rem; letter-spacing: .1em; } }
@media (max-width: 900px) {
  .home-join { padding: .9rem 1rem; border-radius: 17px; width: min(100%, 30rem); }
  .home-join::before { border-radius: 12px; inset: 5px; }
  .home-join::after { width: 14px; height: 18px; bottom: -9px; }
  .home-join > .eyebrow, .home-join h2, .home-join-note, .home-join-help, .join-crest, .join-frame-star { display: none; }
  .join-mascot { width: 53px; left: auto; right: 13px; bottom: auto; top: -36px; }
  .home-join .server-card { margin: 0; }
  .home-join .server-health { min-height: 38px; padding: .35rem .6rem; }
  .home-join .address-row { display: flex; flex-wrap: nowrap; gap: .55rem; margin-top: .7rem; }
  .home-join .server-address { flex: 1; }
  .home-join .address { padding: .7rem .6rem; font-size: .8rem; }
  .home-join .server-address-copy { display: none; }
  .home-join .btn-copy { flex: none; width: auto; min-height: 44px; padding: .55rem .8rem; font-size: .72rem; }
  .home-join .btn-copy::before, .home-join .btn-copy::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home-join { backdrop-filter: none; } }