/* sheets become slanted cutout panels with a halftone backdrop */
.overlay{background:rgba(7,4,26,.7);backdrop-filter:blur(3px) saturate(1.2)}
.overlay::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.14) 1.2px,transparent 1.6px) 0 0/10px 10px,
  linear-gradient(115deg,transparent 0 55%,var(--mag) 55% 58%,transparent 58% 62%,var(--cyan) 62% 63%,transparent 63%);
  -webkit-mask:linear-gradient(160deg,#000 20%,transparent 75%);mask:linear-gradient(160deg,#000 20%,transparent 75%);opacity:.5}
.overlay::after{content:"";position:absolute;right:-12vw;bottom:-6vh;width:70vw;height:38vh;pointer-events:none;
  background:repeating-linear-gradient(-30deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px)}
.sheet{position:relative;transform:rotate(-2deg);border:none;box-shadow:none;background:transparent;padding:0;gap:0;max-height:none;overflow:visible}
.sheet::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--mag);clip-path:polygon(2% 3%,100% 0,98% 96%,0 100%);transform:translate(10px,10px)}
.sheet::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--night);clip-path:polygon(0 4%,98% 0,100% 97%,2% 100%);box-shadow:inset 0 0 0 4px var(--cyan)}
.sheet > *{position:relative}
.sheetbody{display:grid;gap:14px;justify-items:center;text-align:center;padding:30px 24px 26px;max-height:calc(100dvh - 40px);overflow-y:auto;overflow-x:hidden;width:100%}
/* big cutout titles */
.sheet h2{font-family:var(--num);font-size:clamp(34px,10vw,52px);line-height:.95;letter-spacing:1px;text-transform:uppercase;color:var(--night);background:var(--white);padding:2px 14px 0;transform:rotate(-4deg) skewX(-6deg);box-shadow:6px 6px 0 var(--mag);clip-path:polygon(0 6%,100% 0,97% 100%,3% 94%);justify-self:start;margin:-8px 0 4px -6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet h3{font-family:var(--num);font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--volt);transform:skewX(-8deg);justify-self:start;margin-top:8px;text-shadow:3px 3px 0 var(--night),4px 4px 0 var(--mag)}
/* command-list buttons: slanted, staggered, huge type */
.sheet .go,.sheet .ghost,.sheet .danger{font-family:var(--num);font-size:24px;letter-spacing:1px;text-transform:uppercase;text-align:left;padding:8px 22px 6px;width:100%;clip-path:polygon(0 10%,100% 0,98% 90%,2% 100%);transform:skewX(-8deg);transition:transform .12s,background .12s,color .12s}
.sheet .go{background:var(--white);color:var(--night);box-shadow:5px 5px 0 var(--mag)}
.sheet .ghost{background:transparent;border:none;color:var(--white);text-shadow:3px 3px 0 var(--night),4px 4px 0 var(--mag)}
.sheet .ghost:hover,.sheet .ghost:focus-visible{background:var(--cyan);color:var(--night);text-shadow:none;transform:skewX(-8deg) translateX(8px)}
.sheet .danger{background:transparent;border:none;color:var(--volt);text-shadow:3px 3px 0 var(--night),4px 4px 0 var(--red)}
.sheet .danger:hover,.sheet .danger:focus-visible{background:var(--red);color:var(--volt);text-shadow:2px 2px 0 var(--night)}   /* follows your Highlight color, red shadow still says "careful" */
#deleteAccount{color:var(--volt);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
.sheet .go:active,.sheet .ghost:active,.sheet .danger:active{transform:skewX(-8deg) scale(.97)}
.sheet .go:nth-of-type(odd),.sheet .ghost:nth-of-type(even){margin-left:14px}
.sheet .linkbtn{font-family:var(--tech);text-transform:uppercase;font-size:12px}
/* message menu = COMMAND */
#msgMenu .sheet h2{display:none}
#msgMenu .menu-preview{font-family:var(--body);font-size:15px;color:var(--muted);border-left:3px solid var(--volt);padding-left:8px;text-align:left;justify-self:start;max-width:100%}
#msgMenu .sheetbody::before{content:"COMMAND";font-family:var(--num);font-size:clamp(56px,20vw,96px);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.25);position:absolute;right:-10px;top:-14px;transform:rotate(-8deg);pointer-events:none;letter-spacing:2px}
.emoji-row{justify-self:stretch;justify-content:flex-start}
.emoji-row button{clip-path:polygon(8% 0,100% 8%,92% 100%,0 92%);border:none;background:var(--deep);transform:rotate(-6deg)}
.emoji-row button:nth-child(even){transform:rotate(6deg)}
/* player / member rows and chips keep body font */
.member,.contactrow,.taskrow,.sx-chip,.member .mname,.roomrow{font-family:var(--body)}
/* segmented controls */
.segmented{border:none;gap:6px;transform:skewX(-8deg)}
.segmented button{font-family:var(--num);font-size:18px;letter-spacing:1px;background:transparent;color:var(--white);border:3px solid transparent;text-shadow:2px 2px 0 var(--night)}
.segmented button[aria-checked="true"]{background:var(--white);color:var(--night);box-shadow:4px 4px 0 var(--mag);text-shadow:none}
/* front tabs & + tray tabs */
.fronttabs{gap:0;transform:skewX(-10deg);margin:6px 0 8px;overflow:visible}
.fronttabs .tab{font-family:var(--num);font-size:19px;letter-spacing:1px;text-transform:uppercase;border:none;background:transparent;color:var(--white);text-shadow:3px 3px 0 var(--night),4px 4px 0 var(--mag);padding:6px 4px}
.fronttabs .tab[aria-selected="true"]{background:transparent;color:var(--night);text-shadow:none;isolation:isolate}
/* the slanted white shape + pink shadow live on layers BEHIND the tab, so the unread badge on top isn't cropped */
.fronttabs .tab[aria-selected="true"]::before,.fronttabs .tab[aria-selected="true"]::after{content:"";position:absolute;inset:0;clip-path:polygon(0 8%,100% 0,97% 100%,3% 92%);pointer-events:none}
.fronttabs .tab[aria-selected="true"]::before{background:var(--white);z-index:-1}
.fronttabs .tab[aria-selected="true"]::after{background:var(--mag);transform:translate(5px,5px);z-index:-2}
.tabbadge{transform:rotate(6deg) skewX(10deg);text-shadow:none}
.tray-tabs .ghost{font-family:var(--num);font-size:16px;letter-spacing:1px;text-transform:uppercase;border:none;color:var(--white);text-shadow:2px 2px 0 var(--night);transform:skewX(-8deg)}
.tray-tabs .ghost[aria-pressed="true"]{background:var(--white);color:var(--night);text-shadow:none;box-shadow:3px 3px 0 var(--mag);clip-path:polygon(0 8%,100% 0,97% 100%,3% 92%)}
.tray-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 6px!important}   /* 7 tabs: two neat rows instead of squished words */
.tray-tabs .ghost{font-size:15px!important;padding:7px 2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs .tab{font-family:var(--num);font-size:20px;letter-spacing:1px;text-transform:uppercase;border:none;background:transparent;color:var(--white);text-shadow:3px 3px 0 var(--night),4px 4px 0 var(--mag);transform:skewX(-8deg)}
.tabs .tab[aria-selected="true"]{background:var(--white);color:var(--night);text-shadow:none;box-shadow:4px 4px 0 var(--mag);clip-path:polygon(0 8%,100% 0,97% 100%,3% 92%)}
/* game sheet & big tiles keep their look inside the new panel */
.gamesheet .versus,.board{transform:none}
.player{transform:none}
/* subs/notes */
.sheet .sub,.sheet .email,.sheet .sub.left{font-family:var(--body)}
.sheet .msgline{font-family:var(--body);min-height:auto;overflow-wrap:anywhere}   /* grow to fit long messages instead of spilling over the buttons below */
@media (prefers-reduced-motion:reduce){html:not(.motion-always) .sheet,html:not(.motion-always) .fronttabs,html:not(.motion-always) .segmented,html:not(.motion-always) .tabs .tab{transform:none}}
.sheet{max-height:calc(100dvh - 28px);width:min(100%,380px)}
.sheetbody{max-height:calc(100dvh - 28px);padding:36px 24px 30px;box-sizing:border-box}
.sheet h2{margin:0 0 4px 0;transform:rotate(-3deg) skewX(-6deg)}
#msgMenu .sheetbody{padding-top:44px}
.overlay{align-items:center}
.sheet h2{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;line-height:1}
.sheetbody{align-content:start}

/* ===== who's on ===== */
.onlinestrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;align-items:center}
.onlinestrip::-webkit-scrollbar{display:none}
.onlinelbl{flex:none;font-family:var(--tech);font-size:10px;color:#2ee66b;letter-spacing:1px;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.onlinechip{flex:none;display:grid;justify-items:center;gap:2px;background:none;border:none;color:var(--white);font-size:12px;width:64px;padding:0}
.onlinechip .face{width:40px;height:40px;font-size:18px}
.onlinechip span{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onlinechip small{font-size:10px;color:#2ee66b;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== DESKTOP: netrunner terminal mode ===== */
body.desktop{--term:#7CFF6B}
body.desktop .sky canvas{opacity:.55}
body.desktop::before{content:"";position:fixed;inset:0;z-index:8;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}
body.desktop .deskframe{position:fixed;inset:0;z-index:1;display:grid;grid-template-columns:360px 1fr;gap:0;max-width:1400px;margin:0 auto;padding:22px;box-sizing:border-box}
body.desktop #front{max-width:none;height:auto;margin:0;padding:18px 18px 18px 10px;border:2px solid rgba(0,240,255,.35);border-right:none;background:rgba(7,4,26,.72);backdrop-filter:blur(6px);display:flex!important;overflow-y:auto;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
body.desktop #front.hidden{display:flex!important}
body.desktop #chat{position:relative;top:auto;height:auto;max-width:none;width:auto;margin:0;border:2px solid rgba(0,240,255,.35);background:rgba(7,4,26,.6);backdrop-filter:blur(6px)}
body.desktop #chat.hidden{display:flex!important}
body.desktop #chat.hidden > *{display:none!important}
body.desktop #chat.hidden::after{content:attr(data-idle);display:grid;place-items:center;height:100%;font-family:"Monogram",ui-monospace,Menlo,Consolas,monospace;font-size:22px;color:var(--term);white-space:pre-wrap;text-align:center;line-height:1.7;text-shadow:0 0 8px rgba(124,255,107,.6);padding:40px}
body.desktop #front.logged .stamp{width:180px;aspect-ratio:1.9;margin:0 auto 0;transform:rotate(-4deg) scale(.9)}
body.desktop #front:not(.logged){grid-column:1/3;border:none;background:transparent;justify-content:center;align-items:center}
body.desktop #front:not(.logged) .front-inner{width:min(92vw,460px)}
/* login: never clip the date stamp off the top on short screens, and keep it clear of the tabs */
body.desktop #front:not(.logged){justify-content:flex-start}
body.desktop #front:not(.logged) .front-inner{margin:auto;padding:44px 0 8px}   /* the big date pokes ~40px above its own box */
body.desktop #front:not(.logged) .front-inner>*{flex:none}   /* the stamp was getting squashed flat on short screens */
body.desktop #front:not(.logged) .stamp{width:min(100%,360px);margin-bottom:22px}
/* terminal bar */
.termbar{display:none}
body.desktop .termbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9;height:26px;align-items:center;gap:22px;padding:0 20px;font-family:"Monogram",ui-monospace,Menlo,Consolas,monospace;font-size:16px;color:var(--term);background:#020705;border-top:1px solid rgba(124,255,107,.35);letter-spacing:.5px}
.termbar b{color:#fff;font-weight:400}
.termbar .blink{animation:sxblink 1s steps(1) infinite}
.termbar .right{margin-left:auto;opacity:.75}
body.desktop .deskframe{padding-bottom:48px}
/* login as a terminal */
body.desktop #authCard{font-family:ui-monospace,Menlo,Consolas,monospace}
body.desktop #authCard label::before{content:"> ";color:var(--term)}
body.desktop #authCard .field{background:#020705;border-color:var(--term);color:#e8ffe8;font-family:inherit;box-shadow:inset 0 0 12px rgba(124,255,107,.15)}
body.desktop #authCard .field:focus{outline:2px solid var(--term)}
body.desktop #authCard .go{font-family:var(--num)}
body.desktop #authCard .tabs .tab{font-family:inherit;font-size:14px}
/* boot screen */
.boot{position:fixed;inset:0;z-index:60;background:#020705;color:var(--term);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.7;padding:6vh 8vw;text-shadow:0 0 8px rgba(124,255,107,.55);cursor:pointer;overflow:hidden}
.boot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);pointer-events:none}
.boot::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.7));pointer-events:none}
.boot pre{margin:0;white-space:pre-wrap;font:inherit}
.boot .cur{display:inline-block;width:.6em;height:1.1em;background:var(--term);vertical-align:-2px;animation:sxblink .9s steps(1) infinite}
.boot .skip{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:16px;font-weight:700;letter-spacing:2px;color:var(--term,#7CFF6B);text-shadow:0 0 10px rgba(124,255,107,.8);z-index:3;animation:bootpulse 1.4s ease-in-out infinite alternate}
@keyframes bootpulse{to{opacity:.55}}
.boot .bootbar{position:absolute;z-index:3;left:8vw;right:8vw;bottom:18px;height:4px;background:rgba(124,255,107,.18)}
.boot .bootbar i{display:block;height:100%;width:0;background:var(--term,#7CFF6B);box-shadow:0 0 8px var(--term,#7CFF6B);animation:bootfill 3.6s linear forwards}
@keyframes bootfill{to{width:100%}}
.boot.out{animation:bootout .5s ease forwards}
@keyframes bootout{to{opacity:0;transform:scaleY(.002)}}
.boot h1{font-family:var(--num);font-size:56px;color:#fff;letter-spacing:2px;margin:0 0 10px;text-shadow:-3px 0 var(--cyan),4px 4px var(--mag)}
/* keyboard hint chips */
.kbd{font-family:ui-monospace,monospace;font-size:11px;border:1px solid rgba(124,255,107,.5);padding:0 5px;color:var(--term)}
body.desktop #chat .feed,body.desktop #chat .compose,body.desktop #chat .top,body.desktop #chat .pinbar,body.desktop #chat .catchup{max-width:820px;width:100%;margin-left:auto;margin-right:auto}
/* the top bar, pinned bar and Transmit bar run edge to edge across the chat pane (only the messages stay a readable width) */
body.desktop #chat .compose,body.desktop #chat .top,body.desktop #chat .pinbar{max-width:none;margin-left:0;margin-right:0;box-sizing:border-box}
/* the message list fills the pane too (so its scrollbar sits on the pane's edge), with the messages kept to a readable column in the middle */
body.desktop #chat .feed{max-width:none;margin-left:0;margin-right:0;box-sizing:border-box;padding-left:max(14px,calc(50% - 410px));padding-right:max(14px,calc(50% - 410px))}
body.desktop .bubble{max-width:520px}
/* ===== desktop fixes: full-height panes, backgrounds, compact date ===== */
body.desktop .deskframe{grid-template-rows:minmax(0,1fr);height:100dvh;overflow:hidden}
body.desktop #front,body.desktop #chat{height:100%;min-height:0}
body.desktop #chat{display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
body.desktop #chat .feed{flex:1 1 auto;min-height:0}
body.desktop #chat::before,body.desktop #chat::after{position:absolute;z-index:-1}   /* (no inset here: it was stretching each theme's sun, skyline and grid to fill the whole pane) */
/* 🌌 Stars on a computer: on phones the starfield behind the app shows through; the computer frame hides it, so the room draws its own */
body.desktop #chat[data-bg="stars"]::before{background:linear-gradient(180deg,#040818,#0A1433 60%,#0B1638)}
body.desktop #chat[data-bg="stars"]::after{background:var(--nightsky) center/cover;animation:nsBreathe 6s ease-in-out infinite}
body.desktop #chat[data-bg="stars"]>.bgfx::before{background:var(--nightsky) 40% 30%/140% auto;opacity:.35;transform:scaleX(-1)}
body.desktop #chat .compose{flex:none}
body.desktop #chat>*:not(.feed){flex-shrink:0}   /* only the messages scroll; the bars above them keep their full height */
body.desktop #front.logged .stamp{display:none}
.deskdate{display:none}
body.desktop #front.logged .deskdate{display:flex;align-items:baseline;gap:10px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--term);font-size:13px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(124,255,107,.35);padding:4px 0 10px;margin-bottom:6px;text-shadow:0 0 8px rgba(124,255,107,.5)}
body.desktop .deskdate b{font-family:var(--num);font-size:34px;color:#fff;letter-spacing:2px;text-shadow:-2px 0 var(--cyan),3px 3px var(--mag);font-weight:400}
body.desktop .deskdate .blink{animation:sxblink 1s steps(1) infinite}
/* PC holiday look: pixel sprites + a typed terminal line under the date */
.deskhol{display:none}
body.desktop #front.logged .deskhol:not(.hidden){display:flex;align-items:center;gap:12px;margin:-2px 0 8px;padding:6px 8px;border:1px dashed color-mix(in srgb,var(--hol) 55%,transparent);background:color-mix(in srgb,var(--hol) 7%,transparent);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.5px;color:var(--hol);text-shadow:0 0 8px color-mix(in srgb,var(--hol) 60%,transparent);min-width:0}
.deskhol .dhart{display:flex;align-items:flex-end;gap:6px;flex:none}
.deskhol .dhspr{display:block;image-rendering:pixelated;filter:drop-shadow(-1px 0 0 var(--cyan)) drop-shadow(2px 2px 0 var(--mag)) drop-shadow(0 0 6px color-mix(in srgb,var(--hol) 55%,transparent));animation:dhbob 1.6s steps(2) infinite}
.deskhol .dhspr:nth-child(2){animation-delay:.8s}
.deskhol .dhspr.dhimg{background-repeat:no-repeat}
.deskhol .dhspr.dhimg[style*="hwframes"]{animation:hwframes .5s steps(4) infinite}
.deskhol .dhspr svg{display:block}
@keyframes dhbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.deskhol .dhline{min-width:0;overflow:hidden}
.deskhol .dhtype{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%;border-right:.6em solid var(--hol);width:calc(var(--n)*(1ch + .5px) + .6em);animation:dhtype 1.4s steps(var(--n)) both,dhcaret 1s steps(1) 1.4s infinite}
@keyframes dhtype{from{width:0}}
@keyframes dhcaret{50%{border-right-color:transparent}}

/* ===== ?! pop-outs (Persona IM style) ===== */
.bubble{overflow:visible}
.punct{position:absolute;top:-22px;right:-14px;font-family:var(--num);font-size:34px;line-height:1;color:var(--white);-webkit-text-stroke:2px var(--night);text-shadow:3px 3px 0 var(--night);transform:rotate(12deg);pointer-events:none;z-index:3;animation:punctpop .35s cubic-bezier(.2,1.6,.4,1) both}
.msg.me .punct{right:-14px;left:auto;top:-22px;transform:rotate(12deg);color:var(--volt)}
/* a message's ? / ! sits in the bubble; lift that message's column above the (framed) profile picture so the mark isn't hidden */
.msg .col:has(> .bubble > .punct){z-index:3}
.msg:not(.me):has(> .col > .bubble > .punct) > .face{z-index:4}   /* keep a friend's face + online light above their "!" message (your own ? pops out over your face, so leave yours) */
.msg .col > .bubble:has(> .punct){z-index:2}   /* …and above the name tag (z 1), which sits right where a friend's ? pops out */   /* .col is its own layer (will-change for swipe-to-reply), so lift it, not just the bubble */
.msg.me .punct.loud{top:-30px;right:-2px}
.punct.loud{font-size:44px;top:-30px;color:var(--mag);-webkit-text-stroke:2px var(--night)}
.msg.me .punct.loud{color:var(--volt)}
@keyframes punctpop{from{transform:scale(.2) rotate(30deg);opacity:0}}
.msg.me .punct{animation-name:punctpopme}
@keyframes punctpopme{from{transform:scale(.2) rotate(30deg);opacity:0}to{transform:rotate(12deg)}}
@keyframes punctpopmebang{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:rotate(-12deg)}}
.msg.me .punct.bang{animation-name:punctpopmebang}
/* ===== pack 15 ===== */
.p15-scene{position:absolute;inset:0;background:#000;opacity:0;animation:dgin .6s ease forwards;transition:opacity .8s}
.p15-scene.out{opacity:0!important}
.p15-scene svg{position:absolute;inset:0;width:100%;height:100%}
.p15-cap{color:#ffd27a;position:absolute;left:0;right:0;top:14%;text-align:center}
.p15-flicker{animation:p15flick 1.8s ease-in-out infinite alternate}
@keyframes p15flick{to{opacity:.55}}
.p15-hand{transform-origin:66px 176px;animation:p15type .3s ease-in-out infinite alternate}
@keyframes p15type{to{transform:translateY(-3px)}}
.kh-wrap{position:absolute;inset:0;overflow:hidden;opacity:0;animation:dgin .8s ease forwards;transition:opacity .8s}
.kh-wrap.out{opacity:0!important}
.kh-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,#3b1d7a,#0a0620 60%,#02010a)}
.kh-moon{position:absolute;left:50%;bottom:-40%;width:min(60vw,260px);aspect-ratio:1;transform:translateX(-50%) rotate(45deg);background:#ffe27a;box-shadow:0 0 60px 20px rgba(255,226,122,.5);animation:khrise 4.5s cubic-bezier(.2,.8,.3,1) both;filter:drop-shadow(0 0 30px rgba(255,226,122,.6))}
.kh-moon::before,.kh-moon::after{content:"";position:absolute;width:100%;height:100%;background:#ffe27a;border-radius:50%}
.kh-moon::before{left:-50%;top:0}.kh-moon::after{left:0;top:-50%}
@keyframes khrise{to{bottom:38%}}
.kh-city{position:absolute;left:0;right:0;bottom:0;height:45%}
.kh-city i{position:absolute;bottom:0;width:6%;background:#02010a;box-shadow:inset 0 0 0 1px rgba(255,226,122,.08)}
.kh-cap{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#ffe27a}
.kb-wrap{position:absolute;inset:0;background:rgba(0,0,0,.7);display:grid;place-content:center;gap:18px;text-align:center;animation:sxfadein .3s ease both}
.kb-hole{width:110px;height:150px;margin:0 auto;position:relative;filter:drop-shadow(0 0 20px #fff)}
.kb-hole i{position:absolute;left:50%;top:0;width:64px;height:64px;transform:translateX(-50%);border-radius:50%;background:#fff}
.kb-hole::after{content:"";position:absolute;left:50%;top:44px;width:34px;height:100px;transform:translateX(-50%);background:#fff;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.kb-beam{position:absolute;left:-60%;top:50%;width:80%;height:6px;background:linear-gradient(90deg,transparent,#fff,#9be7ff);box-shadow:0 0 18px #9be7ff;transform:translateY(-50%);animation:kbbeam 1.4s cubic-bezier(.6,0,.3,1) both}
@keyframes kbbeam{to{left:20%;width:30%}}
.kb-cap{opacity:0;color:#9be7ff;transition:opacity .3s}
.kb-wrap.lock .kb-cap{opacity:1}
.kb-wrap.lock .kb-hole{animation:kblock .5s ease both}
@keyframes kblock{30%{transform:scale(1.15);filter:drop-shadow(0 0 40px #fff) brightness(2)}100%{transform:scale(1)}}
.re-wrap{position:absolute;inset:0;background:radial-gradient(circle,rgba(40,0,0,.55),rgba(0,0,0,.92));display:grid;place-content:center;gap:16px;animation:sxfadein .3s ease both}
.re-tw{width:min(80vw,320px);margin:0 auto;background:#1a1a1a;border:4px solid #444;border-radius:10px 10px 4px 4px;padding:12px;box-shadow:8px 8px 0 #07041A}
.re-paper{background:#f2ecd8;color:#222;padding:14px;font-family:"Courier New",ui-monospace,monospace;text-align:center;display:grid;gap:6px;transform:translateY(-6px);animation:repaper .5s ease both}
@keyframes repaper{from{transform:translateY(40px)}}
.re-paper b{font-size:22px;letter-spacing:2px}
.re-paper span{font-size:13px}.re-paper small{font-size:11px;color:#8a1c1c;font-style:italic;margin-top:6px}
.re-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.re-keys i{height:14px;background:#333;border:1px solid #555;border-radius:3px}
.re-heart{font-size:40px;color:#ff2a2a;text-align:center;animation:reheart .8s ease-in-out infinite;filter:drop-shadow(0 0 10px #f00)}
@keyframes reheart{50%{transform:scale(1.3)}}
.face.re-heal .fi{animation:reheal 2.4s ease both;box-shadow:0 0 0 3px #2ee66b,0 0 20px 6px rgba(46,230,107,.7)}
@keyframes reheal{30%{filter:brightness(1.6) hue-rotate(60deg)}}
.re-herb{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;font-size:70px;animation:sxslam 2.2s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 0 16px #2ee66b)}
.re-herb b{display:block;font-family:var(--num);font-size:28px;color:#2ee66b;text-shadow:3px 3px 0 #07041A;letter-spacing:2px}
/* ===== danganronpa ===== */
.dr-coinwrap{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:14px;perspective:600px;transition:opacity .5s}
.dr-coinwrap.out{opacity:0}
.dr-coin{position:relative;width:min(40vw,150px);aspect-ratio:1;transform-style:preserve-3d;animation:drflip 2s cubic-bezier(.25,.6,.3,1) both}
.dr-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-size:min(22vw,84px);backface-visibility:hidden;border:6px solid #07041A;box-shadow:inset 0 0 0 6px rgba(0,0,0,.15)}
.dr-face.kind{background:radial-gradient(circle at 35% 30%,#fff,#d9dde8)}
.dr-face.cruel{background:radial-gradient(circle at 35% 30%,#3a3a44,#07041A);transform:rotateY(180deg);box-shadow:0 0 30px #ff1a3c,inset 0 0 0 6px #ff1a3c}
@keyframes drflip{0%{transform:translateY(40vh) rotateY(0)}45%{transform:translateY(-16vh) rotateY(1260deg)}100%{transform:translateY(0) rotateY(1620deg)}}
.dr-cap{text-align:center;font-family:var(--tech);font-size:15px;color:#ff1a3c;margin-top:6px;letter-spacing:1px}
.dr-trial{background:#0a0a0a!important;color:#fff!important;border-color:#ff1a3c!important;box-shadow:10px 10px 0 #ff1a3c!important;font-size:clamp(30px,10vw,64px)!important}
.dr-nonstop{position:absolute;inset:0;overflow:hidden}
.dr-strip{position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,26,60,.14) 0 30px,transparent 30px 60px);animation:drstrip .5s linear infinite}
@keyframes drstrip{to{background-position:60px 0}}
.dr-target{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);max-width:80vw;background:#fff;color:#07041A;font-family:var(--tech);font-weight:900;font-size:16px;padding:10px 18px;border:4px solid #ff1a3c;box-shadow:6px 6px 0 #07041A;text-align:center}
.dr-cross{position:absolute;left:8%;top:44%;width:56px;height:56px;transform:translate(-100%,-50%) rotate(-20deg);opacity:0}
.dr-cross::before,.dr-cross::after{content:"";position:absolute;inset:0;background:#ff1a3c;border-radius:4px}
.dr-cross::before{height:14px;top:21px}.dr-cross::after{width:14px;left:21px}
.dr-cross.hit{animation:drcross .5s cubic-bezier(.5,0,.3,1) forwards}
@keyframes drcross{to{transform:translate(150%,-50%) rotate(20deg);opacity:1}}
.dr-despair{position:absolute;inset:0;background:linear-gradient(115deg,#0a0a0a 48%,#ff1a3c 49%,#ff1a3c 51%,#0a0a0a 52%);display:grid;place-items:center;animation:sxflash 2.6s ease both}
.dr-desptext,.dr-hopetext,.dr-desptext2{position:absolute;font-family:var(--num);font-size:clamp(30px,11vw,58px);text-shadow:3px 3px 0 #07041A}
.dr-desptext{left:14%;top:38%;color:#fff}
.dr-desptext2{right:10%;top:56%;color:#ffd84a}
.dr-hopetext{left:50%;top:47%;transform:translate(-50%,-50%);color:#ff1a3c;font-size:40px}
.dr-verdict{position:absolute;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center}
.dr-vcard{background:#fff;border:6px solid #07041A;padding:20px 30px;transform:scale(3) rotate(0);opacity:0;transition:transform .35s cubic-bezier(.3,0,.6,1),opacity .2s}
.dr-vcard b{font-family:var(--num);font-size:clamp(34px,11vw,56px);letter-spacing:2px}
.dr-vcard.g{box-shadow:10px 10px 0 #ff1a3c}.dr-vcard.g b{color:#ff1a3c}
.dr-vcard.ng{box-shadow:10px 10px 0 #2ee66b}.dr-vcard.ng b{color:#1a9e4a}
.dr-verdict.slam .dr-vcard{transform:scale(1) rotate(-4deg);opacity:1}

/* ===== King's Court ===== */
.kc-icon{grid-template-columns:repeat(3,14px)!important}
.kc-icon i.ct{background:rgba(243,255,58,.35)}
.kc-icon i.x::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cyan)}
.kc-icon i.o::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mag)}
.kcboard{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(100%,320px);aspect-ratio:1;transform:rotate(-1deg);margin:0 auto}
.kccell{position:relative;background:var(--deep);border:1.5px solid #3b2d80;padding:0;min-height:0}
.kccell.court{background:rgba(243,255,58,.1);border-color:rgba(243,255,58,.45)}
.kccell.sel{border-color:var(--white);box-shadow:inset 0 0 0 2px var(--white)}
.kccell.tgt-simple::after{content:"";position:absolute;inset:30%;border-radius:50%;background:rgba(255,255,255,.55)}
.kccell.tgt-jump::after{content:"";position:absolute;inset:14%;border-radius:50%;border:2px solid var(--volt);box-shadow:0 0 6px var(--volt)}
.kccell.last{box-shadow:inset 0 0 0 2px var(--volt)}
.kccell:disabled{cursor:default}
.kcpc{position:absolute;inset:12%;border-radius:50%;box-shadow:2px 2px 0 #07041A}
.kcpc.x{background:var(--cyan)}
.kcpc.o{background:var(--mag)}
.kc-chainbar{display:flex;gap:10px;align-items:center;justify-content:center;width:100%}
.kc-chainbar b{color:var(--volt);font-family:var(--tech);font-size:13px}
.kcboard-wrap{width:min(100%,340px);display:flex;justify-content:center}
.kc-mini{grid-template-columns:repeat(8,8px)!important;gap:1px!important}
.kc-mini i{width:8px;height:8px}
.kc-mini i.x{background:var(--cyan)}
.kc-mini i.o{background:var(--mag)}
.kc-mini i.court{background:rgba(243,255,58,.3)}
.gamecard .gc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== hi-five ===== */
.hf-hand{position:absolute;top:38%;width:min(30vw,120px);filter:drop-shadow(4px 4px 0 #07041A)}
.hf-left{left:-40%;animation:hfL .42s cubic-bezier(.3,0,.6,1) forwards}
.hf-right{right:-40%;transform:scaleX(-1);animation:hfR .42s cubic-bezier(.3,0,.6,1) forwards}
@keyframes hfL{to{left:38%;transform:rotate(-8deg)}}
@keyframes hfR{to{right:38%;transform:scaleX(-1) rotate(8deg)}}
.hf-burst{position:absolute;left:50%;top:44%;width:0;height:0}
.hf-burst i{position:absolute;left:0;top:0;width:5px;height:16px;background:var(--volt);box-shadow:0 0 6px var(--volt);transform:rotate(var(--a));transform-origin:50% 0;animation:hfspark .5s ease-out forwards}
@keyframes hfspark{to{transform:rotate(var(--a)) translateY(-46px);opacity:0}}
/* ===== Halloween pixel sprites with NightLane's neon outline ===== */
.hwspr{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(-2px 0 0 var(--cyan)) drop-shadow(3px 3px 0 var(--mag)) drop-shadow(0 0 10px rgba(0,240,255,.45))}
@keyframes hwframes{from{background-position-x:0}to{background-position-x:var(--hwend)}}
.hwcap{position:absolute;left:50%;top:14%;transform:translateX(-50%) rotate(-4deg);max-width:92vw;text-align:center;font-family:var(--num);font-size:min(10vw,58px);line-height:1.05;color:var(--volt);text-shadow:-3px 0 var(--cyan),4px 4px 0 var(--mag);animation:hwcap 2.8s ease both;width:max-content;max-width:88vw;overflow-wrap:break-word}
@keyframes hwcap{0%{opacity:0;transform:translateX(-50%) rotate(-4deg) scale(.5)}12%{opacity:1;transform:translateX(-50%) rotate(-4deg) scale(1.08)}20%{transform:translateX(-50%) rotate(-4deg) scale(1)}85%{opacity:1}100%{opacity:0}}
.hwboo{left:50%;top:50%;transform:translate(-50%,-50%);animation:hwframes .5s steps(4) infinite,hwboo 1.1s ease-out forwards!important}
@keyframes hwboo{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-60%) scale(1.3);opacity:0}}
.hwdrift{left:-20%;opacity:.8;animation:hwframes .66s steps(4) infinite,hwdrift 3.2s ease-in-out forwards!important}
@keyframes hwdrift{0%{left:-20%;opacity:0}20%{opacity:.85}50%{transform:translateY(-24px)}80%{opacity:.85}100%{left:110%;opacity:0}}
.hwbat{left:-15%;animation:hwframes .4s steps(4) infinite,hwbatfly var(--dur,3s) linear forwards!important}
.hwbat.rev{left:auto;right:-15%;transform:scaleX(-1);animation:hwframes .4s steps(4) infinite,hwbatflyr var(--dur,3s) linear forwards!important}
@keyframes hwbatfly{0%{left:-15%;margin-top:0}25%{margin-top:-30px}50%{margin-top:10px}75%{margin-top:-20px}100%{left:110%;margin-top:0}}
@keyframes hwbatflyr{0%{right:-15%;margin-top:0}33%{margin-top:20px}66%{margin-top:-25px}100%{right:110%;margin-top:0}}
.hwfall{top:-60px;animation:hwfall 3s ease-in forwards}
@keyframes hwfall{to{top:105%;transform:rotate(var(--rot))}}
.hwfloat{bottom:-80px;animation:hwfloat 4.2s ease-out forwards}
@keyframes hwfloat{to{bottom:110%;transform:rotate(25deg)}}
.hwrise{left:50%;bottom:0;transform:translate(-50%,100%);animation:hwrise 4.6s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes hwrise{0%{transform:translate(-50%,100%)}12%{transform:translate(-50%,0)}16%{transform:translate(-50%,3%) rotate(-2deg)}20%{transform:translate(-50%,0) rotate(2deg)}85%{transform:translate(-50%,0)}100%{transform:translate(-50%,110%)}}
.hwrow{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:2%;pointer-events:none}
.hwrow .hwspr{position:relative}
.hwband{bottom:34%}.hwdance{bottom:8%}
.hwrow .hwin{animation-name:hwframes,hwin!important;animation-duration:.66s,.5s!important;animation-timing-function:steps(4),ease-out!important;animation-iteration-count:infinite,1!important}
.hwdance .hwin{animation-name:hwframes,hwbounce!important;animation-duration:.57s,.57s!important;animation-timing-function:steps(4),ease-in-out!important;animation-iteration-count:infinite,infinite!important}
@keyframes hwin{from{opacity:0;transform:translateY(30px)}}
@keyframes hwbounce{50%{transform:translateY(-8px)}}
.hwdark{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.15),rgba(0,0,0,.85));animation:sxfadein .5s ease both}
.hwwalk{left:-25%;top:40%;animation:hwframes .8s steps(4) infinite,hwwalk 4.4s linear forwards!important}
@keyframes hwwalk{0%{left:-25%}100%{left:110%}}
.hwwitch{left:50%;bottom:6%;transform:translateX(-50%);animation:hwframes .8s steps(4) infinite,hwin .5s ease-out!important}
.hwbubble{position:absolute;bottom:18%;width:var(--sz);height:var(--sz);border-radius:50%;background:radial-gradient(circle at 35% 35%,#d6ff9a,#3fd14a 60%,#1c7a2a);box-shadow:0 0 10px #5dff5d;opacity:0;animation:hwbubble 1.8s ease-out forwards}
@keyframes hwbubble{0%{opacity:0;transform:translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translateY(-38vh) scale(1.2)}}
.hfprompt{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 10px 8px;padding:10px 12px 14px;background:var(--night);border:2px solid var(--volt);box-shadow:4px 4px 0 var(--mag);animation:hfin .2s ease-out;overflow:hidden}
.hfprompt.out{opacity:0;transform:translateY(8px);transition:.25s}
.hfprompt .hftext{flex:1 1 160px;font-weight:700;font-size:16px}
.hfprompt .hfbtn{width:auto;flex:none;padding:8px 14px;font-size:16px;margin:0}
.hfprompt .hfx{flex:none;background:none;border:none;color:var(--muted);font-size:18px;padding:4px 6px}
.hfprompt .hfbar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--volt);transform-origin:left;animation:hfbar linear forwards}
@keyframes hfbar{to{transform:scaleX(0)}}
@keyframes hfin{from{opacity:0;transform:translateY(10px)}}
.hf-nice{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-6deg);font-family:var(--num);font-size:min(18vw,96px);line-height:.9;color:var(--volt);text-align:center;text-shadow:-3px 0 var(--cyan),5px 5px 0 var(--mag);animation:hfnice 1.7s cubic-bezier(.2,1.4,.4,1) forwards}
.hf-nice small{display:block;font-family:var(--tech);font-size:.22em;letter-spacing:1px;color:var(--white);text-shadow:2px 2px 0 var(--night);margin-top:6px}
@keyframes hfnice{0%{opacity:0;transform:translateX(-50%) rotate(-6deg) scale(.4)}15%{opacity:1;transform:translateX(-50%) rotate(-6deg) scale(1.1)}25%{transform:translateX(-50%) rotate(-6deg) scale(1)}80%{opacity:1}100%{opacity:0}}
.hf-hang{position:absolute;right:12%;top:40%;font-size:min(22vw,110px);animation:hfhang 1.8s ease-in-out forwards}
@keyframes hfhang{0%{opacity:0;transform:translateY(20px)}20%{opacity:1;transform:none}60%{transform:rotate(-12deg)}100%{opacity:0;transform:translateY(60px) rotate(-30deg)}}

/* ===== splash screen (covers the raw-HTML flash while everything loads) ===== */
#splash{position:fixed;inset:0;z-index:999;background:#07041A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;transition:opacity .5s ease,visibility .5s;font-family:var(--body,sans-serif)}
#splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-sky{position:absolute;inset:0}
.splash-sky canvas{width:100%;height:100%}
.splash-moon{position:relative;width:min(30vw,120px);aspect-ratio:1;display:grid;place-items:center;animation:splashfloat 3.2s ease-in-out infinite}
.splash-moon svg{width:72%;filter:drop-shadow(0 0 14px rgba(243,255,58,.7));animation:splashspin 8s linear infinite}
@keyframes splashfloat{50%{transform:translateY(-8px)}}
@keyframes splashspin{100%{transform:rotate(360deg)}}
.splash-ring{position:absolute;inset:-10%;border:2px solid rgba(0,240,255,.5);border-radius:50%;animation:splashring 2.4s ease-out infinite}
@keyframes splashring{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.splash-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(243,255,58,.35),transparent 70%);filter:blur(6px)}
.splash-word{font-family:var(--num);font-size:clamp(30px,9vw,46px);letter-spacing:3px;color:#fff;text-shadow:-3px 0 var(--cyan),4px 4px 0 var(--mag)}
.splash-word b{color:var(--volt);text-shadow:-3px 0 var(--mag),4px 4px 0 var(--cyan)}
.splash-bar{width:min(58vw,220px);height:6px;border:1.5px solid rgba(0,240,255,.55);position:relative;overflow:hidden}
.splash-bar i{position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,var(--cyan),var(--volt),transparent);animation:splashbar 1.1s ease-in-out infinite}
@keyframes splashbar{to{left:100%}}
.splash-msg{font-family:var(--tech,monospace);font-size:12px;color:var(--muted,#8a7fc0);letter-spacing:1px;text-transform:uppercase;animation:sxblink 1.4s steps(1) infinite}
@media (prefers-reduced-motion:reduce){html:not(.motion-always) .splash-moon,html:not(.motion-always) .splash-ring,html:not(.motion-always) .splash-bar i,html:not(.motion-always) .splash-msg{animation:none}}

/* ===== "who's here" presence strip ===== */
.dmpresence{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.dmpresence.here{color:#2ee66b}
.dmpresence .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor}
.herebar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(46,230,107,.08);border-bottom:1.5px solid rgba(46,230,107,.35);font-size:13px;color:#e8ffe8;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.herebar::-webkit-scrollbar{display:none}
.herebar .hb-faces{display:flex;flex:none}
.herebar .hb-faces .face{width:24px;height:24px;font-size:11px;margin-left:-8px;border:2px solid var(--night);box-shadow:none}
.herebar .hb-faces .face:first-child{margin-left:0}
.herebar b{color:#2ee66b;font-weight:700}
/* ===== missed-secret toast ===== */
.toast.missed-secret{flex-wrap:wrap}
.missed-actions{display:flex;gap:8px;width:100%;margin-top:6px}
.missed-actions button{flex:1;padding:8px;font-size:13px}

/* ===== bigger, punchier "!" (kept tight so it can't bleed into a neighboring message) ===== */
.punct.bang{right:-4px;left:auto;font-size:36px;top:5px;-webkit-text-stroke:1px var(--night);text-shadow:0 0 5px rgba(0,0,0,.85),1px 1px 0 var(--night),-1px -1px 0 var(--night),1px -1px 0 var(--night),-1px 1px 0 var(--night)}
/* own "!" mirrors the received one exactly — floats out past the LEFT edge instead of the right, well clear of your own avatar */
.msg.me .punct.bang{left:auto;right:100%;margin-right:4px;top:5px;transform:rotate(-12deg)}
.msg.me .punct.bang.loud{top:-3px}
.msg.me .col > .bubble:has(> .punct.bang){margin-left:40px;max-width:calc(100% - 40px);min-width:0}   /* long messages/replies stretch to the screen edge: keep room so your "!" burst never gets pushed off */
.punct.bang::before{content:"";position:absolute;left:50%;top:56%;width:.95em;height:.95em;transform:translate(-50%,-50%) rotate(-8deg);z-index:-1;
  background:#1a0a24;box-shadow:0 0 0 3px var(--night);clip-path:polygon(50% 0%,63% 30%,93% 15%,75% 42%,100% 50%,75% 58%,93% 85%,63% 70%,50% 100%,37% 70%,7% 85%,25% 58%,0% 50%,25% 42%,7% 15%,37% 30%)}
.msg.me .punct.bang::before{transform:translate(-50%,-50%) rotate(8deg)}

/* ===== status symbol: online (green) / idle (yellow) / do-not-disturb (red); 5 shapes to pick from ===== */
.face.has-status::after{content:"";position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;z-index:4;border:2px solid var(--night);box-sizing:border-box}
.face.sm.has-status::after,.mini-faces .face.has-status::after{width:9px;height:9px;right:-3px;bottom:-3px}
.receipt .mini-faces .face.has-status::after{display:none}
.face.status-online::after{background:#2ee66b;box-shadow:0 0 6px #2ee66b}
.face.status-idle::after{background:#ffcf3d;box-shadow:0 0 6px #ffcf3d}
.face.status-dnd::after{background:#ff3d3d;box-shadow:0 0 6px #ff3d3d}
/* being in the exact same room as the viewer brightens the ring, whatever color the status is */
.face.here.has-status::after{border-color:var(--volt);box-shadow:0 0 0 1px var(--volt),0 0 8px currentColor}
/* shapes: default is a plain dot (border-radius above already rounds it); these override for the others */
.face.shape-star::after{border-radius:0;border:none;clip-path:polygon(50% 0%,63% 35%,100% 35%,69% 57%,82% 91%,50% 70%,18% 91%,31% 57%,0% 35%,37% 35%)}
.face.shape-diamond::after{border-radius:0;border:none;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.face.shape-heart::after{border-radius:0;border:none;clip-path:polygon(50% 25%,61% 10%,78% 10%,92% 24%,92% 42%,50% 90%,8% 42%,8% 24%,22% 10%,39% 10%)}
.face.shape-ring::after{border-radius:50%;background:none!important;border:3px solid currentColor;box-sizing:border-box}
.face.shape-ring.status-online::after{color:#2ee66b}
.face.shape-ring.status-idle::after{color:#ffcf3d}
.face.shape-ring.status-dnd::after{color:#ff3d3d}
.face.shape-dot::after{border-radius:50%}
/* status shape picker (Theme & colors) */
.statusrow{display:flex;flex-wrap:wrap;gap:10px;width:100%;justify-content:center}
.statuspick{background:var(--deep);border:2px solid #3b2d80;padding:8px 10px;font-family:var(--tech);font-size:11px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px}
.statuspick.on{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag);color:var(--white)}
.statuspick i{width:14px;height:14px;background:#2ee66b;display:block}
.statuspick[data-shape="dot"] i{border-radius:50%}
.statuspick[data-shape="star"] i{clip-path:polygon(50% 0%,63% 35%,100% 35%,69% 57%,82% 91%,50% 70%,18% 91%,31% 57%,0% 35%,37% 35%)}
.statuspick[data-shape="diamond"] i{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.statuspick[data-shape="heart"] i{clip-path:polygon(50% 25%,61% 10%,78% 10%,92% 24%,92% 42%,50% 90%,8% 42%,8% 24%,22% 10%,39% 10%)}
.statuspick[data-shape="ring"] i{border-radius:50%;background:none;border:3px solid #2ee66b}
.statuspick[data-shape="moon"] i{border-radius:50%;background:none;box-shadow:inset -5px -2px 0 0 #2ee66b;transform:rotate(-20deg)}
.statuspick[data-shape="square"] i{border-radius:2px}
.statuspick[data-shape="triangle"] i{clip-path:polygon(50% 4%,100% 96%,0 96%)}
.statuspick[data-shape="bolt"] i{clip-path:polygon(58% 0,10% 58%,44% 58%,34% 100%,90% 38%,54% 38%)}
.statuspick[data-shape="sparkle"] i{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.statuspick[data-shape="plus"] i{clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.statuspick[data-shape="pulse"] i{border-radius:50%;color:#2ee66b;animation:stpulse 1.6s ease-out infinite}
/* Do Not Disturb toggle (Profile) */
.dndrow{display:flex;align-items:center;justify-content:space-between;width:100%;border:2px solid #3b2d80;padding:10px 14px}
.dndrow.on{border-color:#ff3d3d;background:rgba(255,61,61,.08)}
.dndlabel{text-align:left}
.dndlabel b{display:block;color:var(--white);font-size:15px}
.dndlabel small{color:var(--muted);font-size:12px}
.dndswitch{width:46px;height:26px;border:2px solid var(--muted);border-radius:14px;position:relative;background:none;flex:none;padding:0}
.dndswitch::after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.dndswitch.on{border-color:#ff3d3d}
.dndswitch.on::after{transform:translateX(20px);background:#ff3d3d;box-shadow:0 0 6px #ff3d3d}
/* ===== multi-photo send ===== */
.pendingmulti{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.upprog{position:relative;height:26px;margin-bottom:8px;border:2px solid var(--cyan);background:rgba(0,0,0,.35);overflow:hidden}
.upprog .upfill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--cyan),var(--mag));transition:width .2s linear}
.upprog span{position:relative;display:block;padding:0 10px;line-height:22px;font-family:var(--body);font-weight:700;font-size:14px;color:var(--white);text-shadow:0 1px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pendingmulti.busy .pm-tile button,.pendingmulti.busy .pm-add,.pendingmulti.busy #pmClear,.pending.busy #unpick{opacity:.35;pointer-events:none}
.pm-strip .pm-tile video{width:100%;height:100%;object-fit:cover;display:block}
.pm-strip .pm-tile .pm-vid{position:absolute;left:2px;bottom:1px;font-size:12px;text-shadow:0 1px 2px #000;pointer-events:none}
.pm-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.pm-strip .pm-tile{position:relative;flex:none;width:56px;height:56px;border:2px solid var(--cyan);overflow:hidden}
.pm-strip .pm-tile img{width:100%;height:100%;object-fit:cover;display:block}
.pm-strip .pm-tile button{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:var(--night);color:var(--white);border:1.5px solid var(--mag);border-radius:50%;font-size:11px;line-height:1;padding:0;display:grid;place-items:center}
.pm-strip .pm-add{flex:none;width:56px;height:56px;border:2px dashed var(--muted);color:var(--muted);background:none;font-size:24px;display:grid;place-items:center}
#pmLabel{font-size:13px;color:var(--muted)}
#pmClear{align-self:flex-start;background:none;border:none;color:var(--mag);font-size:13px;text-decoration:underline;padding:0}
/* photo album grid inside a bubble */
.albumgrid{display:grid;gap:3px;width:min(64vw,240px);margin:2px 0 8px;border-radius:2px;overflow:hidden}
.albumgrid.n1{grid-template-columns:1fr}
.albumgrid.n2,.albumgrid.n4{grid-template-columns:1fr 1fr}
.albumgrid.n3{grid-template-columns:1fr 1fr}
.albumgrid.n3 .tile:first-child{grid-row:1/3}
.albumgrid button.tile{position:relative;padding:0;border:none;background:#000;aspect-ratio:1;overflow:hidden}
.albumgrid.n3 .tile:first-child{aspect-ratio:auto}
.albumgrid .tile img{width:100%;height:100%;object-fit:cover;display:block}
.albumgrid .tile .more{position:absolute;inset:0;background:rgba(7,4,26,.65);color:var(--white);font-family:var(--num);font-size:22px;display:grid;place-items:center}
.msg.photo-only .albumgrid{margin:0}
/* ===== photo viewer: full screen, nothing covering the photo, pinch / double-tap / scroll to zoom ===== */
#lightbox{padding:0;background:rgba(0,0,0,.96);backdrop-filter:none;flex-direction:column;align-items:stretch;justify-content:stretch;z-index:30}
.lbbar,.lbfoot{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--white)}
.lbbar{justify-content:space-between;padding-top:calc(env(safe-area-inset-top) + 10px)}
.lbfoot{justify-content:center;padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
.lbcount{font-family:var(--tech);font-size:13px;color:var(--cyan);letter-spacing:1px;min-height:1em}
.lbbtns{display:flex;gap:10px;align-items:center}
.lbsave{height:44px;background:none;border:2px solid var(--cyan);color:var(--white);font:700 15px var(--body);padding:0 14px;cursor:pointer}
.lbclose{width:44px;height:44px;background:none;border:2px solid var(--cyan);color:var(--white);font-size:20px;line-height:1;padding:0}
.lbnav{width:52px;height:44px;background:rgba(7,4,26,.7);border:2px solid var(--cyan);color:var(--white);font-size:18px;padding:0}
.lbhint{flex:1;max-width:240px;text-align:center;font-size:13px;color:var(--muted)}
.lbstage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:zoom-in}
.lbstage.zoomed{cursor:grab}
#lightbox .lbstage img{max-width:100%;max-height:100%;border:none;box-shadow:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
#lightbox .lbstage img.ease{transition:transform .18s ease-out}
/* ===== habits, stats, quiz, social bonds ===== */
.statbars{display:grid;gap:10px;width:100%}
.statrow{display:flex;align-items:center;gap:10px}
.staticon{font-size:20px;flex:none;width:26px;text-align:center}
.statmid{flex:1;min-width:0;display:grid;gap:3px}
.statname{font-size:13px;color:var(--white);text-align:left}
.statbar{height:10px;border:2px solid var(--cyan);background:var(--deep)}
.statfill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--volt))}
.statnum{font-family:var(--num);font-size:16px;color:var(--volt);flex:none;width:28px;text-align:right}
.habitlist{display:grid;gap:8px;width:100%}
.habitrow{display:flex;align-items:center;gap:10px;border:2px solid #3b2d80;padding:8px 10px;background:rgba(0,0,0,.25)}
.habitrow.done{border-color:#2ee66b;background:rgba(46,230,107,.08)}
.habitchk{flex:none;width:30px;height:30px;border:2px solid var(--cyan);background:none;color:var(--volt);font-size:16px;border-radius:50%}
.habitrow.done .habitchk{background:#2ee66b;border-color:#2ee66b;color:#07041A}
.habitmid{flex:1;min-width:0;text-align:left}
.habitlabel{font-size:15px;color:var(--white)}
.habitmid small{color:var(--muted);font-size:12px}
.habitminus{flex:none;width:30px;height:30px;border:2px solid var(--mag);background:none;color:var(--mag);font-size:18px;line-height:1;border-radius:50%;padding:0}
.habitdel{flex:none;background:none;border:none;color:var(--mag);font-size:14px;padding:4px}
.habitform{display:grid;gap:8px;width:100%;border-top:2px dashed #3b2d80;padding-top:12px;margin-top:4px}
.habitform .row2{display:flex;gap:8px}
.habitform select,.habitform input[type="time"]{flex:1;background:var(--deep);border:2px solid var(--cyan);color:var(--white);padding:8px;font-family:var(--body)}
/* quiz */
/* one card at a time, with a progress trail and a snap-in/snap-out transition */
.quizdots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.quizdot{width:9px;height:9px;border-radius:50%;border:2px solid #3b2d80;background:none}
.quizdot.on{background:var(--volt);border-color:var(--volt);box-shadow:0 0 6px var(--volt)}
.quizdot.done{background:#3b2d80;border-color:#3b2d80}
.quizq{width:100%;text-align:left;margin-bottom:14px;animation:quizin .3s ease both}
.quizq-out{animation:quizout .35s ease both}
@keyframes quizin{from{opacity:0;transform:translateX(24px) rotate(2deg)}}
@keyframes quizout{to{opacity:0;transform:translateX(-24px) rotate(-2deg)}}
.quizqnum{font-family:var(--tech);font-size:11px;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.quizqtext{font-size:16px;color:var(--white);margin-bottom:10px;line-height:1.35}
.quizopts{display:grid;gap:8px}
.quizopt{background:var(--deep);border:2px solid #3b2d80;color:var(--white);padding:11px 14px;text-align:left;font-size:14px;transition:transform .15s,opacity .2s}
.quizopt:active:not(:disabled){transform:scale(.97)}
.quizopt.on{border-color:var(--volt);background:rgba(243,255,58,.15);box-shadow:3px 3px 0 var(--mag)}
.quizopt.fade{opacity:.25}
.quizopt:disabled{cursor:default}
/* shuffle suspense */
.quizshuffle{display:grid;justify-items:center;gap:14px;padding:30px 0}
.qs-cards{position:relative;width:90px;height:120px}
.qs-cards i{position:absolute;inset:0;border:3px solid var(--cyan);background:linear-gradient(135deg,var(--deep),#1a0f3d);border-radius:6px;box-shadow:0 0 12px rgba(0,240,255,.4)}
.qs-cards i::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:var(--volt)}
.qs-cards i:nth-child(1){animation:qsshuffle1 1.1s ease-in-out infinite}
.qs-cards i:nth-child(2){animation:qsshuffle2 1.1s ease-in-out infinite .12s}
.qs-cards i:nth-child(3){animation:qsshuffle3 1.1s ease-in-out infinite .24s}
@keyframes qsshuffle1{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-22px) rotate(-10deg)}}
@keyframes qsshuffle2{0%,100%{transform:translateY(0) rotate(0) scale(1)}50%{transform:translateY(-10px) rotate(3deg) scale(1.03)}}
@keyframes qsshuffle3{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(22px) rotate(10deg)}}
.quizresult{text-align:center;display:grid;gap:6px;justify-items:center}
.quizarcana{font-family:var(--num);font-size:40px;color:var(--volt);text-shadow:3px 3px 0 var(--night)}
.myarcana{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;padding:0;margin:4px 0 12px;cursor:pointer}
.myarcana:active .ma-name{transform:rotate(-2deg) scale(.96)}
.myarcana .ma-eyebrow{font-family:var(--tech);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
.myarcana .ma-name{display:inline-block;font-family:var(--num);font-size:30px;line-height:1.1;color:var(--volt);text-shadow:2px 2px 0 var(--night),0 0 14px rgba(243,255,58,.5);letter-spacing:.5px;transform:rotate(-2deg)}
/* social bond badge on friend rows + detail sheet */
.theirarcana{cursor:default;margin:0 0 4px}
.ta-flavor{font-size:13px;color:var(--muted);font-style:italic;margin-top:2px;max-width:26ch;text-align:center}
.personbond{background:none;border:1.5px solid var(--cyan);color:var(--cyan);font-family:var(--tech);font-size:11px;letter-spacing:.5px;padding:6px 10px;margin-bottom:4px}
.linkbadge{display:inline-flex;align-items:center;gap:4px;font-family:var(--tech);font-size:10px;color:var(--cyan);border:1px solid var(--cyan);padding:1px 6px;margin-left:6px}
.sllink{display:grid;gap:10px;text-align:center;justify-items:center}
.sl-eyebrow{font-family:var(--tech);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
.slarcananame{font-family:var(--num);font-size:34px;color:var(--volt);text-shadow:3px 3px 0 var(--night)}
.slrank{font-family:var(--tech);font-size:14px;color:var(--cyan)}
.slbar{width:100%;height:12px;border:2px solid var(--cyan);background:var(--deep)}
.slbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--volt))}
/* rank-up celebration */
.sl-rankup{position:absolute;inset:0;background:rgba(7,4,26,.55);animation:sxfadein .2s ease both}
.sl-card{position:absolute;left:50%;top:42%;width:min(84vw,340px);background:#07041A;border:5px solid var(--volt);box-shadow:10px 10px 0 var(--mag);padding:18px 26px;text-align:center;animation:sxslam 2.6s cubic-bezier(.2,1.4,.4,1) both}
.sl-rankt{font-family:var(--num);font-size:clamp(32px,11vw,52px);color:var(--volt)}
.sl-arcana{font-family:var(--num);font-size:clamp(20px,7vw,30px);color:#fff;margin-top:2px}
.sl-sub{font-family:var(--tech);font-size:13px;color:var(--cyan);margin-top:4px}
/* ===== full-screen Arcana reveal ===== */
.arcana-reveal{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(60,20,90,.55),rgba(7,4,26,.94));animation:sxfadein .3s ease both;perspective:1000px}
/* the drop-in entrance and the flip must NOT both animate `transform` on the same element —
   a fill-mode:both animation permanently pins transform and silently blocks a later transition
   from ever visually applying, even though the class change itself works. Split them: the outer
   wrapper handles the falling-in motion, the inner card handles only the flip. */
.arcana-drop{opacity:0;animation:arcanadropfade .7s cubic-bezier(.2,1.1,.4,1) both}
@keyframes arcanadropfade{from{transform:translateY(-50vh) rotate(-8deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
.arcana-card{position:relative;width:min(70vw,280px);aspect-ratio:.62;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.9,.4,1)}
.arcana-reveal.flip .arcana-card{transform:rotateY(180deg)}
.arcana-back,.arcana-front{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;border:4px solid var(--cyan)}
/* original NightLane card back: drawn in-house (sun, moons, stars), no third-party art */
.arcana-back{background:#07041A url("data:image/png;base64,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") center/cover no-repeat;image-rendering:pixelated;image-rendering:-moz-crisp-edges;box-shadow:0 0 22px rgba(0,240,255,.35)}
.arcana-front{background:linear-gradient(160deg,#1a0f3d,#07041A);transform:rotateY(180deg);display:grid;place-items:center;gap:14px;padding:20px;box-shadow:0 0 30px rgba(243,255,58,.35)}
.arcana-name{font-family:var(--num);font-size:clamp(28px,9vw,42px);color:var(--volt);text-shadow:3px 3px 0 var(--night);text-align:center}
.arcana-flavor{font-size:14px;color:var(--white);text-align:center;line-height:1.4;opacity:.9}
.arcana-actions{position:absolute;left:0;right:0;bottom:12%;display:grid;gap:8px;justify-items:center;opacity:0;animation:arcanaactin .5s ease .95s both}
@keyframes arcanaactin{to{opacity:1}}
.arcana-again{color:var(--cyan);background:none;border:none;font-size:13px;text-decoration:underline}
.arcana-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.arcana-burst i{position:absolute;left:0;top:0;width:4px;height:22px;background:var(--volt);box-shadow:0 0 8px var(--volt);transform:rotate(var(--a));transform-origin:50% 0;opacity:0}
.arcana-burst.go i{animation:arcanaspark .7s ease-out both}
@keyframes arcanaspark{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-120px)}}
.arcana-reveal{pointer-events:auto}
/* ===== arcana card art (Rider-Waite-Smith, public domain, pixelated + theme-recolored) ===== */
.arcana-art{width:62%;max-width:170px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;border:2px solid rgba(243,255,58,.4);box-shadow:0 0 16px rgba(0,240,255,.35)}
.slartimg{width:52%;max-width:140px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;border:2px solid rgba(0,240,255,.4);box-shadow:0 0 14px rgba(198,90,174,.4);margin:2px 0}
/* ===== what's new ===== */
.newsbody{display:grid;gap:14px;width:100%;text-align:left}
.newsrel{border-left:3px solid var(--cyan);padding:2px 0 2px 12px}
.newsrel.latest{border-left-color:var(--volt)}
.newsver{font-family:var(--tech);font-size:11px;letter-spacing:1px;color:var(--cyan);text-transform:uppercase}
.newsrel.latest .newsver{color:var(--volt)}
.newshead{font-family:var(--num);font-size:24px;color:var(--white);text-shadow:2px 2px 0 var(--mag);margin:2px 0 6px}
.newsitems{list-style:none;display:grid;gap:7px}
.newsitems li{font-size:16px;line-height:1.3;color:var(--white)}
.newsolder{font-family:var(--tech);font-size:11px;color:var(--muted)}
.xen-puff{position:absolute;bottom:-60px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(200,210,230,.55),rgba(177,140,255,.18) 55%,transparent 72%);filter:blur(2px);animation:xenpuff 3.2s ease-out forwards}
@keyframes xenpuff{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:1}100%{transform:translateY(-75vh) scale(2.2);opacity:0}}
.xen-cap{position:absolute;left:0;right:0;top:38%;text-align:center;color:#7CFF6B;animation:sxflash 2.6s ease both}
/* ===== iPhone: no auto-zoom when tapping a text box (iOS zooms into anything under 16px) ===== */
@supports (-webkit-touch-callout: none){
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),textarea,select{font-size:max(16px,1em)!important}
}
/* ===== update-ready bar ===== */
.updatebar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 86px);transform:translateX(-50%) rotate(-1deg);z-index:35;max-width:calc(100% - 24px);
  background:var(--volt);color:var(--night);border:3px solid var(--night);box-shadow:5px 5px 0 var(--mag);font-family:var(--tech);font-size:13px;padding:10px 16px;white-space:nowrap;animation:toastin .35s cubic-bezier(.2,1.5,.4,1) both}
.updatebar b{text-decoration:underline}
.updatebar.pushnudge{bottom:calc(env(safe-area-inset-bottom) + 140px)}
/* ===== media backlog ===== */
.bltabs{width:100%}
.bltabs button{white-space:nowrap;font-size:clamp(14px,4.4vw,18px)}
/* five tabs (Library + Games/Anime/TV/Movies) must fit inside the sheet: equal columns, text shrinks instead of pushing the sheet wider */
.bltabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px!important}
.bltabs button{min-width:0;padding:8px 1px!important;font-size:clamp(11px,3.5vw,16px)!important;letter-spacing:0!important;overflow:hidden;text-overflow:ellipsis}
#backlogSheet .sheetbody>*{min-width:0;max-width:100%}
@media (max-width:350px){.bltabs button{font-size:10px!important}}
.blbody{width:100%;text-align:left;display:grid;gap:12px}
.blstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.blstat{display:grid;justify-items:center;border:2px solid #3b2d80;padding:6px 2px;background:rgba(0,0,0,.25)}
.blstat b{font-family:var(--num);font-size:20px;color:var(--volt);font-weight:400}
.blstat span{font-family:var(--tech);font-size:clamp(7px,2.3vw,9px);letter-spacing:.3px;white-space:nowrap;color:var(--muted);text-transform:uppercase;text-align:center}
.blfilters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.blfilters .field{grid-column:1/-1;font-size:15px;padding:9px 12px}
.blsel{min-width:0;width:100%;-webkit-appearance:none;appearance:none;color-scheme:dark;background:var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300F0FF'/%3E%3C/svg%3E") no-repeat right 8px center/9px 6px;color:var(--white);border:2px solid #3b2d80;border-radius:0;padding:7px 22px 7px 8px;font-family:var(--body);font-size:14px;text-overflow:ellipsis}
.bllist{display:grid;gap:10px}
.blviewrow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.blviewrow .blcount{font-family:var(--tech);font-size:11px;color:var(--muted)}
.blview{display:inline-flex;border:2px solid var(--cyan)}
.blview button{background:none;border:none;color:var(--cyan);font-family:var(--tech);font-size:11px;padding:5px 10px;cursor:pointer}
.blview button[aria-pressed="true"]{background:var(--cyan);color:var(--night)}
.bllist.blgrid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.bltile{position:relative;aspect-ratio:2/3;border:2px solid #3b2d80;background:linear-gradient(160deg,var(--deep),var(--night));padding:0;overflow:hidden;cursor:pointer;color:var(--white);font:inherit;display:block;width:100%}
.bltile:hover,.bltile:focus-visible{border-color:var(--cyan)}
.bltile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bltile .bt-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;text-align:center;font-size:12px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.bltile .bt-ph b{font-size:24px}
.bltile .bt-badge{position:absolute;top:3px;left:3px;font-family:var(--tech);font-size:9px;padding:2px 4px;background:var(--night);color:var(--cyan);border:1px solid var(--cyan)}
.bltile.done .bt-badge{background:var(--cyan);color:var(--night)}
.bltile .bt-stars{position:absolute;left:0;right:0;bottom:0;font-size:11px;letter-spacing:-1px;color:var(--volt);background:linear-gradient(transparent,rgba(0,0,0,.85));padding:10px 4px 3px;text-align:left}
#backlogSheet.blwide .sheet{width:min(100%,860px)}
#blPeek .sheet{width:min(100%,420px)}
#blPeekBody{width:100%;text-align:left}
.blimport{display:grid;gap:10px}
.blimport ol{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px}
.blimport .blsum{border:2px solid var(--cyan);padding:10px;background:rgba(0,240,255,.06);font-size:14px;display:grid;gap:6px}
.blimport .blsum b{color:var(--volt)}
.blcard{display:flex;gap:10px;border:2px solid #3b2d80;background:rgba(7,4,26,.7);padding:8px;align-items:flex-start}
.blcard.done{border-color:rgba(46,230,107,.55)}
.blcover,.blposter{flex:none;object-fit:cover;border:2px solid var(--cyan);background:#000}
.blcover{width:84px;height:48px}
.blposter{width:52px;height:74px}
.blmid{flex:1;min-width:0;display:grid;gap:4px}
.bltop{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bltype{font-family:var(--tech);font-size:9px;letter-spacing:.5px;padding:1px 6px;border:1.5px solid var(--cyan);color:var(--cyan)}
.bltype.anime{border-color:var(--mag);color:#e8a3d8}
.blplat{font-size:12px;color:var(--muted)}
.blname{font-size:17px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.blprog{font-size:13px;color:var(--muted)}
.blstars{display:flex;gap:2px}
.blstar{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:0 1px;cursor:pointer}
.blstar.on{color:var(--volt);text-shadow:0 0 6px rgba(243,255,58,.5)}
.blstar:disabled{cursor:default;opacity:1}
.blstars.ro{font-size:18px;letter-spacing:1px;color:var(--volt);text-shadow:0 0 6px rgba(243,255,58,.4)}
.me .blmsg .blstars.ro{color:inherit;text-shadow:none}
.blactions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.blactions .blsel{flex:1 1 118px;width:auto}
.blbtn{background:var(--deep);border:2px solid var(--cyan);color:var(--cyan);font-family:var(--tech);font-size:11px;padding:6px 9px;cursor:pointer}
.blbtn:disabled{opacity:.4;cursor:default}
.blbtn.add{background:var(--cyan);color:var(--night)}
.blbtn.bldel{border-color:var(--muted);color:var(--muted)}
.blbtn.bllock.on{background:var(--mag);border-color:var(--mag);color:var(--night);font-weight:700}
.blstatus{font-family:var(--tech);font-size:11px;color:var(--cyan)}
.blstatus.completed{color:#2ee66b}.blstatus.planned{color:var(--muted)}
.blsearch{display:flex;gap:6px}
.blsearch .field{flex:1;min-width:0;font-size:15px;padding:9px 12px}
.blresult{display:flex;gap:10px;align-items:center;border:2px solid #3b2d80;padding:6px;background:rgba(7,4,26,.7)}
.blresult .blmid{gap:2px}
.blresult .blname{font-size:15px}
.blmanual{border-top:2px dashed #3b2d80;padding-top:10px;display:grid;gap:6px}
.blmanual summary{font-family:var(--tech);font-size:12px;color:var(--cyan);cursor:pointer}
.blmanual .row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.blmanual .field{font-size:15px;padding:8px 10px}
.blsharelist{width:100%;max-height:50dvh;overflow-y:auto}
/* shared card in chat */
.blmsg{display:flex;gap:10px;align-items:flex-start;min-width:220px;max-width:280px}
.blmsg img{flex:none;width:64px;height:88px;object-fit:cover;border:2px solid var(--cyan);background:#000}
.blmsg img.wide{width:96px;height:56px}
.blmsg .blmid{gap:3px}
.blnote{margin-top:8px;font-size:17px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;max-width:280px}
.blnoteprev{display:flex;justify-content:center;padding:8px;border:2px solid #3b2d80;background:rgba(0,0,0,.25)}
.blmsg .bleye{font-family:var(--tech);font-size:9px;letter-spacing:.5px;opacity:.85}
.blmsg .blname{font-size:16px}
.blmsg .blstars{pointer-events:none}
.blmsg .blbtn{justify-self:start;margin-top:4px}
/* ===== pop-ups always fit the screen; longer ones wrap instead of running off the edge ===== */
.toasts{grid-template-columns:minmax(0,1fr)}
.toast{max-width:100%;box-sizing:border-box}
.toast .ttext{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.toast.missed-secret .ttext,.toast.long .ttext{-webkit-line-clamp:4;line-clamp:4}
.toast .ttitle{white-space:normal;overflow-wrap:anywhere}
.missed-actions button{min-width:0}
/* ===== offline ===== */
.offlinebar{display:flex;align-items:center;gap:8px;background:var(--night);border:2px solid #ffcf3d;box-shadow:4px 4px 0 var(--mag);padding:8px 12px;font-size:15px;color:var(--white);transform:rotate(-1deg)}
.offlinebar span{flex:1;min-width:0}
/* ===== new-messages pill (shown when you're scrolled up and something arrives) ===== */
.newpill{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) rotate(-2deg);z-index:6;background:var(--volt);color:var(--night);border:3px solid var(--night);box-shadow:4px 4px 0 var(--mag);font-family:var(--tech);font-size:13px;padding:8px 14px;white-space:nowrap;cursor:pointer;animation:toastin .3s cubic-bezier(.2,1.5,.4,1) both}
#sendForm{position:relative}
/* while typing, camera + mic tuck away so the text box gets the room */
.compose.typing #pickBtn,.compose.typing #micBtn{display:none}
/* ===== forgot password + recovery code ===== */
.fpblock{width:100%;border-top:2px dashed #3b2d80;padding-top:10px;display:grid;gap:8px;text-align:left}
.fpblock h3{font-family:var(--tech);font-size:13px;letter-spacing:.5px;color:var(--cyan);margin:0}
#forgotSheet label{font-family:var(--tech);font-size:12px;color:var(--cyan);text-align:left;width:100%}
.fpsmall{font-size:15px!important;padding:8px 12px!important;justify-self:start}
.fphint{font-size:18px;color:var(--volt);min-height:0;margin:0;overflow-wrap:anywhere}
.rccode{display:flex;flex-direction:column;align-items:center;gap:8px;border:3px solid var(--volt);box-shadow:5px 5px 0 var(--mag);padding:12px 14px;background:var(--night)}
.rccode .fpsmall{align-self:center;justify-self:center}
.rccode code{font-family:var(--tech);font-size:clamp(15px,4.6vw,21px);letter-spacing:.5px;white-space:nowrap;color:var(--volt);user-select:all}
/* ===== backlog progress editor ===== */
.bledit{background:none;border:none;padding:0;text-align:left;cursor:pointer;color:var(--cyan);text-decoration:underline dotted;text-underline-offset:3px;font:inherit;font-size:13px}
.blpedit{display:grid;gap:8px;border:2px solid var(--cyan);padding:8px;margin-top:4px;background:rgba(0,240,255,.06)}
.blprow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.blpnum{width:64px!important;min-width:0;padding:6px 8px!important;font-size:16px!important;text-align:center}
.blpof{font-family:var(--tech);font-size:11px;color:var(--muted)}
.blquick .blbtn.add{margin-left:auto}
.blprow:first-child>.blbtn{font-size:20px;min-width:40px;padding:2px 10px;line-height:1.2}
/* ===== spoiler photos ===== */
.spoilerbtn{display:block;margin:0 0 8px;background:var(--deep);border:2px solid #3b2d80;color:var(--white);font-family:var(--tech);font-size:12px;padding:7px 12px;cursor:pointer}
.spoilerbtn.on{border-color:var(--volt);color:var(--volt);box-shadow:3px 3px 0 var(--mag)}
.spoiler{position:relative;overflow:hidden}
.spoiler img{filter:blur(24px) saturate(.7);transform:scale(1.08)}
.spoiler canvas.pixels{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;opacity:0;pointer-events:none}
.spoiler canvas.pixels.ready{opacity:1}
.albumgrid.spoiler .tile{position:relative;overflow:hidden}
.spoilerlabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:var(--night);color:var(--volt);border:2px solid var(--volt);box-shadow:3px 3px 0 var(--mag);font-family:var(--tech);font-size:12px;padding:6px 10px;white-space:nowrap;pointer-events:none;z-index:2}
/* ===== Crazy Eights ===== */
.e8card{display:inline-grid;place-items:center;align-content:center;width:52px;height:74px;background:#f4f7ff;color:#07041a;border:2px solid #07041a;border-radius:6px;box-shadow:3px 3px 0 var(--mag);font-family:var(--num);line-height:1;gap:2px;user-select:none}
.e8card b{font-size:22px;font-weight:400}.e8card i{font-style:normal;font-size:20px}
.e8card.red{color:#d81b3c}