.friend-invite,.friend-invite :is(h2,p,span,label,a,button,input){font-family:FortunePixel,monospace;font-size:16px;font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:0}
.friend-invite{--invite-ink:#081241;--invite-paper:#fffdf5;position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));color:var(--invite-ink);line-height:1.5;color-scheme:light}
.friend-invite[hidden]{display:none!important}.friend-invite *{box-sizing:border-box}
.friend-invite-backdrop{position:fixed;inset:0;background:rgb(8 18 65 / .38)}
.friend-invite-ticket{position:relative;isolation:isolate;flex:none;width:100%;max-width:360px;margin:auto;padding:24px 18px 18px;filter:drop-shadow(5px 6px 0 rgb(8 18 65 / .25));animation:friend-invite-in .24s ease-out}
.friend-invite-ticket::before,.friend-invite-ticket::after{content:'';position:absolute;pointer-events:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,calc(100% - 10px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 10px,100% 10px,100% calc(50% - 12px),calc(100% - 6px) 50%,100% calc(50% + 12px),100% calc(100% - 10px),calc(100% - 4px) calc(100% - 10px),calc(100% - 4px) calc(100% - 4px),calc(100% - 10px) calc(100% - 4px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 10px),0 calc(100% - 10px),0 calc(50% + 12px),6px 50%,0 calc(50% - 12px),0 10px,4px 10px,4px 4px,10px 4px)}
.friend-invite-ticket::before{inset:0;z-index:-2;background:var(--invite-ink)}
.friend-invite-ticket::after{inset:3px;z-index:-1;background:linear-gradient(to bottom,#ffdf2d 0 5px,var(--invite-paper) 5px 100%)}
.friend-invite-close{position:absolute;right:7px;top:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:var(--invite-ink);cursor:pointer}
.friend-invite-close svg{width:24px;height:24px}
.friend-invite-label{margin:0 28px 15px;text-align:center;color:#426d9d;line-height:1.5}
.friend-invite-hero{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 14px;text-align:center}
.friend-invite-mascot{display:block;flex:none;width:76px;height:92px;background:url(dog-receipt-character.webp) 49.6% 60.2%/460% 374% no-repeat;image-rendering:pixelated}
.friend-invite #friend-invite-title{margin:0;line-height:1.8;word-break:keep-all}
.friend-invite #friend-invite-title span{display:block;white-space:nowrap}
.friend-invite-divider{display:block;border-top:2px dashed #c6dfed;margin:19px -9px 18px}
.friend-invite-channel{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 10px;border:0;border-radius:0;background:transparent;color:var(--invite-ink);text-align:center;text-decoration:none;line-height:1.5;filter:drop-shadow(0 3px 0 #d6c264);cursor:pointer}
.friend-invite-channel::before,.friend-invite-channel::after{content:'';position:absolute;pointer-events:none;clip-path:polygon(8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px),0 8px,4px 8px,4px 4px,8px 4px)}
.friend-invite-channel::before{inset:0;z-index:-2;background:var(--invite-ink)}
.friend-invite-channel::after{inset:2px;z-index:-1;background:#fee500}
.friend-invite-channel svg{flex:none;width:24px;height:24px}
.friend-invite-channel:active{transform:translateY(2px);filter:none}
.friend-invite-later{display:block;width:100%;min-height:44px;margin:10px 0 0;padding:11px 8px;border:0;border-radius:0;background:transparent;color:#576e8e;line-height:1.5;cursor:pointer}
.friend-invite-today{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;margin-top:5px;color:#667c9d;line-height:1.5;cursor:pointer}
.friend-invite-today input{appearance:none;display:grid;place-items:center;flex:none;width:20px;height:20px;margin:0;border:2px solid var(--invite-ink);border-radius:0;background:var(--invite-paper);cursor:pointer}
.friend-invite-today input:checked{background:#ffe34a}
.friend-invite-today input:checked::after{content:'';width:10px;height:10px;background:var(--invite-ink);clip-path:polygon(0 40%,20% 40%,20% 60%,40% 60%,40% 40%,60% 40%,60% 20%,80% 20%,80% 0,100% 0,100% 40%,80% 40%,80% 60%,60% 60%,60% 80%,40% 80%,40% 100%,20% 100%,20% 80%,0 80%)}
.friend-invite :is(button,a,input):focus-visible{outline:3px dashed #2387ff;outline-offset:3px}
@keyframes friend-invite-in{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(max-width:360px){.friend-invite{padding-left:8px;padding-right:8px}.friend-invite-ticket{padding-left:14px;padding-right:14px}}
@media(max-width:299px){.friend-invite #friend-invite-title span{white-space:normal}}
@media(prefers-reduced-motion:reduce){.friend-invite-ticket{animation:none}}