:root{ --night:#07041A; --deep:#140A3A; --cyan:#00F0FF; --mag:#C65AAE; --plum:#2A1B4A; --volt:#F3FF3A; --white:#F4F7FF; --muted:#A9A3D6; --red:#FF5A5A; --num:"Anton",Impact,sans-serif; --tech:"Orbitron","Arial Black",sans-serif; --body:"Rajdhani","Arial Narrow",system-ui,sans-serif; } @media (prefers-color-scheme: light){:root:not([data-theme="dark"]){}} /* dark scrollbars and form controls everywhere (Windows otherwise draws chunky white ones); light themes set their own */ :root{color-scheme:dark} *{scrollbar-width:thin;scrollbar-color:#3b2d80 transparent} ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#3b2d80;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--cyan,#00f0ff)} :root[data-theme="dark"]{} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;background:var(--night)} body{font-family:var(--body);color:var(--white);overflow:hidden} button,input,textarea{font:inherit} button{cursor:pointer} button:disabled{opacity:.5;cursor:default} :focus-visible{outline:3px solid var(--volt);outline-offset:3px} .hidden{display:none!important} @font-face{font-family:"Monogram";src:url(data:font/ttf;base64,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) format("truetype");font-display:swap} #pxfxLayer{position:fixed;inset:0;pointer-events:none;z-index:9600;overflow:hidden} .pxfx{position:absolute;display:block;image-rendering:pixelated;background-repeat:no-repeat;background-position:0 0} @keyframes pxfxrun{to{background-position:var(--end) 0}} .pxi{image-rendering:pixelated;vertical-align:middle;display:inline-block} .sx-lock .pxi{display:block;filter:drop-shadow(2px 2px 0 #07041a)} .unlockgroup .pxi{margin-right:6px;vertical-align:-3px}.sx-chip .pxi{margin-right:3px;vertical-align:-4px} .px-achicon .pxi{width:32px;height:32px} .qx-level .pxfx{position:relative;margin:8px auto 0} .sr{position:absolute;left:-9999px} .sky{position:fixed;inset:0;z-index:0;background: radial-gradient(circle at 80% 10%,rgba(198,90,174,.16),transparent 45%), radial-gradient(circle at 10% 90%,rgba(0,240,255,.25),transparent 50%), linear-gradient(180deg,var(--night),var(--deep))} .sky canvas{position:absolute;inset:0;width:100%;height:100%} .screen{position:relative;z-index:1;height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column} /* ===== front date stamp ===== */ .front{overflow-y:auto;padding:calc(env(safe-area-inset-top) + 28px) 20px calc(env(safe-area-inset-bottom) + 24px)} .front-inner{margin:auto 0;display:flex;flex-direction:column;gap:48px} .stamp{position:relative;width:min(100%,400px);aspect-ratio:1.6;margin:0 auto;transform:rotate(-7deg)} .stamp > *{position:absolute} .plate,.glow{inset:6% 4% 18% 2%;clip-path:polygon(0 18%,74% 0,100% 12%,96% 100%,6% 86%)} .plate{background:var(--night);border:4px solid var(--cyan);box-shadow:0 0 0 4px var(--mag) inset} .glow{background:var(--cyan);filter:blur(18px);opacity:.35;z-index:-1} .month{left:6%;top:20%;font-family:var(--num);font-size:clamp(66px,22vw,108px);line-height:.8;color:var(--night);-webkit-text-stroke:3px var(--cyan);text-shadow:4px 4px 0 var(--mag);transform:rotate(-10deg)} .slash{left:23%;top:28%;width:12%;height:62%;background:var(--mag);clip-path:polygon(75% 0,100% 0,25% 100%,0 100%)} .day{left:34%;top:4%;font-family:var(--num);font-size:clamp(104px,36vw,168px);line-height:.85;color:var(--white);text-shadow:-4px 0 0 var(--cyan),5px 5px 0 var(--mag)} .icon{right:0;top:0;width:28%;aspect-ratio:1;background:var(--volt);clip-path:polygon(8% 0,100% 10%,92% 100%,0 88%);display:grid;place-items:center;transform:rotate(9deg)} .icon svg{width:74%;height:74%} .weekday{right:2%;bottom:22%;font-family:var(--tech);font-weight:900;font-size:clamp(17px,5.6vw,26px);background:var(--mag);color:var(--night);padding:2px 10px 0;transform:rotate(-12deg);border:3px solid var(--night);letter-spacing:1px} .phase{left:-2%;bottom:-10%;font-family:var(--tech);font-weight:900;font-size:clamp(24px,8.5vw,40px);color:var(--cyan);background:var(--night);padding:0 12px;border:3px solid var(--cyan);transform:rotate(4deg)} body.halloween .plate{border-color:#FF7A1A;box-shadow:0 0 0 4px #9B4DFF inset} body.halloween .glow{background:#d6c90d;filter:blur(18px);opacity:.35;z-index:-1} body.halloween .stamp::after{content:"🎃";position:absolute;left:-3%;top:-4%;font-size:clamp(34px,11vw,52px);transform:rotate(-14deg)} body.halloween .stamp::before{content:"👻";position:absolute;right:-4%;bottom:-4%;font-size:clamp(34px,11vw,52px);transform:rotate(-14deg)} /* the other holidays use the same two stickers: ::after = top-left, ::before = bottom-right */ body:is(.thanksgiving,.winter,.newyear,.valentine,.stpat,.easter,.july4) .stamp::after{position:absolute;left:-3%;top:-4%;font-size:clamp(34px,11vw,52px);transform:rotate(-14deg)} body:is(.thanksgiving,.winter,.newyear,.valentine,.stpat,.easter,.july4) .stamp::before{position:absolute;right:-4%;bottom:-4%;font-size:clamp(34px,11vw,52px);transform:rotate(-14deg)} /* Thanksgiving (November) */ body.thanksgiving .plate{border-color:#E07A2C;box-shadow:0 0 0 4px #8A4A1C inset} body.thanksgiving .glow{background:#FFB347} body.thanksgiving .stamp::after{content:"🦃"} body.thanksgiving .stamp::before{content:"🍂"} /* Winter holidays (December) */ body.winter .plate{border-color:#E8303A;box-shadow:0 0 0 4px #2FBF71 inset} body.winter .glow{background:#BDEBFF} body.winter .stamp::after{content:"🎄"} body.winter .stamp::before{content:"❄️"} /* New Year (Jan 1–7) */ body.newyear .plate{border-color:#F3D36B;box-shadow:0 0 0 4px #B18CFF inset} body.newyear .glow{background:#FFE680} body.newyear .stamp::after{content:"🎉"} body.newyear .stamp::before{content:"🥂"} /* Valentine's (Feb 1–14) */ body.valentine .plate{border-color:#FF5C9A;box-shadow:0 0 0 4px #FFB3CF inset} body.valentine .glow{background:#FF7AB6} body.valentine .stamp::after{content:"💘"} body.valentine .stamp::before{content:"💌"} /* St. Patrick's (Mar 14–17) */ body.stpat .plate{border-color:#2FBF71;box-shadow:0 0 0 4px #F3D36B inset} body.stpat .glow{background:#7CFF6B} body.stpat .stamp::after{content:"🍀"} body.stpat .stamp::before{content:"🌈"} /* Easter week */ body.easter .plate{border-color:#B18CFF;box-shadow:0 0 0 4px #7CE8C6 inset} body.easter .glow{background:#FFE9A8} body.easter .stamp::after{content:"🐣"} body.easter .stamp::before{content:"🌷"} /* Fourth of July (Jul 1–4) */ body.july4 .plate{border-color:#E8303A;box-shadow:0 0 0 4px #3D6BFF inset} body.july4 .glow{background:#F4F7FF} body.july4 .stamp::after{content:"🎆"} body.july4 .stamp::before{content:"⭐"} /* on the home screen (after logging in) the stamp is smaller, so the stickers shrink and move out to the corners */ #front.logged .stamp::after{left:-7%;top:-14%;font-size:clamp(26px,8vw,38px)} #front.logged .stamp::before{right:-9%;bottom:-4%;font-size:clamp(24px,7.5vw,36px)} .stamp::before{z-index:2} /* ===== cards / forms ===== */ .card{display:grid;gap:12px;animation:rise .45s .15s both} @keyframes rise{from{opacity:0;transform:translateY(18px)}} .tabs{display:flex;gap:8px} .tab{flex:1;background:none;border:2px solid var(--cyan);color:var(--cyan);padding:9px;font-family:var(--tech);font-size:13px} .tab[aria-selected="true"]{background:var(--cyan);color:var(--night)} .card label{font-family:var(--tech);font-size:12px;color:var(--cyan);letter-spacing:.5px} .field{width:100%;background:rgba(7,4,26,.85);color:var(--white);border:2px solid var(--cyan);padding:12px 14px;font-size:18px;clip-path:polygon(0 0,97% 0,100% 30%,100% 100%,3% 100%,0 70%)} .go{font-family:var(--tech);font-weight:900;font-size:21px;background:var(--mag);color:var(--night);border:none;padding:14px;margin-top:4px;clip-path:polygon(0 10%,100% 0,98% 90%,2% 100%);box-shadow:0 0 10px rgba(198,90,174,.35)} .go:active{transform:scale(.97)} .msgline{font-size:16px;min-height:20px;color:var(--volt)} .msgline.bad{color:var(--red)} .note{font-size:14px;color:var(--muted);text-align:center} .whoami{display:flex;align-items:center;gap:12px} .whoami .who-text{font-size:17px;line-height:1.1} .whoami .who-text b{font-family:var(--tech);color:var(--mag);font-size:15px} .ghost{margin-left:auto;background:none;border:2px solid var(--cyan);color:var(--cyan);padding:6px 10px;font-family:var(--tech);font-size:11px} /* avatars */ .face{flex:none;width:48px;height:48px;display:grid;place-items:center;font-family:var(--tech);font-weight:900;font-size:22px;color:var(--night);background:var(--c,var(--cyan));clip-path:polygon(10% 0,100% 8%,90% 100%,0 92%);overflow:hidden;border:none;padding:0} .face img{width:100%;height:100%;object-fit:cover;display:block} .face.sm{width:40px;height:40px;font-size:18px} .face.lg{width:132px;height:132px;font-size:60px} .pcard-banner{position:relative;width:100%;height:120px;overflow:hidden;border:2px solid var(--cyan);box-shadow:5px 5px 0 var(--mag);clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,0 100%)} #personSheet.has-card #personFace{margin-top:-62px;z-index:2} .cardprev{width:100%;display:grid;justify-items:center} .kbdhint{display:none} .markall{justify-self:end;align-self:flex-end;margin:-4px 2px 6px auto;font-size:13px;display:block} .bubble .ednote{display:block;margin-top:4px;font-size:11.5px;font-family:var(--tech);letter-spacing:.3px;opacity:.7;font-style:italic} @media (pointer:fine){ .kbdhint{display:block;font-size:13px;opacity:.75;margin-top:4px} } .pronouns{font-family:var(--tech);font-size:12px;letter-spacing:.5px;color:var(--night);background:var(--cyan);padding:3px 9px 2px;transform:skewX(-8deg);margin-top:-6px} .cardprev .face{margin-top:-62px;z-index:2} .pcard-banner .pc-stk{position:absolute;width:64px;height:64px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55))} .pcard-banner .pc-stk svg{width:100%;height:100%} .pcard-banner .pc-p{position:absolute;top:-14px;font-style:normal;color:#fff;opacity:.85;pointer-events:none;animation:pcfall 3s linear infinite;text-shadow:0 0 6px currentColor} .pcard-banner.fx-sparkle .pc-p{color:#f3ff3a;animation-name:pctwinkle;top:auto;bottom:10%} .pcard-banner.fx-hearts .pc-p{color:#ff6fae;animation-name:pcrise;top:auto;bottom:-14px} .pcard-banner.fx-embers .pc-p{color:#ff8a1f;animation-name:pcrise;top:auto;bottom:-14px} .pcard-banner.fx-stars .pc-p{color:#9fe8ff;animation-name:pcshoot} .pcard-banner.fx-snow .pc-p{color:#e8fbff} @keyframes pcfall{from{transform:translateY(0)}to{transform:translateY(150px)}} @keyframes pcrise{from{transform:translateY(0);opacity:.9}to{transform:translateY(-150px);opacity:0}} @keyframes pctwinkle{0%,100%{transform:translateY(0) scale(.6);opacity:.2}50%{transform:translateY(-40px) scale(1.2);opacity:1}} @keyframes pcshoot{from{transform:translate(0,0);opacity:1}to{transform:translate(-90px,140px);opacity:0}} @media (prefers-reduced-motion:reduce){html:not(.motion-always) .pcard-banner .pc-p{animation:none;top:40%}} .cb-h{width:100%;text-align:left;font-family:var(--tech);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin:6px 0 0} .cb-h small{color:var(--muted);text-transform:none;letter-spacing:0} .cb-row{display:flex;flex-wrap:wrap;gap:8px;width:100%} .cb-sw{width:46px;height:34px;border:2px solid #3b2d80;font:inherit;font-size:12px;font-weight:700;color:var(--white);background:var(--night);padding:0} .cb-sw.up{width:auto;padding:0 10px} .cb-sw.on,.cb-chip.on,.cb-stk.on{border-color:var(--volt);box-shadow:0 0 0 2px var(--volt)} .cb-chip{font:inherit;font-size:14px;font-weight:700;background:var(--night);color:var(--white);border:2px solid #3b2d80;padding:6px 10px} .cb-row{flex:none} .cb-partner{display:grid;gap:8px;width:100%} .cb-prow{display:flex;align-items:center;gap:10px;font-weight:700} .cb-pbtn{width:auto;justify-self:start;margin:0} .cb-ppick summary{cursor:pointer;color:var(--cyan);font-weight:700;padding:4px 0} .cb-pchip{display:inline-flex;align-items:center;gap:8px} .cb-pchip .face.sm{width:26px;height:26px;font-size:12px} #relAsk .face.lg{margin:0 auto 6px} .cb-links{width:100%} /* ===== Partners ===== */ .pxsprite{image-rendering:pixelated;image-rendering:crisp-edges;display:block} .pt-plate{width:min(200px,60vw);aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,#3b2d80,#1a1240 65%,transparent 72%);position:relative} .pt-plate .pt-big{width:80%;height:80%;animation:ptbob 2.4s ease-in-out infinite} .pt-plate.egg .pt-big{animation:ptwobble 3s ease-in-out infinite;transform-origin:50% 90%} .pt-plate.shiny::after{content:"✦";position:absolute;right:14%;top:10%;color:#FFD86B;font-size:22px;text-shadow:0 0 8px #FFD86B;animation:sxsparkle 1.6s ease-in-out infinite} @keyframes ptbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes ptwobble{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}} .pt-name{display:flex;align-items:center;gap:8px;justify-content:center;font-size:24px;font-family:var(--num);letter-spacing:1px} .pt-shinytag{font-family:var(--tech);font-size:10px;color:#07041A;background:#FFD86B;padding:2px 6px} .pt-sub{font-family:var(--tech);font-size:12px;color:var(--cyan);text-align:center} .pt-prog{width:100%;display:grid;gap:5px} .pt-proglabel{font-size:13px;color:var(--muted);text-align:center} .pt-bar{height:10px;border:2px solid var(--cyan);background:rgba(0,0,0,.3)} .pt-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mag),var(--volt))} .pt-stats{width:100%;display:grid;gap:6px} .pt-stat{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:8px;font-size:13px;text-align:left} .pt-sbar{height:8px;background:rgba(255,255,255,.1);overflow:hidden} .pt-sbar i{display:block;height:100%} .pt-snum{font-family:var(--tech);font-size:11px;color:var(--muted);text-align:right} .pt-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;width:100%} .pt-form{width:44px;height:44px;display:grid;place-items:center;border:2px solid #3b2d80;background:rgba(0,0,0,.25)} .pt-form.now{border-color:var(--volt);box-shadow:0 0 0 2px var(--volt)} .pt-form .pt-mini{width:36px;height:36px} .pt-q{font-family:var(--num);font-size:20px;color:var(--muted)} .pt-arrow{color:var(--muted);font-size:14px} .pt-hint{width:100%;font-size:12px;color:var(--muted);text-align:center;margin-top:4px} .pt-dex{width:100%;display:grid;gap:8px} .pt-dex h3{margin:4px 0 0} .pt-dexgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .pt-dexcell{display:grid;justify-items:center;gap:2px;border:2px solid #FFD86B;padding:8px 2px;background:rgba(255,216,107,.08)} .pt-dexcell.locked{border-color:#3b2d80;background:rgba(0,0,0,.25);opacity:.7} .pt-dexic{font-size:22px}.pt-dexlab{font-family:var(--tech);font-size:10px}.pt-dexn{font-size:12px;color:var(--muted)} .pt-how{width:100%;text-align:left;font-size:14px} .pt-how summary{cursor:pointer;color:var(--cyan);font-family:var(--tech);font-size:13px} .pt-how ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px} .pt-btnimg{width:28px;height:28px;display:inline-block;vertical-align:middle;margin-right:4px} #openPartner{display:flex;align-items:center;justify-content:flex-start;gap:4px} #evoScene{position:fixed;inset:0;z-index:9000;background:radial-gradient(circle,#2a1b5a,#07041A 70%);display:grid;place-items:center;align-content:center;gap:18px;text-align:center;padding:24px;cursor:pointer} #evoScene.hidden{display:none} #evoStage{position:relative;width:min(240px,64vw);aspect-ratio:1} #evoStage .pxsprite{position:absolute;inset:0;width:100%;height:100%} #evoScene .evo-b{opacity:0} #evoScene:not(.done) .evo-a{animation:evoflash 2.6s steps(1,end) forwards} #evoScene:not(.done) .evo-b{animation:evoflashb 2.6s steps(1,end) forwards} @keyframes evoflash{0%{filter:none}15%{filter:brightness(0) invert(1)}30%{filter:none}42%{filter:brightness(0) invert(1)}52%{filter:none}60%{filter:brightness(0) invert(1);opacity:1}68%{opacity:0}76%{opacity:1}84%{opacity:0}90%{opacity:1}96%,100%{opacity:0}} @keyframes evoflashb{0%,64%{opacity:0}68%{opacity:1;filter:brightness(0) invert(1)}76%{opacity:0}84%{opacity:1;filter:brightness(0) invert(1)}90%{opacity:0}96%,100%{opacity:1;filter:brightness(0) invert(1)}} #evoScene.done .evo-a{opacity:0} #evoScene.done .evo-b{opacity:1;animation:evopop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes evopop{from{transform:scale(.6)}to{transform:scale(1)}} #evoTitle{font-family:var(--num);font-size:clamp(24px,7vw,40px);color:var(--volt);text-shadow:3px 3px 0 var(--mag);margin:0} #evoText{color:var(--white);font-size:16px;min-height:1.2em;margin:0} #evoClose{position:absolute;top:14px;right:14px} /* ===== Profile tabs ===== */ .proftabs{position:sticky;top:-36px;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:calc(100% + 8px);margin:2px -4px 0;padding:8px 0;background:var(--night)} .proftabs button{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1;font-family:var(--tech);font-size:9.5px;letter-spacing:.3px;color:var(--white);background:transparent;border:2px solid #3b2d80;padding:8px 2px 7px;transform:skewX(-8deg);white-space:nowrap;cursor:pointer} .proftabs .face.metab{width:20px;height:20px;font-size:10px;margin:0 auto} .proftabs .face.metab>:not(.fi),.proftabs .face.metab::before,.proftabs .face.metab::after{display:none!important} .proftabs .face.metab .fi img{width:100%;height:100%;object-fit:cover} .proftabs .pt-ic{font-size:16px} .proftabs button[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--night);box-shadow:3px 3px 0 var(--mag)} .proftabs button:focus-visible{outline:2px solid var(--volt);outline-offset:2px} .profpane{display:grid;gap:14px;justify-items:center;width:100%} .profpane[hidden]{display:none} .profpane > h3{margin-bottom:-4px} #profFace{cursor:pointer;position:relative} #profile #changePhoto{margin-top:-8px} /* on/off settings drawn as switches */ .sheet .ghost.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;transform:none;clip-path:none;margin-left:0;border:2px solid #3b2d80;padding:10px 14px;color:var(--white)} .sheet .ghost.setrow:hover,.sheet .ghost.setrow:focus-visible{background:rgba(255,255,255,.05);color:var(--white);border-color:var(--cyan);transform:none} .setrow .sr-lab{flex:1;min-width:0} .setrow .swi{width:46px;height:26px;border:2px solid var(--muted);border-radius:14px;position:relative;flex:none} .setrow .swi::after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s} .setrow.on .swi{border-color:var(--cyan)} .setrow.on .swi::after{transform:translateX(20px);background:var(--cyan);box-shadow:0 0 6px var(--cyan)} .setrow .sval{flex:none;font-family:var(--tech);font-size:12px;color:var(--night);background:var(--cyan);padding:3px 8px 2px;max-width:45%;text-align:center} .bondrows{display:flex;flex-direction:column;gap:8px;width:100%} .bondrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--white);background:rgba(255,255,255,.04);border:2px solid #3b2d80;padding:8px 10px;cursor:pointer} .bondrow:hover,.bondrow:focus-visible{border-color:var(--cyan)} .bondrow .face{width:40px;height:40px;font-size:18px} .bondrow .br-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .bondrow .br-name{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bondrow .br-arc{font-family:var(--tech);font-size:12px;color:var(--cyan)} .bondrow .br-bar{height:6px;background:rgba(255,255,255,.12);overflow:hidden} .bondrow .br-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mag),var(--volt))} .bondrow .br-rank{font-family:var(--num);font-size:30px;line-height:1;color:var(--volt);text-shadow:2px 2px 0 var(--mag);min-width:34px;text-align:center} .bondrow .br-rank small{display:block;font-family:var(--tech);font-size:9px;letter-spacing:1px;color:var(--muted);text-shadow:none} .cb-links summary{cursor:pointer;font-family:var(--tech);font-size:13px;color:var(--cyan);padding:4px 0} .cb-linkgrid{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin-top:8px} .cb-linkgrid label{font-size:13px;font-weight:700;white-space:nowrap} .cb-linkgrid .field{margin:0;padding:6px 10px;font-size:14px;min-width:0} .plinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%} .plinks:empty{display:none} .plink{display:inline-flex;align-items:center;gap:5px;font-family:var(--tech);font-size:12px;color:var(--white);background:var(--night);border:2px solid var(--mag);padding:4px 9px 3px;text-decoration:none;transform:skewX(-8deg);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .plink:hover,.plink:focus-visible{background:var(--cyan);color:var(--night);border-color:var(--cyan)} .cardprev,.cardprev .pcard-banner{flex:none} .cb-stk{width:58px;height:58px;padding:4px;background:var(--night);border:2px solid #3b2d80} .cb-stk .stk,.cb-stk svg{width:100%;height:100%;display:block} /* ===== chat ===== */ .top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;border-bottom:2px solid var(--mag);background:rgba(7,4,26,.78);backdrop-filter:blur(6px)} .mini{font-family:var(--num);font-size:32px;line-height:1;transform:rotate(-6deg);color:var(--white);text-shadow:-2px 0 var(--cyan),3px 3px var(--mag)} .mini small{font-family:var(--tech);font-size:10px;color:var(--volt);margin-left:3px;vertical-align:middle} .roombox{min-width:0} .roomname{font-family:var(--tech);font-size:13px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .status{font-size:13px;color:var(--muted)} .top .ghost{margin-left:0;padding:6px 8px} .top #inviteBtn{margin-left:auto} @media (max-width:420px){.mini{display:none}} .linkbtn{background:none;border:none;color:var(--cyan);text-decoration:underline;text-underline-offset:3px;justify-self:start;font-size:16px;padding:0} .roomcard-row{display:flex;justify-content:space-between;align-items:center;gap:10px} .sheet .field{text-align:left;font-size:15px} .feed{flex:1;overflow-y:auto;padding:18px 10px;display:flex;flex-direction:column;gap:16px} .empty{margin:auto;text-align:center;color:var(--muted);font-size:17px;max-width:24ch} .msg{display:flex;align-items:flex-start;max-width:92%;transform:rotate(var(--tilt,0));animation:snap .26s cubic-bezier(.2,1.6,.4,1) both} .msg.t1{--tilt:-1.5deg}.msg.t2{--tilt:1deg} .msg.me{align-self:flex-end;flex-direction:row-reverse;animation-name:snapR} @keyframes snap{from{opacity:0;transform:translateX(-36px) rotate(-8deg)}} @keyframes snapR{from{opacity:0;transform:translateX(36px) rotate(8deg)}} .msg .face{position:relative;top:16px;transform:rotate(-8deg);z-index:2} .msg.me .face{transform:rotate(8deg)} .col{display:flex;flex-direction:column;align-items:flex-start;min-width:0} .me .col{align-items:flex-end} .tag{font-family:var(--tech);font-size:12px;background:var(--night);color:var(--white);border:2px solid var(--cyan);padding:2px 8px;margin:0 0 -3px 12px;transform:rotate(-3deg);position:relative;z-index:1;white-space:nowrap} .me .tag{margin:0 12px -3px 0;transform:rotate(3deg);color:var(--white);border-color:var(--mag)} .tag b{color:var(--volt);margin-right:6px} .bubble{position:relative;padding:14px 22px;font-size:19px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;color:var(--white);filter:drop-shadow(3px 3px 0 rgba(198,90,174,.55)) drop-shadow(0 0 6px rgba(0,240,255,.25))} .bubble::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);clip-path:polygon(0 14%,97% 0,100% 58%,93% 100%,3% 88%);clip-path:polygon(0 min(14%,12px),97% 0,100% 58%,93% 100%,3% max(88%,calc(100% - 12px)));box-shadow:inset 0 0 0 2px var(--cyan)} /* corner slants capped so tall messages keep their corners */ .me .bubble{color:var(--white);filter:drop-shadow(-3px 3px 0 rgba(0,240,255,.55))} .me .bubble::before{background:var(--plum);box-shadow:inset 0 0 0 2px var(--mag);clip-path:polygon(3% 0,100% 12%,96% 90%,7% 100%,0 48%);clip-path:polygon(3% 0,100% min(12%,12px),96% max(90%,calc(100% - 10px)),7% 100%,0 48%)} .bubble a{color:var(--volt);text-decoration:underline;text-underline-offset:3px} .me .bubble a{color:var(--volt);font-weight:700} .shot{display:block;border:none;padding:0;background:none;margin:2px 0 6px} .shot img{display:block;max-width:min(62vw,260px);max-height:320px;border:3px solid var(--cyan);transform:rotate(-1deg)} .me .shot img{border-color:var(--mag)} .compose{padding:8px 12px calc(env(safe-area-inset-bottom) + 12px);background:rgba(7,4,26,.92);border-top:2px solid var(--cyan)} .pending{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px;color:var(--muted)} .pending img{width:56px;height:56px;object-fit:cover;border:2px solid var(--mag)} .pending button{background:none;border:2px solid var(--muted);color:var(--muted);padding:2px 8px} .row{display:flex;gap:8px;align-items:flex-end} .clip{flex:none;width:46px;height:46px;background:var(--deep);border:2px solid var(--mag);display:grid;place-items:center} .clip svg{width:24px;height:24px} .row textarea{flex:1;resize:none;background:var(--deep);color:var(--white);border:2px solid var(--cyan);padding:11px 12px;font-size:17px;max-height:120px;min-height:46px} .send{flex:none;font-family:var(--tech);font-weight:900;font-size:15px;background:var(--cyan);color:var(--night);border:none;padding:13px 15px;clip-path:polygon(0 0,100% 12%,92% 100%,6% 88%)} .send:active{transform:scale(.92) rotate(-4deg)} /* typing + read receipts */ .typing{padding:0 14px 8px;height:0;overflow:visible;position:relative} .typing .pill{position:absolute;left:14px;bottom:10px;display:flex;align-items:center;gap:10px;background:var(--night);border:2px solid var(--cyan);box-shadow:3px 3px 0 var(--mag);padding:6px 12px;transform:rotate(-2deg);font-family:var(--tech);font-size:12px;color:var(--cyan);animation:pop .22s cubic-bezier(.2,1.6,.4,1) both;max-width:calc(100% - 28px)} .typing .pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @keyframes pop{from{opacity:0;transform:translateY(8px) rotate(-8deg) scale(.8)}} .dots{display:flex;gap:5px;flex:none} .dots i{width:9px;height:9px;background:var(--mag);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:hop 1s infinite ease-in-out} .dots i:nth-child(2){background:var(--cyan);animation-delay:.15s} .dots i:nth-child(3){background:var(--volt);animation-delay:.3s} @keyframes hop{0%,60%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(45deg)}} .receipt{align-self:flex-end;margin:-6px 10px 0 0;font-family:var(--tech);font-size:10px;letter-spacing:.5px;color:var(--muted);transform:rotate(2deg);display:flex;align-items:center;gap:6px} .receipt.read{color:var(--volt)} .receipt .mini-faces{display:flex} .receipt .mini-faces .face{width:18px;height:18px;font-size:9px;margin-left:-4px;position:static;transform:none} /* ===== overlays ===== */ #cropSheet{z-index:12} .cropbox{position:relative;width:min(72vw,280px);aspect-ratio:1;overflow:hidden;background:#000;border:3px solid var(--cyan);touch-action:none;cursor:grab;user-select:none} .cropbox:active{cursor:grabbing} .cropbox img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;pointer-events:none} .cropring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 200px rgba(7,4,26,.55);outline:2px dashed rgba(255,255,255,.7);outline-offset:-2px;pointer-events:none} .cropzoom{display:flex;align-items:center;gap:8px;width:min(72vw,280px)}.cropzoom input{flex:1;accent-color:var(--cyan)} .cropzoom .croprot{flex:none;width:42px!important;min-width:0;height:36px;margin:0!important;padding:0!important;font-size:18px;line-height:1;display:grid;place-items:center} .cropbox.wide{width:min(86vw,380px);aspect-ratio:3/1} .cropbox.wide .cropring{border-radius:0;box-shadow:none;clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,0 100%);outline:none;border:2px dashed rgba(255,255,255,.7)} .cropzoom.wide{width:min(86vw,380px)} .cropprev{display:grid;justify-items:center;gap:6px;width:min(86vw,380px);margin:4px auto 6px} .cropprev small{color:var(--muted);font-size:12px} .cropprev .pv-faces{display:flex;align-items:flex-end;gap:14px} #cropPrevBody{width:100%;display:grid;justify-items:center} .cropprev .cardprev{width:100%} .pv-roomname{display:flex;align-items:center;font-weight:700;font-size:15px} .cropbox:not(.wide) .cropring{border-radius:0;box-shadow:none;outline-offset:-6px} /* your picture shows as a square card, not a circle (the preview below shows the real look) */ .overlay{position:fixed;inset:0;z-index:10;background:rgba(7,4,26,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px} .sheet{width:min(100%,380px);background:var(--night);border:3px solid var(--cyan);box-shadow:8px 8px 0 var(--mag);padding:26px 22px;display:grid;gap:14px;justify-items:center;text-align:center;transform:rotate(-1.5deg)} .sheet h2{font-family:var(--tech);font-size:20px;color:var(--cyan)} .sheet .uname{font-family:var(--tech);font-size:18px;color:var(--mag)} /* ===== status ===== */ .mystatus{background:rgba(7,4,26,.6);border:2px dashed var(--cyan);color:var(--white);font-size:16px;font-weight:600;padding:7px 14px;margin:2px auto 4px;max-width:100%;overflow-wrap:anywhere;width:auto} .mystatus.empty{color:var(--muted);border-color:#3b2d80} .statusline{margin:-4px 0 6px;font-size:17px;font-weight:600;color:var(--white);background:rgba(7,4,26,.55);border-left:3px solid var(--cyan);padding:4px 10px;max-width:100%;overflow-wrap:anywhere} .contactrow .cstatus{color:var(--white);opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .stpresets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%;margin:4px 0 10px} .stpreset{background:var(--deep);border:2px solid #3b2d80;color:var(--white);font-size:14px;padding:6px 10px;width:auto;margin:0} .stpreset:active,.stpreset:hover{border-color:var(--cyan)} .stedit{display:flex;gap:8px;width:100%;align-items:stretch} .stedit .field{flex:1;min-width:0} .stemoji{flex:none;width:52px;font-size:24px;background:var(--deep);border:2px solid var(--cyan);padding:0;margin:0} .stemojis{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:4px;width:100%;margin-top:8px} .stemojis button{font-size:22px;background:var(--deep);border:2px solid #3b2d80;padding:4px 0;margin:0;width:auto} .sheet .email{color:var(--muted);font-size:15px;margin-top:-10px} .sheet .go{width:100%} .sheet .ghost{margin:0;width:100%;padding:10px;font-size:13px} .danger{background:none;border:2px solid var(--red);color:var(--red);width:100%;padding:10px;font-family:var(--tech);font-size:13px} .lightbox img{max-width:100%;max-height:90dvh;border:3px solid var(--cyan);box-shadow:8px 8px 0 var(--mag)} @media (prefers-reduced-motion:reduce){html:not(.motion-always) *{animation:none!important}} /* ===== v3 additions ===== */ .sheet{max-height:calc(100dvh - 40px);overflow-y:auto} .sheet .field{text-align:left;font-size:15px} .sheet .left{justify-self:stretch;text-align:left;width:100%} .sheet h3{font-family:var(--tech);font-size:13px;color:var(--cyan);justify-self:start;margin-top:4px} .sub{color:var(--muted);font-size:15px;margin-top:-6px} /* inbox */ .inbox{display:grid;gap:10px;margin-top:6px} .inbox h3{font-family:var(--tech);font-size:12px;color:var(--cyan);letter-spacing:.5px} .roomrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:rgba(7,4,26,.85);border:2px solid #3b2d80;color:var(--white);padding:10px 12px;clip-path:polygon(0 0,98% 0,100% 30%,100% 100%,2% 100%,0 70%)} .roomrow:hover{border-color:var(--cyan)} .roomrow .hash{flex:none;width:38px;height:38px;display:grid;place-items:center;font-family:var(--tech);font-weight:900;font-size:18px;color:var(--night);background:var(--cyan);clip-path:polygon(10% 0,100% 8%,90% 100%,0 92%)} .roomrow .info{flex:1;min-width:0} .roomrow .name{font-family:var(--tech);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .roomrow .preview{font-size:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .roomrow .when{flex:none;display:grid;justify-items:end;gap:4px;font-size:13px;color:var(--muted)} .badge{font-family:var(--tech);font-size:11px;background:var(--volt);color:var(--night);padding:1px 7px;min-width:22px;text-align:center} /* feed extras */ .daybreak{align-self:center;font-family:var(--tech);font-size:11px;color:var(--night);background:var(--cyan);padding:3px 12px;transform:rotate(-2deg);margin:6px 0;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)} .older{align-self:center;background:none;border:2px solid var(--cyan);color:var(--cyan);font-family:var(--tech);font-size:11px;padding:6px 12px} .bubble{cursor:pointer} .quote{display:block;border-left:3px solid var(--cyan);padding:2px 0 2px 8px;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border-top:none;border-right:none;border-bottom:none;text-align:left} .quote b{color:var(--cyan);font-family:var(--tech);font-size:11px;margin-right:6px} .me .quote{border-left-color:var(--volt)} #feed{overflow-x:hidden} /* safety net: the chat never scrolls sideways */ .bubble .quote{max-width:min(260px,calc(100vw - 150px))} /* small phones: keep long quotes inside the screen */ .msg.me .col > .bubble:has(> .punct.bang) .quote{max-width:min(260px,100%)} /* only in the width-capped "!" bubbles: shrink with the bubble (elsewhere a % max-width lets long quotes stretch the bubble off-screen) */ .reacts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 8px 0} .me .reacts{justify-content:flex-end} .react{font:inherit;font-size:15px;background:var(--night);color:var(--white);border:2px solid #3b2d80;padding:1px 8px;transform:rotate(-2deg);animation:pop .2s cubic-bezier(.2,1.6,.4,1) both} .react.mine{border-color:var(--volt)} .react span{font-family:var(--tech);font-size:11px;margin-left:4px} .react{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none} .rxtabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;width:100%} .rxtabs button{font:inherit;font-size:15px;background:var(--night);color:var(--white);border:2px solid #3b2d80;padding:3px 10px;cursor:pointer} .rxtabs button span{font-family:var(--tech);font-size:11px;margin-left:4px} .rxtabs button.on{border-color:var(--volt);background:#2a1f63} .rxlist{display:grid;gap:8px;width:100%;max-height:min(50vh,360px);overflow-y:auto;text-align:left} .rxrow{display:flex;align-items:center;gap:10px;padding:6px 8px;background:rgba(255,255,255,.04);border-left:3px solid var(--cyan)} .rxrow .face{width:34px;height:34px;font-size:15px} .rxrow .rxname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} .rxrow .rxemo{font-size:20px} .flash .bubble{animation:flash .9s ease} @keyframes flash{30%{filter:drop-shadow(0 0 14px var(--volt))}} /* composer reply chip */ .replying{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px;color:var(--muted);border-left:3px solid var(--volt);padding-left:8px} .replying span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .replying b{color:var(--volt);font-family:var(--tech);font-size:11px} .replying button{background:none;border:2px solid var(--muted);color:var(--muted);padding:2px 8px} /* message menu */ .emoji-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .emoji-row button{font-size:26px;width:50px;height:50px;background:var(--deep);border:2px solid #3b2d80;transform:rotate(-3deg)} .emoji-row button:nth-child(even){transform:rotate(3deg)} .emoji-row button.on{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag)} .menu-preview{font-size:16px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* members */ .members{display:grid;gap:8px;width:100%} .member{display:flex;align-items:center;gap:10px;text-align:left} .member .face{width:34px;height:34px;font-size:15px} .member .mname{flex:1;min-width:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .member .role{font-family:var(--tech);font-size:10px;color:var(--volt);margin-left:6px} .member button{background:none;border:2px solid var(--red);color:var(--red);font-family:var(--tech);font-size:10px;padding:4px 8px} .member button.unblock{border-color:var(--cyan);color:var(--cyan)} .linkbtn{background:none;border:none;color:var(--cyan);text-decoration:underline;text-underline-offset:3px;justify-self:start;font-size:16px;padding:0} .roomcard-row{display:flex;justify-content:space-between;align-items:center;gap:10px} .top .ghost{margin-left:0;padding:6px 8px} .top #roomBtn{margin-left:auto} @media (max-width:420px){.mini{display:none}} .typing{height:auto;padding:0 14px} .typing .pill{position:static;display:inline-flex;margin:0 0 8px} .emoji-row{gap:6px;flex-wrap:nowrap} .emoji-row button{font-size:22px;width:42px;height:42px;padding:0} .namerow{display:flex;gap:8px;width:100%} .namerow .field{flex:1;min-width:0} .namerow .send{padding:10px 14px} .roomrow .code{font-size:13px;color:var(--muted);margin-left:6px;font-family:var(--body)} /* ===== full-screen effects ===== */ #fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20} #fxText{position:fixed;inset:0;pointer-events:none;z-index:21;display:grid;place-items:center;overflow:hidden} .fx-banner{font-family:var(--num);font-size:clamp(64px,22vw,150px);line-height:.9;color:var(--white);background:var(--night);padding:6px 26px 0;border:5px solid var(--cyan);transform:rotate(-8deg) skewX(-8deg);text-shadow:-4px 0 var(--cyan),6px 6px var(--mag);box-shadow:10px 10px 0 var(--mag);clip-path:polygon(0 8%,100% 0,97% 100%,3% 92%);animation:slam 1.8s cubic-bezier(.2,1.4,.4,1) both;white-space:nowrap} @keyframes slam{0%{opacity:0;transform:rotate(-8deg) skewX(-8deg) scale(3)}14%{opacity:1;transform:rotate(-8deg) skewX(-8deg) scale(.92)}22%{transform:rotate(-8deg) skewX(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:rotate(-8deg) skewX(-8deg) scale(1.08) translateX(40px)}} .fx-stamp{position:absolute;font-family:var(--num);font-size:clamp(40px,14vw,90px);color:var(--volt);-webkit-text-stroke:2px var(--night);text-shadow:4px 4px 0 var(--night),6px 6px 0 var(--mag);animation:stamp 1.6s cubic-bezier(.2,1.8,.4,1) both} @keyframes stamp{0%{opacity:0;transform:rotate(var(--r)) scale(2.4)}18%{opacity:1;transform:rotate(var(--r)) scale(1)}75%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) scale(.9)}} .fx-shake{animation:fxshake .5s linear 2} @keyframes fxshake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,4px)}} .fx-list{justify-self:stretch;text-align:left;font-size:15px;color:var(--muted)} .proflist{justify-self:stretch;text-align:left;width:100%} .proflist summary{font-family:var(--tech);font-size:13px;color:var(--cyan);cursor:pointer;padding:10px 12px;background:rgba(0,0,0,.25);border:2px solid #3b2d80;list-style:none} .proflist summary::-webkit-details-marker{display:none} .proflist summary::after{content:"▸";float:right;transition:transform .15s} .proflist[open] summary::after{transform:rotate(90deg)} .proflist[open] summary{border-bottom-color:transparent} .proflist>div{border:2px solid #3b2d80;border-top:none;padding:12px} .fx-list summary{font-family:var(--tech);font-size:12px;color:var(--cyan);cursor:pointer} .fx-list ul{list-style:none;display:grid;gap:4px;margin-top:8px} .fx-list b{color:var(--white)} /* phone-width fix: long room previews must not stretch the layout */ html,body{overflow-x:hidden} .front,.front-inner,.card,.inbox,#inboxWrap{min-width:0;max-width:100%} .card,.inbox{grid-template-columns:minmax(0,1fr)} .roomrow{min-width:0;max-width:100%;overflow:hidden} .roomrow .info,.roomrow .name,.roomrow .preview{min-width:0} .whoami .who-text{min-width:0;overflow:hidden;text-overflow:ellipsis} /* ===== v7: media, stickers, polls, pins, mentions, themes, backgrounds ===== */ .clip{color:var(--mag)} .row{gap:6px} .row .clip{width:40px;height:46px} .row .clip svg{width:22px;height:22px} .clip[aria-expanded="true"]{background:var(--mag);color:var(--night)} @media (max-width:360px){.row .clip{width:36px}.send{padding:13px 10px}} /* pinned bar */ .pinbar{background:rgba(7,4,26,.85);border-bottom:2px solid var(--volt);backdrop-filter:blur(6px)} .pinmain{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--white);padding:8px 14px;text-align:left} .pinicon{flex:none} .pintext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px} .pintext b{font-family:var(--tech);font-size:11px;color:var(--volt);margin-right:6px} .pinbar{display:flex;align-items:stretch;position:relative;z-index:6}.pinbar .pinmain{flex:1;min-width:0} .pincount{flex:none;font-family:var(--tech);font-size:11px;color:var(--cyan);background:rgba(39,231,255,.08);border:none;border-left:2px solid rgba(39,231,255,.35);padding:0 12px;min-width:56px} .pincount[aria-expanded="true"]{background:var(--cyan);color:#07041a} .pinmenu{position:absolute;left:8px;right:8px;top:100%;margin-top:4px;background:#0d0826;border:2px solid var(--cyan);box-shadow:4px 4px 0 var(--mag);max-height:min(50vh,380px);overflow-y:auto;padding:4px} .pinitem{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.08);color:var(--white);padding:10px;text-align:left;font-size:15px} .pinitem:last-child{border-bottom:none}.pinitem .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pinitem b{font-family:var(--tech);font-size:11px;color:var(--volt);margin-right:6px} .pinitem.myturn{background:rgba(243,255,58,.1)}.pinitem.myturn .pt{color:var(--volt)}.pinitem.cur{outline:1px dashed rgba(39,231,255,.5)} /* media */ .pdfcard{display:flex;align-items:center;gap:10px;max-width:min(62vw,260px);margin:2px 0 6px;padding:10px 12px;background:var(--night);border:3px solid var(--cyan);color:var(--white);text-decoration:none;text-align:left} .pdfcard:hover,.pdfcard:focus-visible{border-color:var(--volt)} .bubble a.pdfcard,.bubble a.pdfcard *{text-decoration:none} .bubble a.pdfcard .pdf-name{color:var(--white)} .bubble a.pdfcard .pdf-sub{color:var(--cyan)} .pdfcard .pdf-ico{flex:none;font-family:var(--tech);font-size:11px;font-weight:900;color:var(--night);background:#ff5a5a;padding:10px 6px;transform:skewX(-8deg)} .pdfcard .pdf-txt{min-width:0;display:flex;flex-direction:column;gap:2px} .pdfcard .pdf-name{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pdfcard .pdf-sub{font-family:var(--tech);font-size:11px;color:var(--cyan)} .vid{display:block;max-width:min(62vw,260px);max-height:340px;border:3px solid var(--cyan);background:#000;margin:2px 0 6px} .vidsave{display:inline-flex;align-items:center;gap:4px;margin:0 0 6px;padding:5px 10px;min-height:32px;background:var(--night);border:2px solid var(--cyan);color:var(--white);font:700 13px var(--body);letter-spacing:.5px;cursor:pointer} .vidsave:active{background:var(--cyan);color:var(--night)} .voice{display:flex;align-items:center;gap:10px;min-width:190px;max-width:240px;padding:2px 0} .voice .play{flex:none;width:38px;height:38px;border:none;background:var(--cyan);color:var(--night);display:grid;place-items:center;clip-path:polygon(8% 0,100% 10%,92% 100%,0 90%)} .voice .play svg{width:18px;height:18px} .voice .wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;cursor:pointer} .voice .wave i{flex:1;background:currentColor;opacity:.35;border-radius:1px;min-width:2px} .voice .wave i.on{opacity:1;background:var(--volt)} .voice .dur{flex:none;font-family:var(--tech);font-size:11px;opacity:.8} .pending video{width:56px;height:56px;object-fit:cover;border:2px solid var(--mag)} /* recording */ .recbar{display:flex;align-items:center;gap:10px;min-height:46px} .recdot{width:14px;height:14px;background:var(--red);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:recpulse 1s infinite} @keyframes recpulse{50%{opacity:.3;transform:scale(.8)}} .rectime{font-family:var(--tech);font-size:16px;color:var(--white);min-width:44px} .reclabel{flex:1;color:var(--muted);font-size:15px} .recbar .ghost{margin:0;padding:10px} /* tray + stickers */ .tray{margin-bottom:8px;border:2px solid #3b2d80;background:rgba(20,10,58,.95);padding:8px} .tray-tabs{display:flex;gap:6px;margin-bottom:8px} .tray-tabs .ghost{margin:0;flex:1;padding:8px} .tray-tabs .ghost[aria-pressed="true"]{background:var(--cyan);color:var(--night)} .tray-tabs{flex-wrap:wrap} .tray-tabs .ghost{min-width:0} /* ===== e-cards ===== */ .blposterpick{display:flex;align-items:center;gap:10px;margin:8px 0} .blposterpick .blbtn{width:auto;margin:0} .blposterprev img{height:72px;width:auto;max-width:60px;object-fit:cover;border:2px solid var(--cyan);display:block} .ecard{position:relative;background:var(--night);border:3px solid var(--ec);box-shadow:5px 5px 0 var(--ec);padding:16px 18px 12px;text-align:center;min-width:min(220px,62vw);max-width:300px;color:var(--white)} .ecard .ec-emoji{font-size:56px;line-height:1.1} .ecard .ec-title{font-family:var(--tech);font-weight:900;font-size:22px;color:var(--ec);margin-top:4px;text-shadow:2px 2px 0 #07041A} .ecard .ec-msg{margin-top:8px;font-size:17px;font-weight:600;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere} .ecard .ec-from{margin-top:10px;font-size:13px;color:var(--muted);font-style:italic} .ecard.revealed{animation:ecpop .45s cubic-bezier(.2,1.4,.4,1)} @keyframes ecpop{from{transform:scale(.7) rotate(-4deg);opacity:0}} .ecard.closed{cursor:pointer;padding-top:14px} .ec-env{position:relative;width:150px;height:96px;margin:0 auto 10px;background:color-mix(in srgb,var(--ec) 35%,#1a1440);border:3px solid var(--ec);perspective:400px} .ec-flap{position:absolute;left:-3px;right:-3px;top:-3px;height:62%;background:var(--ec);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .6s ease} .ec-seal{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#07041A;border:3px solid var(--ec);display:grid;place-items:center;font-size:24px;z-index:1} .ec-tap{font-family:var(--tech);font-weight:900;font-size:15px;color:var(--ec)} .ec-hint{font-size:13px;color:var(--muted);margin-top:2px;animation:echint 1.6s ease-in-out infinite} @keyframes echint{50%{opacity:.45}} .ecard.opening .ec-flap{transform:rotateX(180deg)} .ecard.opening .ec-seal{animation:ecseal .6s ease forwards} .ecard.opening .ec-env{animation:ecshake .6s ease} @keyframes ecseal{to{transform:translate(-50%,-140%) scale(.4);opacity:0}} @keyframes ecshake{20%{transform:rotate(-3deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}} .ecpicks{width:100%;align-self:stretch;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:6px 0 12px} .ecpick{background:var(--deep);border:2px solid #3b2d80;padding:8px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--white);min-width:0} .ecpick[aria-checked="true"]{border-color:var(--ec);box-shadow:3px 3px 0 var(--ec)} .ecp-emoji{font-size:28px;line-height:1} .ecp-name{font-family:var(--tech);font-size:10.5px;line-height:1.2;text-align:center;overflow-wrap:anywhere} .ecpreview{width:100%;align-self:stretch;display:flex;justify-content:center;padding:6px 0 14px} #ecMsg{width:100%;align-self:stretch;resize:vertical;min-height:70px} @media (prefers-reduced-motion:reduce){html:not(.motion-always) .ecard.revealed,html:not(.motion-always) .ec-hint{animation:none}} .stickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:200px;overflow-y:auto} .stickers button{background:none;border:2px solid transparent;padding:2px;aspect-ratio:1} .stickers button:hover,.stickers button:focus-visible{border-color:var(--volt)} .stk{display:block;width:100%;height:100%} .stk svg{width:100%;height:100%;display:block;overflow:visible} .msg.sticker-msg .bubble{padding:0;filter:none} .msg.sticker-msg .bubble::before{display:none} .msg.sticker-msg .stk{width:120px;height:120px;animation:stickerpop .35s cubic-bezier(.2,1.8,.4,1) both} @keyframes stickerpop{from{transform:scale(.3) rotate(-20deg);opacity:0}} /* polls */ .poll{min-width:210px;max-width:260px} .poll h4{font-family:var(--tech);font-size:14px;margin-bottom:8px;line-height:1.3} .poll h4::before{content:"📊 "} .popt{position:relative;display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:rgba(7,4,26,.6);color:var(--white);border:2px solid #3b2d80;padding:8px 10px;margin-bottom:6px;overflow:hidden;font-size:16px;font-weight:600} .popt .fill{position:absolute;inset:0 auto 0 0;background:var(--cyan);opacity:.22;transition:width .35s ease} .popt.mine{border-color:var(--volt)} .popt.mine .fill{background:var(--volt);opacity:.28} .popt span{position:relative} .popt .n{font-family:var(--tech);font-size:11px;flex:none} .pollfoot{font-family:var(--tech);font-size:10px;opacity:.75} .pollopts{display:grid;gap:8px;width:100%} .pollopts .optrow{display:flex;gap:6px} .pollopts .optrow .field{flex:1;min-width:0} .pollopts .optrow button{background:none;border:2px solid var(--muted);color:var(--muted);padding:0 10px} .check{display:flex;gap:10px;align-items:center;font-size:16px;color:var(--white)} .check input{width:20px;height:20px;accent-color:var(--cyan)} .card label.agree{font-family:var(--body);font-size:16px;color:var(--white);letter-spacing:0;align-items:flex-start;line-height:1.35;cursor:pointer} .card label.agree input{flex:none;margin-top:1px} .card label.agree a,.legallinks a{color:var(--cyan)} .legallinks{font-size:14px;color:var(--muted);text-align:center;margin:0} .aboutlink{margin:0;text-align:center;font-size:15px}.aboutlink a{color:var(--cyan);font-weight:700} .site-footer{display:grid;gap:5px;justify-items:center;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted);border-top:1px solid rgba(0,240,255,.22);padding-top:10px;margin-top:2px;width:100%} .site-footer .footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px} .site-footer a{color:var(--cyan)} .about{border:2px solid var(--cyan);padding:10px 14px;background:rgba(7,4,26,.6);text-align:left} .about summary{font-family:var(--body);font-size:14px;color:var(--white);cursor:pointer} .about[open] summary{margin-bottom:8px} .about p{font-size:15px;color:var(--cyan);margin:6px 0} .about ul{padding-left:20px;margin:6px 0} .about li{font-size:15px;color:var(--volt);margin:4px 0} body.desktop #authCard label.agree::before{content:none} /* mentions */ .mention{font-weight:700;color:var(--volt);background:rgba(243,255,58,.12);padding:0 3px} .me .mention{color:inherit;background:rgba(0,0,0,.25)} .msg.mentioned .bubble{filter:drop-shadow(3px 3px 0 var(--volt)) drop-shadow(0 0 10px rgba(243,255,58,.45))} .mentions{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .mentions button{display:flex;align-items:center;gap:6px;background:var(--deep);border:2px solid var(--cyan);color:var(--white);padding:4px 10px 4px 4px;font-size:16px} .mentions .face{width:26px;height:26px;font-size:12px} /* custom bubble colors */ .msg.custom .bubble::before{background:var(--bub)!important} .msg.custom .bubble{color:var(--bubtext)} .msg.custom .bubble a{color:inherit} .msg.custom .quote{color:inherit;opacity:.85} /* themes sheet */ .presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%} .preset{background:var(--deep);border:2px solid #3b2d80;color:var(--white);padding:8px 4px;display:grid;justify-items:center;gap:6px;font-family:var(--tech);font-size:10px} .preset[aria-pressed="true"]{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag)} .preset .dots{display:flex;gap:4px} .preset .dots i{width:16px;height:16px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .colorrow{display:flex;gap:10px;width:100%;justify-content:space-between} .colorpick{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--muted)} .colorpick.left{flex-direction:row;justify-self:start;gap:10px} .colorpick input{width:52px;height:38px;border:2px solid #3b2d80;background:none;padding:2px;cursor:pointer} .swatches{display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:center} .swatches button{width:38px;height:38px;border:2px solid #3b2d80;transform:rotate(-4deg)} .swatches button:nth-child(even){transform:rotate(4deg)} .swatches button[aria-pressed="true"]{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag)} .swatches .reset{background:repeating-linear-gradient(45deg,#2A1B4A 0 6px,#07041A 6px 12px)} .theme-preview{width:100%;display:flex;justify-content:flex-end;padding:8px 0} .theme-preview .msg{max-width:100%} /* room backgrounds */ .bgtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%} .bgtile{height:56px;border:2px solid #3b2d80;font-family:var(--tech);font-size:9px;color:var(--white);display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;text-shadow:0 1px 2px #000} .bgtile[aria-pressed="true"]{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag)} /* ===== bond styles ===== */ .bondbox{margin-top:14px;padding-top:6px;border-top:2px dashed #3b2d80} .bondsub{margin:10px 0 4px;font-family:var(--tech);font-size:12px;letter-spacing:1px;color:var(--cyan);text-transform:uppercase} .bondtile{font-size:11px} .bondtile.locked{opacity:.55;filter:grayscale(.6);cursor:not-allowed} .bondtile[data-bond="none"]{background:#07041A} .bondtile[data-bond="campfire"]{background:radial-gradient(ellipse at 50% 110%,#ff8a2a,transparent 60%),linear-gradient(180deg,#120608,#3a1206)} .bondtile[data-bond="twinstars"]{background:radial-gradient(circle at 32% 45%,#fff 0 2px,#00F0FF 3px,transparent 12px),radial-gradient(circle at 68% 55%,#fff 0 2px,#E07AC6 3px,transparent 12px),linear-gradient(180deg,#040b2a,#140d3d)} .bondtile[data-bond="constellation"]{background:radial-gradient(circle at 50% 40%,rgba(243,255,58,.35),transparent 40%),linear-gradient(180deg,#0a0420,#2a0c46)} .bondtile[data-bond="synced"]{background:linear-gradient(120deg,#0b3a5a 0 50%,#3a1a6a 50%)} .bondtile[data-bond="heartline"]{background:linear-gradient(135deg,#4a0f2e,#a0235c)} /* bond backgrounds */ #chat[data-bg="bond-campfire"]::before{background:linear-gradient(180deg,#0e0507,#240b08 55%,#3d1405)} #chat[data-bg="bond-campfire"]::after{background-image:radial-gradient(circle,#ffb347 0 1.5px,rgba(255,140,40,.35) 3px,transparent 6px),radial-gradient(circle,#ff6a2a 0 1px,rgba(255,90,40,.3) 2.5px,transparent 5px);background-size:140px 220px,190px 260px;animation:bondembers 9s linear infinite} #chat[data-bg="bond-campfire"]>.bgfx::before{top:auto;height:45%;background:radial-gradient(ellipse at 50% 100%,rgba(255,150,50,.55),rgba(255,80,30,.18) 45%,transparent 70%);animation:bondflicker 2.4s ease-in-out infinite alternate} @keyframes bondembers{to{background-position:20px -440px,-30px -520px}} @keyframes bondflicker{0%{opacity:.75}40%{opacity:1}70%{opacity:.85}100%{opacity:1}} #chat[data-bg="bond-twinstars"]::before{background:linear-gradient(180deg,#030820,#0d0b33 60%,#1a0d3f)} #chat[data-bg="bond-twinstars"]::after{background:var(--nightsky) center/cover;opacity:.9;animation:nsBreathe 6s ease-in-out infinite} #chat[data-bg="bond-twinstars"]>.bgfx::before{inset:auto;left:50%;top:40%;width:min(80vw,380px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle at 22% 50%,#fff 0 5px,rgba(0,240,255,.7) 8px,rgba(0,240,255,.15) 26px,transparent 46px),radial-gradient(circle at 78% 50%,#fff 0 5px,rgba(224,122,198,.75) 8px,rgba(224,122,198,.15) 26px,transparent 46px);animation:bondorbit 22s linear infinite} @keyframes bondorbit{to{transform:translate(-50%,-50%) rotate(360deg)}} #chat[data-bg="bond-constellation"]::before{background:linear-gradient(180deg,#07031a,#1a0838 55%,#2a0c46)} #chat[data-bg="bond-constellation"]::after{background:var(--nightsky) center/cover;opacity:.85;animation:nsBreathe 7s ease-in-out infinite} #chat[data-bg="bond-constellation"]>.bgfx::before{inset:auto;left:50%;top:38%;width:min(78vw,360px);aspect-ratio:1;transform:translate(-50%,-50%);background:url("data:image/svg+xml;utf8,") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(243,255,58,.6));animation:bondpulse 4s ease-in-out infinite} @keyframes bondpulse{50%{opacity:.6;filter:drop-shadow(0 0 12px rgba(224,122,198,.8))}} /* bond bubbles: both people's bubbles match in this DM */ #chat[data-bubbles="synced"] .msg .bubble::before{background:linear-gradient(120deg,#0b3a5a,#2c1a66)!important;box-shadow:inset 0 0 0 2px var(--cyan)!important} #chat[data-bubbles="synced"] .msg.me .bubble::before{background:linear-gradient(120deg,#2c1a66,#0b3a5a)!important;box-shadow:inset 0 0 0 2px var(--mag)!important} #chat[data-bubbles="synced"] .msg .bubble,#chat[data-bubbles="heartline"] .msg .bubble{color:#F4F7FF!important} #chat[data-bubbles="heartline"] .msg .bubble::before{background:linear-gradient(135deg,#3d0c27,#7a1747)!important;box-shadow:inset 0 0 0 2px #ff6fae!important} #chat[data-bubbles="heartline"] .msg .bubble{filter:drop-shadow(3px 3px 0 rgba(255,60,140,.55)) drop-shadow(0 0 8px rgba(255,111,174,.45))} @media (prefers-reduced-motion:reduce){html:not(.motion-always) #chat>.bgfx::before{animation:none!important}} #chat{isolation:isolate} #chat::before,#chat::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} #chat[data-bg="grid"]::before,.bgtile[data-bg="grid"]{background:linear-gradient(180deg,#07041A 0%,#170a3a 55%,#35105a 100%)} #chat[data-bg="grid"]::after{top:55%;background: repeating-linear-gradient(90deg,rgba(0,240,255,.35) 0 2px,transparent 2px 48px), repeating-linear-gradient(0deg,rgba(198,90,174,.45) 0 2px,transparent 2px 36px); transform:perspective(260px) rotateX(58deg);transform-origin:top;animation:gridmove 3s linear infinite; -webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%)} @keyframes gridmove{to{background-position:0 0,0 36px}} #chat[data-bg="rain"]::before,.bgtile[data-bg="rain"]{background:linear-gradient(180deg,#040a1c,#0b1d3a 70%,#10284a)} #chat[data-bg="rain"]::after{background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(0,240,255,.18) 22px 23px,transparent 23px 60px);background-size:120px 120px;animation:rainfall .7s linear infinite} @keyframes rainfall{to{background-position:-24px 120px}} #chat[data-bg="sunset"]::before,.bgtile[data-bg="sunset"]{background:linear-gradient(180deg,#1b0633 0%,#5a1460 45%,#c0396f 75%,#ff8a3d 100%)} #chat[data-bg="sunset"]::after{inset:auto 0 12% 0;margin:auto;width:240px;height:240px;border-radius:50%;background:linear-gradient(180deg,#F3FF3A,#FF3D8B); -webkit-mask:repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 26px);mask:repeating-linear-gradient(180deg,#000 0 18px,transparent 18px 26px);opacity:.55} #chat[data-bg="aurora"]::before,.bgtile[data-bg="aurora"]{background:linear-gradient(120deg,#051a2a,#0b3a3a,#2a1060,#07041A);background-size:300% 300%} #chat[data-bg="aurora"]::before{animation:aurora 14s ease-in-out infinite} @keyframes aurora{50%{background-position:100% 50%}} #chat[data-bg="void"]::before,.bgtile[data-bg="void"]{background:#000} #chat[data-bg="stars"]::before,@keyframes nsBreathe{0%,100%{opacity:.95}50%{opacity:.7}} .bgtile[data-bg="stars"]{background:none} .bgtile[data-bg="stars"]{background:var(--nightsky) center/cover,linear-gradient(#050A1E,#0B1638)} #chat[data-bg="custom"]::before{background:linear-gradient(180deg,var(--roombg),#07041A 85%)} @media (prefers-reduced-motion:reduce){html:not(.motion-always) #chat::before,html:not(.motion-always) #chat::after{animation:none!important}} /* sheet fit fixes at narrow widths */ .sheet{min-width:0} .sheet > *{max-width:100%;min-width:0} .bgtiles{grid-template-columns:repeat(3,minmax(0,1fr))} .members{min-width:0} .member{flex-wrap:wrap;row-gap:6px;min-width:0} .member .mname{flex:1 1 120px;min-width:0;white-space:normal;overflow-wrap:anywhere} .member button{padding:4px 7px;font-size:10px;flex:none} .member .face + .mname + button{margin-left:auto} #pinList .member .mname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .member button + button{margin-left:auto} /* keyboard-safe chat: sized to the visible part of the screen */ #chat{position:fixed;left:0;right:0;margin:0 auto;top:var(--app-top,0px);height:var(--app-h,100dvh);width:100%} #chat .feed{overscroll-behavior:contain} html,body{overscroll-behavior:none} /* swipe to reply */ .msg{position:relative} .msg .col{will-change:transform} .swipe-hint{position:absolute;left:4px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--muted);opacity:0;pointer-events:none;transition:color .15s,transform .15s} .swipe-hint.ready{color:var(--volt);transform:translateY(-50%) scale(1.25)} .msg.me .swipe-hint{left:auto;right:auto;left:4px} /* ===== v9: contacts, DMs, notifications ===== */ .fronttabs{display:flex;gap:8px;margin-top:10px} .fronttabs .tab{flex:1} .addcontact{display:flex;gap:8px} .addcontact .field{flex:1;min-width:0} .addcontact .send{padding:10px 14px} .roomrow .face{flex:none;width:38px;height:38px;font-size:17px} .contactrow{display:flex;align-items:center;gap:10px;background:rgba(7,4,26,.85);border:2px solid #3b2d80;padding:8px 10px;min-width:0} .contactrow .cname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px} .contactrow .cname small{display:block;font-size:13px;color:var(--muted)} .contactrow .send{padding:8px 12px;font-size:12px} .friendfind{width:100%;margin:0 0 8px} .chattools{display:flex;gap:8px;align-items:center;margin:0 0 8px;width:100%}.chattools .field{flex:1;min-width:0;margin:0}.chattools.nosearch .field{display:none}.chattools.nosearch{justify-content:flex-end} .rowwrap{display:flex;align-items:stretch;gap:4px;width:100%} .rowwrap .roomrow{flex:1;min-width:0} .pinbtn{flex:none;width:40px;background:none;border:2px solid #3b2d80;color:var(--volt);font-size:18px} .chatfilter{display:flex;flex:none;border:2px solid #3b2d80}.chatfilter .cf{background:none;border:none;color:var(--muted);font-family:var(--tech);font-size:10px;padding:8px 10px;letter-spacing:.5px}.chatfilter .cf.on{background:var(--cyan);color:#07041a} .inbox details.quiet{width:100%}.inbox details.quiet>summary{list-style:none;cursor:pointer;font-family:var(--tech);font-size:11px;color:var(--muted);padding:10px 4px 6px;letter-spacing:.5px}.inbox details.quiet>summary::-webkit-details-marker{display:none}.inbox details.quiet>summary::after{content:" ▾"}.inbox details.quiet[open]>summary::after{content:" ▴"}.inbox details.quiet .roomrow{opacity:.75} .inbox .inote{font-size:14px;color:var(--muted);text-align:center;padding:14px 4px;width:100%} .friendfind .field{width:100%;margin:0} .fsec{font-family:var(--tech);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin:10px 0 2px;text-align:left;list-style:none;cursor:default} .fsec:first-child{margin-top:0} details.fgroup{display:contents} details.fgroup > summary.fsec{cursor:pointer} details.fgroup > summary.fsec::-webkit-details-marker{display:none} details.fgroup > summary.fsec::after{content:" ▸"} details.fgroup[open] > summary.fsec::after{content:" ▾"} .contactrow .fav{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:4px 2px;cursor:pointer;flex:none} .contactrow .fav.on{color:var(--volt);text-shadow:0 0 6px var(--volt)} .contactrow.offline .cname{opacity:.75} .fnone{color:var(--muted);font-size:14px;padding:6px 2px;text-align:left} .contactrow .rm{background:none;border:2px solid var(--muted);color:var(--muted);padding:6px 8px;font-size:12px} .roomrow .muted{font-size:12px;margin-left:4px;opacity:.8} .segmented{display:flex;width:100%;border:2px solid var(--cyan)} .segmented button{flex:1;background:none;border:none;color:var(--cyan);font-family:var(--tech);font-size:11px;padding:9px 4px} .segmented button[aria-checked="true"]{background:var(--cyan);color:var(--night)} #roomOnly{display:grid;gap:14px;width:100%;justify-items:center} .toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + 8px);z-index:30;display:grid;gap:8px;justify-items:center;pointer-events:none;padding:0 10px} .toast{pointer-events:auto;display:flex;align-items:center;gap:10px;width:min(100%,480px);background:var(--night);border:2px solid var(--cyan);box-shadow:5px 5px 0 var(--mag);padding:8px 12px;color:var(--white);text-align:left;transform:rotate(-1deg);animation:toastin .3s cubic-bezier(.2,1.5,.4,1) both} .toast.mention{border-color:var(--volt)} .toast .face{flex:none;width:36px;height:36px;font-size:16px} .toast .tbody{flex:1;min-width:0} .toast .ttitle{font-family:var(--tech);font-size:11px;color:var(--cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .toast.mention .ttitle{color:var(--volt)} .toast .ttext{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .toast.out{animation:toastout .25s ease forwards} @keyframes toastin{from{opacity:0;transform:translateY(-30px) rotate(-4deg)}} @keyframes toastout{to{opacity:0;transform:translateY(-30px)}} /* ===== birthdays: faces keep their cutout shape on an inner layer so a cake can sit on top ===== */ .face{background:none!important;clip-path:none!important;overflow:visible!important;position:relative} .face .fi{position:absolute;inset:0;display:grid;place-items:center;background:var(--c,var(--cyan));clip-path:polygon(10% 0,100% 8%,90% 100%,0 92%);overflow:hidden} .face .fi img{width:100%;height:100%;object-fit:cover;display:block} .receipt .mini-faces .face{position:relative!important} .cake{position:absolute;right:-.6em;top:-.75em;font-size:max(17px,.78em);line-height:1;font-family:system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-weight:400;filter:drop-shadow(0 2px 0 var(--night)) drop-shadow(0 0 6px rgba(243,255,58,.6));transform:rotate(12deg);animation:cakebob 2.4s ease-in-out infinite;pointer-events:none;z-index:2} @keyframes cakebob{50%{transform:rotate(-6deg) translateY(-2px) scale(1.08)}} .face.bday .fi{box-shadow:inset 0 0 0 3px var(--volt)} .mini-faces .cake,.face.sm .cake{font-size:15px;right:-8px;top:-10px} .receipt .mini-faces .cake{display:none} .bdayrow{display:flex;gap:8px;width:100%} .bdayrow select{flex:1;min-width:0;padding:10px 8px;font-size:15px;appearance:auto;color:var(--white);background:var(--deep)} .bdayrow .send{padding:10px 12px} @media (prefers-reduced-motion:reduce){html:not(.motion-always) .cake{animation:none}} /* ===== install helper ===== */ .installbar{display:flex;align-items:center;gap:8px;background:var(--night);border:2px solid var(--volt);box-shadow:4px 4px 0 var(--mag);padding:8px 10px;font-size:15px;color:var(--white);transform:rotate(-1deg)} .installbar span{flex:1;min-width:0} .installbar .send{padding:8px 12px;font-size:12px} .installbar .ib-x{background:none;border:none;color:var(--muted);font-size:18px;padding:4px} .installlink{justify-self:center;margin-top:2px} /* 📲 "Get the app" on the sign-in screen: a real button to nightlane.chat/download */ .getapp{display:flex;align-items:center;gap:12px;justify-self:stretch;margin-top:6px;padding:10px 14px;text-decoration:none;color:var(--white);border:2px solid var(--cyan);background:rgba(0,240,255,.08);box-shadow:3px 3px 0 var(--mag);text-align:left} .getapp.hidden{display:none} .getapp:hover,.getapp:focus-visible{background:rgba(0,240,255,.16);color:var(--white)} .getapp .ga-ico{font-size:24px;line-height:1} .getapp b{display:block;font-family:var(--num);font-size:18px;letter-spacing:1px;color:var(--cyan)} .getapp small{display:block;font-size:13px;color:var(--muted)} .installfull{display:block;margin:4px 0 2px;text-align:left} .steps{list-style:none;counter-reset:s;display:grid;gap:10px;width:100%;text-align:left} .steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;font-size:17px;line-height:1.3} .steps li::before{content:counter(s);flex:none;width:26px;height:26px;display:grid;place-items:center;font-family:var(--tech);font-size:12px;color:var(--night);background:var(--cyan);clip-path:polygon(10% 0,100% 8%,90% 100%,0 92%)} .steps .ico{display:inline-grid;place-items:center;width:22px;height:22px;vertical-align:-5px;border:1.5px solid var(--cyan);color:var(--cyan);margin:0 2px} .steps .ico svg{width:14px;height:14px} .steps b{color:var(--volt)} .copyrow{display:flex;gap:8px;width:100%} .copyrow .field{flex:1;min-width:0;font-size:14px} .copyrow .send{padding:10px 14px} .steps li > span{flex:1;min-width:0;overflow-wrap:anywhere} /* 🛣️ "Rooms vs Lanes" explainer at the top of the Lanes tab */ .lanehow{border:2px solid #3b2d80;background:rgba(0,0,0,.25);margin:10px 0;padding:0 12px;text-align:left;font-size:15px} .lanehow summary{cursor:pointer;padding:10px 0;font-weight:700;color:var(--cyan);list-style:none} .lanehow summary::-webkit-details-marker{display:none} .chimehow p{margin:0 0 10px;color:var(--muted,#b9b3e0)} .sheet .chimehow .chimesave,.chimehow .chimesave{display:block;text-align:center;text-decoration:none;margin:0 0 12px;padding:10px 12px;border:2px solid var(--cyan);color:var(--cyan);background:rgba(0,240,255,.08);font-family:var(--tech);font-weight:700;font-size:15px;line-height:1.2} .chimehow .chimesave:active{background:rgba(0,240,255,.2)} .chimehow ol{margin:0 0 10px;padding-left:22px} .chimehow li{margin:0 0 8px;line-height:1.4} .chimehow small{opacity:.8} .lanehow summary::before{content:"▸ ";color:var(--volt)}.lanehow[open] summary::before{content:"▾ "} .lanehow-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-bottom:8px} .lanehow-cmp div{border:2px solid #3b2d80;padding:8px 10px;background:rgba(7,4,26,.6);display:grid;gap:2px} .lanehow-cmp div>b{font-family:var(--num);font-size:17px;letter-spacing:.5px;color:var(--white)} .lanehow-cmp span{color:var(--muted)} .lanehow ul{margin:0 0 12px;padding-left:18px;display:grid;gap:6px;color:var(--muted)} .lanehow b{color:var(--white)} /* 📡 slow start note (bad signal while NightLane is signing you in) */ .slowstart{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1001;width:min(92vw,440px);display:flex;align-items:center;gap:12px;padding:12px 14px;background:#120a33;border:2px solid var(--cyan);box-shadow:4px 4px 0 var(--mag);text-align:left} .slowstart .ss-text{display:grid;gap:2px;flex:1;min-width:0}.slowstart b{color:var(--cyan)}.slowstart small{color:var(--muted);font-size:13px} .slowstart .ss-again{flex:none;padding:10px 14px;font-size:15px}