/* Compact year-round channel invitation. */
#join-dialog{box-sizing:border-box;width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:22px 20px 16px!important;border:1px solid #171916!important;border-radius:14px!important;background:#fff!important;color:#171916!important;box-shadow:0 18px 60px #17191635!important;overflow:auto;isolation:isolate}
#join-dialog::backdrop{background:#17191670;backdrop-filter:blur(5px)}
#join-dialog::before,#join-dialog::after{content:none!important;display:none!important}
#join-dialog .join-kicker{display:inline-block;margin:0 40px 14px 0;padding:5px 8px;background:#d5fc46;color:#171916;font:800 10px/1.25 Arial,sans-serif;letter-spacing:1px}
#join-dialog h2{font-size:clamp(27px,6.8vw,36px)!important;line-height:1.02!important;letter-spacing:-1.1px!important;margin:0 26px 16px 0!important;color:#171916!important}
#join-dialog h2 span{color:#171916!important}
#join-dialog .join-dialog-links{display:grid;gap:6px}
#join-dialog .join-dialog-links a{box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid #17191625;border-radius:7px;background:#d5fc46;color:#171916;box-shadow:none;font-size:13px;line-height:1.25;gap:8px}
#join-dialog .join-dialog-links a:nth-child(even){background:#f5f5ef;color:#171916}
#join-dialog .join-dialog-links a:hover{background:#171916;color:#fff;border-color:#171916}
#join-dialog .join-dialog-links a svg{fill:currentColor;color:inherit}
#join-dialog .join-close{position:absolute;right:10px;top:10px;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:1px solid #17191635;border-radius:50%;background:#fff;color:#171916;box-shadow:none;font-size:24px;z-index:2}
#join-dialog .join-note{margin:12px 0 0;font-size:12px;line-height:1.4;color:#62665c}
#join-dialog .language-select{margin-top:10px;padding:7px 10px;background:#fff;color:#171916;border:1px solid #d6d8cf;border-radius:6px;font-size:12px}
#join-dialog a:focus-visible,#join-dialog button:focus-visible{outline:2px solid #171916;outline-offset:3px}
.channel-disc256.channel-disc256{width:126px;height:126px;right:12px;filter:drop-shadow(0 4px 9px #17191625)}
.channel-disc256 .channel-disc256-coin{background:#d5fc46;box-shadow:none;border:0}
.channel-disc256 .channel-disc256-coin svg{animation:channel-disc-spin256 28s linear infinite reverse!important}
.channel-disc256 .channel-disc256-coin svg>circle,.channel-disc256 .channel-disc256-coin svg>text{animation:none!important}
.channel-disc256 .channel-disc256-coin svg>circle:first-of-type{fill:#d5fc46;stroke:#171916;stroke-width:1.5}
.channel-disc256 .channel-disc256-coin svg>circle:nth-of-type(2){fill:#fff;stroke:#171916;stroke-width:1.5}
.channel-disc256 .channel-disc256-coin svg>text{fill:#171916}
.channel-disc256 .channel-disc256-close{left:-2px;top:-2px;min-width:26px;min-height:26px;border-width:1px;font-size:20px;background:#fff;color:#171916}
.channel-disc256.is-dragging .channel-disc256-coin svg{animation-play-state:paused!important}
@media(max-width:640px){#join-dialog{padding:18px 16px 14px!important}.channel-disc256.channel-disc256{width:110px;height:110px;right:10px}.join-dialog-links a strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){#join-dialog[open],.channel-disc256 .channel-disc256-coin svg{animation:none!important}}
#join-dialog .join-dialog-links a strong{font-size:13px;line-height:1.25;flex:1}
#join-dialog .join-dialog-links a svg{width:26px;height:26px;flex:0 0 26px}
#join-dialog .join-dialog-links a{min-height:46px}
#join-dialog #join-description{margin:0 0 14px;font-size:12px;line-height:1.4}
@media(max-width:640px){#join-dialog .join-dialog-links a strong{font-size:12px}}

/* A code badge uses spare header space without changing popup height. */
#join-dialog .join-code558{box-sizing:border-box;position:absolute;right:20px;top:60px;width:104px;height:48px;margin:0;padding:5px 7px;display:flex;flex-direction:column;justify-content:center;gap:2px;border:1px solid #171916;border-radius:6px;background:#d5fc46;color:#171916;text-align:center;overflow:hidden;pointer-events:none;z-index:1}
#join-dialog .join-code558 span{font:800 8px/1.15 Arial,sans-serif;letter-spacing:.1px;color:#171916;position:relative;z-index:1}
#join-dialog .join-code558 strong{font:900 italic 21px/1 Arial,sans-serif;letter-spacing:-.5px;position:relative;z-index:1}
#join-dialog .join-code558::after{content:"";position:absolute;inset:-70% -180%;background:linear-gradient(120deg,transparent 44%,#fff 44% 47%,transparent 47% 50%,#fff 50% 53%,transparent 53%);transform:translateX(55%);animation:join-code-sweep558 5s ease-in-out infinite;pointer-events:none}
@keyframes join-code-sweep558{0%,65%{transform:translateX(55%)}88%,100%{transform:translateX(-55%)}}
@media(max-width:640px){#join-dialog .join-code558{right:16px}}
@media(prefers-reduced-motion:reduce){#join-dialog .join-code558::after{animation:none;display:none}}

#join-dialog .join-code558.is-narrow{padding:3px 6px}#join-dialog .join-code558.is-narrow span{font-size:7.5px}#join-dialog .join-code558.is-narrow strong{font-size:20px}

/* Larger, balanced translated discount labels without clipping. */
#join-dialog .join-code558{padding:2px 6px;gap:1px}
#join-dialog .join-code558 span{font-size:9px;line-height:1.05;letter-spacing:0;white-space:pre}
#join-dialog .join-code558:lang(en) span,#join-dialog .join-code558:lang(fr) span,#join-dialog .join-code558:lang(de) span,#join-dialog .join-code558:lang(it) span{font-size:10px}
#join-dialog .join-code558.is-narrow{padding:2px 5px}
#join-dialog .join-code558.is-narrow span{font-size:8px}