/* HGO_ON_JOIN_SIMPLE_V9 */
#join-card{isolation:isolate;overflow:hidden;position:fixed;display:grid;grid-template-columns:35px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border:2px solid transparent;border-radius:19px;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--hgo-join-angle,0deg),#4285f4,#8957ee,#d846aa,#ef716a,#63b579,#4285f4) border-box;box-shadow:0 8px 24px #32283f18;animation:hgoJoinRGB 9s linear infinite}
#join-card>*:not(.join-art){position:relative;z-index:1}
#join-card>.join-art{position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden;z-index:0}
#join-card .join-art>i{position:absolute;display:block;width:40px;height:40px;background:url("https://hilemgo.com/uploads/1781275486_hilemgo.png") center/contain no-repeat;opacity:.035}
#join-card .join-art>i:nth-child(1){left:46%;top:-11px;transform:rotate(-12deg)}
#join-card .join-art>i:nth-child(2){left:68%;bottom:-14px;transform:rotate(10deg)}
#join-card .join-art>i:nth-child(3){right:10px;top:7px;width:30px;height:30px;opacity:.025}
#join-card .join-art>i:nth-child(n+4){display:none}
#join-card>.icon-box{display:grid;width:35px;height:35px;flex-basis:35px;border:1px solid #e9e4f0;border-radius:11px;background:#f5f1fa;color:#9575b5;box-shadow:none}
#join-card>.icon-box svg{width:18px;height:18px;stroke-width:1.8}
#join-card>.join-copy{min-width:0;flex:1}
#join-card h2{font-size:14px;font-weight:800;letter-spacing:-.3px;line-height:1.4;color:#27272c;margin:0 0 3px}
#join-card p{font-size:10px;line-height:1.6;font-weight:500;color:#96939d;margin:0}
#join-card .primary{width:auto;min-height:42px;margin:0;padding:11px 15px;gap:8px;border:1px solid #1c1c1f;border-radius:13px;background:#1c1c1f;color:#fff;box-shadow:none;font-size:11px;line-height:1.4;font-weight:800;white-space:nowrap}
#join-card .primary svg{width:15px;height:15px;stroke-width:1.9}
#join-card .primary:hover:not(:disabled){background:#343438;border-color:#343438}
#join-card .primary:focus-visible{outline:3px solid #a98bc9;outline-offset:3px}
#join-card .primary:disabled{background:#eeeef1;border-color:#e1e1e7;color:#92919b;opacity:1;white-space:normal;max-width:240px}
body{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
body:has(#join-card[hidden]){padding-bottom:0}
@media(max-width:650px){
 #join-card{grid-template-columns:minmax(0,1fr) auto;gap:11px;padding:12px 14px;border-radius:18px}
 #join-card>.icon-box{display:none}
 #join-card h2{font-size:13px;line-height:1.4;margin:0 0 3px}
 #join-card p{font-size:9px;line-height:1.6}
 #join-card>.primary{grid-column:auto;width:auto;min-height:42px;padding:11px 12px;gap:6px;font-size:10px;border-radius:12px}
 #join-card .primary svg{width:14px;height:14px}
 #join-card .join-art>i:nth-child(n+2){display:none}
 #join-card .join-art>i:first-child{left:40%;top:12px;width:35px;height:35px;opacity:.025}
}
@media(max-width:420px){#join-card p{display:none}#join-card h2{margin:0;font-size:12px}#join-card .primary:disabled{max-width:170px}}

/* HGO_ON_JOIN_RGB_V11: only the thin outer border changes colour. */
@property --hgo-join-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes hgoJoinRGB{from{--hgo-join-angle:0deg}to{--hgo-join-angle:360deg}}
body.modal-open #join-card{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#join-card{animation:none}}

/* HGO_ON_JOIN_REWARD_COPY_V12 */
#join-card .join-copy h2{display:flex;align-items:center;flex-wrap:wrap;gap:7px;line-height:1.4;margin-bottom:4px}
#join-card .join-reward{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid #c8dfad;border-radius:10px;background:linear-gradient(120deg,#eff9de,#e0f1c8);color:#426b25;font-size:16px;font-weight:900;letter-spacing:-.5px;line-height:1.3;box-shadow:inset 0 1px 0 #ffffffc9}
#join-card .join-reward-label{font-size:14px;font-weight:800;color:#34343b;letter-spacing:-.3px}
#join-card>.icon-box{background:#f1f7e8;border-color:#d9e7c8;color:#658343}
#join-card .join-copy p{color:#8a8791;font-weight:550}
@media(max-width:650px){#join-card .join-copy h2{gap:6px}#join-card .join-reward{font-size:14px;padding:4px 7px;border-radius:9px}#join-card .join-reward-label{font-size:12px}}
@media(max-width:420px){#join-card .join-copy h2{gap:3px 6px;margin:0}#join-card .join-reward{font-size:13px;padding:4px 6px}#join-card .join-reward-label{font-size:11px}}