/* ===== secrets pack 2 ===== */
.sx-ship{position:absolute;left:10%;top:70%;width:min(46vw,200px);animation:sxfly 5.2s cubic-bezier(.55,0,.8,.6) .4s both;filter:drop-shadow(0 0 12px rgba(0,240,255,.5))}
@keyframes sxfly{0%{transform:translate(0,0) rotate(-24deg) scale(1.2);opacity:0}8%{opacity:1}100%{transform:translate(70vw,-70vh) rotate(-24deg) scale(.05);opacity:.8}}
.sx-flame{animation:sxflicker .12s linear infinite alternate}
@keyframes sxflicker{to{opacity:.55}}
.sx-easycap{position:absolute;left:0;right:0;bottom:22%;text-align:center;color:#F4F7FF;font-weight:700;letter-spacing:2px;animation:sxflash 5.4s ease both}
.sx-lumos{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95) 0,rgba(210,235,255,.75) 25%,rgba(140,190,255,.35) 55%,rgba(40,80,160,0) 80%);mix-blend-mode:screen;animation:sxlumos 4.2s ease both}
@keyframes sxlumos{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.05)}30%{transform:scale(1)}50%{opacity:.85}65%{opacity:1}100%{opacity:0}}
.sx-spark{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;box-shadow:0 0 12px 4px rgba(170,215,255,.9);animation:sxsparkle 1.4s ease-in-out both}
@keyframes sxsparkle{0%,100%{opacity:0;transform:scale(.2)}50%{opacity:1;transform:scale(1.2)}}
#chat.sx-bright{animation:sxbright 4.2s ease both}
@keyframes sxbright{20%,70%{filter:brightness(1.35) saturate(.6) hue-rotate(-10deg)}100%{filter:none}}
.sx-d20{position:absolute;left:50%;top:42%;width:min(44vw,180px);transform:translate(-50%,-50%);animation:sxtumble .9s cubic-bezier(.3,1.4,.5,1) both}
.sx-d20 svg{width:100%;filter:drop-shadow(7px 7px 0 var(--mag))}
.sx-dnum{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;font-family:var(--num);font-size:clamp(40px,13vw,64px);color:var(--volt);text-shadow:3px 3px 0 #07041A}
.sx-d20.landed{animation:sxland .4s cubic-bezier(.2,1.8,.4,1) both}
/* pixel dice (art by LullabyJazz, restyled in NightLane colors) */
.pxdie{display:inline-block;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges;vertical-align:middle;flex:none}
.sx-d20.pxroll{width:auto;display:flex;gap:10px;align-items:flex-end;justify-content:center}
.sx-d20.pxroll .pxdie{filter:drop-shadow(6px 6px 0 var(--mag)) drop-shadow(0 0 12px rgba(0,240,255,.35))}
.sx-d20.pxroll.landed .pxdie{filter:drop-shadow(6px 6px 0 var(--mag)) drop-shadow(0 0 18px rgba(243,255,58,.55))}
.sx-d20.pxroll .dn-label{bottom:-28px}
@keyframes sxtumble{from{transform:translate(-50%,-160%) rotate(-540deg) scale(.4)}to{transform:translate(-50%,-50%) rotate(0) scale(1)}}
@keyframes sxland{50%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
.sx-dcap{position:absolute;left:0;right:0;top:62%;text-align:center;animation:sxflash 1.8s ease both}
.d20chip{margin-top:6px;font-family:var(--tech);font-size:12px;display:inline-block;padding:3px 8px;background:rgba(0,0,0,.35);border:1.5px solid var(--cyan)}
.dchipic{height:18px;width:auto;vertical-align:-4px;margin-right:5px}
.d20chip.nat20{border-color:var(--volt);color:var(--volt)}
.d20chip.nat1{border-color:var(--red);color:var(--red)}
.face.sx-godly .fi{animation:sxgodly 1s ease-in-out 4;box-shadow:0 0 0 3px #FFD86B,0 0 28px 8px rgba(255,216,107,.8)}
.face.sx-godly::after{content:"๐";position:absolute;left:50%;top:-.9em;transform:translateX(-50%);font-size:max(14px,.6em);filter:drop-shadow(0 0 6px #FFD86B);z-index:3}
@keyframes sxgodly{50%{filter:brightness(1.6) saturate(1.4);box-shadow:0 0 0 4px #fff3c4,0 0 44px 14px rgba(255,216,107,.95)}}
.sx-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,216,107,.22) 0 6deg,transparent 6deg 18deg);animation:sxrays 3.2s ease both}
@keyframes sxrays{0%{opacity:0;transform:rotate(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(40deg)}}
.toast.sx-crown{border-color:#FFD86B;box-shadow:5px 5px 0 #b8860b}
.toast.sx-crown .ttitle{color:#FFD86B}
.sx-zcap{position:absolute;left:0;right:0;top:16%;text-align:center;color:#b6ff8a;animation:sxflash 2.5s ease both}
.sx-wendigo{position:absolute;inset:0;z-index:-1;pointer-events:none;animation:sxwendigo 2.4s steps(1,end) both}
.sx-wendigo svg{width:100%;height:100%}
.sx-wendigo .sx-eye{animation:sxeye .9s ease-in-out infinite alternate}
@keyframes sxeye{to{r:3.4;fill:#ffeded}}
@keyframes sxwendigo{0%{opacity:0}6%{opacity:.9}9%{opacity:0}13%{opacity:1}60%{opacity:1}63%{opacity:0}66%{opacity:1}69%{opacity:0}72%{opacity:.8}75%{opacity:0}100%{opacity:0}}
.sx-redvig{position:absolute;inset:0;background:radial-gradient(circle,transparent 45%,rgba(255,20,40,.45));animation:sxpulse .75s ease-in-out infinite alternate}
@keyframes sxpulse{from{opacity:.25}to{opacity:1}}
.sx-emf{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-3deg);width:min(78vw,300px);background:#111317;border:4px solid #3a3f4a;border-radius:10px;box-shadow:8px 8px 0 #07041A;padding:14px;text-align:center;animation:sxfadein .3s ease both}
.sx-emftitle{font-family:var(--tech);font-size:12px;color:#9aa3b5;letter-spacing:3px}
.sx-leds{display:flex;gap:6px;justify-content:center;margin:12px 0}
.sx-leds i{width:34px;height:18px;border-radius:3px;background:#222;border:2px solid #000}
.sx-leds i.on.l1,.sx-leds i.on.l2{background:#39ff6a;box-shadow:0 0 10px #39ff6a}
.sx-leds i.on.l3{background:#ffe34a;box-shadow:0 0 10px #ffe34a}
.sx-leds i.on.l4{background:#ff9a2e;box-shadow:0 0 10px #ff9a2e}
.sx-leds i.on.l5{background:#ff2a3a;box-shadow:0 0 14px #ff2a3a}
.sx-emfread{font-family:var(--num);font-size:34px;color:#e9edf5}
.sx-emfalert{font-family:var(--tech);font-weight:900;font-size:13px;color:#ff2a3a;margin-top:6px;opacity:0}
.sx-emf.max{animation:sxjitter .06s linear 20}
.sx-emf.max .sx-emfalert{opacity:1;animation:sxblink .3s steps(1) infinite}
@keyframes sxblink{50%{opacity:.2}}
.sx-wendigo{background:#020204}
#chat.sx-see .feed,#chat.sx-see .typing{animation:sxsee 2.4s steps(1,end) both}
@keyframes sxsee{0%{opacity:1}13%{opacity:.12}63%{opacity:1}66%{opacity:.12}69%{opacity:1}72%{opacity:.12}75%{opacity:1}}
/* ===== secrets pack 3 ===== */
.px-allbg{background:repeating-linear-gradient(-55deg,rgba(232,24,43,.7) 0 40px,rgba(7,4,26,.85) 40px 80px)}
.px-slash{position:absolute;left:-20%;width:140%;height:26px;background:#F4F7FF;border-top:6px solid #07041A;border-bottom:6px solid #E8182B;transform:rotate(-18deg) translateX(-120%);animation:pxslash .5s cubic-bezier(.7,0,.3,1) forwards}
@keyframes pxslash{to{transform:rotate(-18deg) translateX(120%)}}
.px-sil{position:absolute!important;left:-80px;width:64px;height:64px;animation:pxleap .9s cubic-bezier(.5,0,.3,1) both}
.px-sil .fi{filter:brightness(0) drop-shadow(0 0 0 #fff);background:#07041A!important}
@keyframes pxleap{0%{transform:translateX(0) rotate(-30deg) scale(.6)}50%{transform:translateX(60vw) translateY(-40px) rotate(10deg) scale(1.3)}100%{transform:translateX(120vw) rotate(40deg) scale(.8)}}
.px-card{position:absolute;left:50%;top:-40%;width:min(78vw,300px);background:#07041A;border:5px solid #E8182B;box-shadow:10px 10px 0 #F4F7FF;padding:16px 12px;text-align:center;transform:translateX(-50%) rotate(-8deg);animation:pxfall 1.2s cubic-bezier(.3,1.3,.5,1) forwards}
.px-card.snatch{animation:pxsnatch .6s cubic-bezier(.7,0,.9,.4) forwards}
@keyframes pxfall{to{top:28%;transform:translateX(-50%) rotate(-4deg)}}
@keyframes pxsnatch{from{top:28%;transform:translateX(-50%) rotate(-4deg)}to{top:-60%;transform:translateX(-50%) rotate(30deg) scale(.6)}}
.px-cardtop,.px-cardsig{font-family:var(--tech);font-size:11px;color:#E8182B;letter-spacing:2px}
.px-letters{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin:12px 0}
.px-letters b{font-family:var(--num);font-size:30px;padding:0 5px;transform:rotate(var(--r));border:2px solid #07041A}
.px-letters .sp{width:12px}
.px-flames{position:absolute;inset:auto 0 0 0;height:55%}
.px-flames i{position:absolute;bottom:-20px;width:34px;height:60px;border-radius:50% 50% 20% 20%;background:radial-gradient(circle at 50% 70%,#fff 0,#7fd4ff 25%,#2c6bff 55%,rgba(20,40,160,0) 75%);transform:scale(var(--s));animation:pxflame 1.2s ease-out infinite;mix-blend-mode:screen}
@keyframes pxflame{0%{opacity:0;transform:translateY(0) scale(var(--s))}30%{opacity:1}100%{opacity:0;transform:translateY(-55vh) scale(calc(var(--s)*.4))}}
.px-mask{position:absolute;left:50%;top:38%;width:min(40vw,160px);height:min(26vw,100px);transform:translate(-50%,-50%)}
.px-mask span{position:absolute;inset:0;background:#F4F7FF;border:4px solid #07041A;transition:transform .9s cubic-bezier(.2,.8,.3,1),opacity .9s}
.px-mask.shatter span{transform:translate(var(--tx),var(--ty)) rotate(var(--r));opacity:0}
.px-velvet{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#1b3a9e,#07103a 60%,#030616);animation:sxflash 3.8s ease both;display:grid;place-items:center}
.px-beam{position:absolute;left:50%;bottom:0;width:120px;height:100%;transform:translateX(-50%);background:linear-gradient(0deg,rgba(120,170,255,.5),transparent);animation:pxbeam 3.8s ease both}
@keyframes pxbeam{from{transform:translateX(-50%) scaleY(0);transform-origin:bottom}to{transform:translateX(-50%) scaleY(1)}}
.px-velvet .sx-caption{color:#bcd2ff;font-style:italic;letter-spacing:3px;position:relative}
.px-tv{position:absolute;left:50%;top:40%;width:min(80vw,320px);aspect-ratio:4/3;transform:translate(-50%,-50%);border:10px solid #1a1a1a;border-radius:18px;box-shadow:0 0 0 4px #444,10px 10px 0 #07041A;overflow:hidden;background:#ffd84a;animation:sxflash 3.2s ease both;text-align:center}
.px-tv canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;mix-blend-mode:multiply}
.px-sil2{position:absolute;left:50%;bottom:0;width:36%;height:70%;transform:translateX(-50%);background:radial-gradient(circle at 50% 18%,#211 0 18%,transparent 19%),linear-gradient(#211,#211) 50% 100%/70% 62% no-repeat;animation:pxflick .18s steps(2) infinite}
@keyframes pxflick{50%{opacity:.35}}
.px-tv .sx-caption{position:absolute;left:0;right:0;top:6px;color:#07041A;text-shadow:none;font-size:13px}
#chat.px-green{animation:pxgreen 4.2s ease both}
@keyframes pxgreen{15%,85%{filter:sepia(.6) hue-rotate(60deg) saturate(1.8) brightness(.75)}}
.px-dark{position:absolute;inset:0;display:grid;place-items:center;animation:sxflash 4.2s ease both}
.px-bigmoon{position:absolute;top:8%;width:min(70vw,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f5ffe0,#b9d98a 60%,#6f8f4a);box-shadow:0 0 80px 30px rgba(190,230,140,.45);animation:pxgrow 4.2s ease both}
@keyframes pxgrow{from{transform:scale(.4)}to{transform:scale(1.15)}}
.px-clock{position:absolute;bottom:26%;font-family:var(--num);font-size:clamp(50px,18vw,90px);color:#d8ffb0;text-shadow:0 0 20px #7cff6b}
.px-rank{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-5deg);background:#07041A;border:5px solid var(--volt);box-shadow:10px 10px 0 var(--mag);padding:16px 22px;text-align:center;animation:sxslam 2.5s cubic-bezier(.2,1.4,.4,1) both}
.px-rankt{font-family:var(--num);font-size:clamp(40px,14vw,70px);color:var(--volt)}
.px-stars i{font-style:normal;font-size:22px;color:#333;animation:pxstar .3s ease forwards}
@keyframes pxstar{to{color:var(--volt);text-shadow:0 0 8px var(--volt)}}
.msg.px-baton{animation:pxbaton 1.1s cubic-bezier(.5,0,.3,1)!important}
@keyframes pxbaton{40%{transform:rotate(360deg) translateX(-40px)}100%{transform:rotate(360deg)}}
.px-swoosh{position:absolute;left:0;top:46%;font-family:var(--num);font-size:clamp(36px,12vw,60px);color:#F4F7FF;background:#E8182B;padding:0 20px;border:4px solid #07041A;white-space:nowrap;animation:pxswoosh 1.3s cubic-bezier(.6,0,.3,1) both}
@keyframes pxswoosh{from{transform:translateX(-110%) skewX(-20deg)}40%,60%{transform:translateX(10vw) skewX(-10deg)}to{transform:translateX(120vw) skewX(-20deg)}}
#chat.px-mirror{animation:pxmirror 1.8s ease both}
@keyframes pxmirror{25%,75%{transform:scaleX(-1)}}
.px-center{position:absolute;left:0;right:0;top:44%;text-align:center;animation:sxflash 1.8s ease both}
/* ===== October 3rd ===== */
.o3-scene{position:absolute;inset:0;animation:o3scene 9.2s ease both}
.o3-sky{position:absolute;inset:0;background:linear-gradient(180deg,#05030f 0%,#0d0a2a 45%,#2a1640 75%,#5a2a3a 100%)}
.o3-stars{position:absolute;inset:0;background:var(--nightsky) center/cover;opacity:.85}
.o3-part{position:absolute;left:50%;transform:translateX(-50%);display:flex;justify-content:center}
.o3-one{top:50%;width:min(56vw,230px);margin-top:calc(min(56vw,230px) * -0.82);animation:o3one 4.6s ease both}
.o3-watch{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(0,240,255,.25)) drop-shadow(6px 6px 0 #07041A)}
.o3-lid{transform-box:fill-box;transform-origin:50% 100%;animation:o3lid 1.2s .5s cubic-bezier(.2,1.3,.4,1) both}
.o3-scratch{opacity:0;animation:o3fade .9s 1.5s ease both}
.o3-hand{transform-box:view-box;transform-origin:100px 242px;animation:o3tick 4s steps(4) .4s infinite}
.o3-two{bottom:0;width:min(60vw,270px);opacity:0;animation:o3two 4.8s 4.2s ease both}
.o3-arm{width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(0,240,255,.35))}
.o3-cap{position:absolute;left:0;right:0;top:16%;text-align:center;font-family:var(--tech);font-size:clamp(18px,5.5vw,28px);letter-spacing:4px;color:#F4F7FF;text-shadow:0 0 12px rgba(0,240,255,.6),2px 2px 0 #07041A;opacity:0;animation:o3cap 3s 6s ease both}
@keyframes o3scene{0%{opacity:0}6%{opacity:1}92%{opacity:1}100%{opacity:0}}
@keyframes o3one{0%{opacity:0;transform:translateX(-50%) translateY(30px) scale(.9)}12%{opacity:1;transform:translateX(-50%)}82%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%) scale(.96)}}
@keyframes o3lid{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes o3fade{to{opacity:1}}
@keyframes o3tick{to{transform:rotate(24deg)}}
@keyframes o3two{0%{opacity:0;transform:translateX(-50%) translateY(70%) rotate(-6deg)}30%{opacity:1}65%{transform:translateX(-50%) translateY(0) rotate(2deg)}100%{opacity:1;transform:translateX(-50%) translateY(-2%) rotate(0)}}
@keyframes o3cap{0%{opacity:0;transform:translateY(8px)}30%{opacity:1;transform:none}100%{opacity:1}}
.px-shades{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:max(18px,.9em);animation:pxdrop .5s cubic-bezier(.3,1.6,.5,1) both;z-index:4;filter:drop-shadow(0 0 4px #fff)}
@keyframes pxdrop{from{transform:translate(-50%,-160%) rotate(-30deg);opacity:0}}
.px-nixie{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#0b0604;border:4px solid #3a2410;border-radius:8px;box-shadow:0 0 40px rgba(255,120,30,.35),8px 8px 0 #07041A;padding:14px 12px;text-align:center;animation:sxfadein .3s ease both}
.px-tubes{display:flex;gap:4px}
.px-tube{width:clamp(26px,8vw,38px);height:clamp(44px,13vw,62px);display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-size:clamp(26px,8vw,40px);color:#ffb35c;background:radial-gradient(circle at 50% 40%,rgba(255,140,40,.18),rgba(0,0,0,.6));border:2px solid #2a1a0c;border-radius:6px 6px 3px 3px;text-shadow:0 0 6px #ff7a1a,0 0 14px #ff4d00;opacity:.8}
.px-tube.set{opacity:1;color:#ffd08a}
.px-tube.dot{width:12px;border:none;background:none}
.px-nixie .sx-caption{color:#ffb35c;font-size:13px}
.wlchip{border-color:#ff9a3d;color:#ffcf99}
.px-star{position:absolute;left:50%;top:45%;font-size:26px;animation:pxstarburst 1.2s cubic-bezier(.2,.8,.3,1) both}
@keyframes pxstarburst{from{transform:translate(-50%,-50%) scale(.2)}to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(200deg);opacity:0}}
.msg.px-dmail .bubble{animation:sxglitch .9s steps(2,end) 2}
#chat.px-rewind{animation:pxrewind 2s ease both}
@keyframes pxrewind{20%{filter:blur(2px) hue-rotate(90deg);transform:translateY(-20px)}50%{filter:blur(3px) invert(.15);transform:translateY(30px)}80%{filter:blur(1px);transform:translateY(-6px)}100%{filter:none;transform:none}}
.px-backclock .m{transform-origin:50px 50px;animation:pxback .5s linear 4}
.px-backclock .h{transform-origin:50px 50px;animation:pxback 2s linear}
@keyframes pxback{to{transform:rotate(-360deg)}}
.px-backclock{animation:sxflash 2s ease both}
.px-call{position:absolute;inset:0;background:linear-gradient(#2a0006,#07041A);display:grid;place-content:center;text-align:center;gap:14px;animation:sxfadein .3s ease both}
.px-caller{font-family:var(--tech);font-weight:900;font-size:clamp(18px,6vw,26px);color:#ff3b4a;animation:sxblink .5s steps(1) infinite}
.px-ring{font-size:18px;color:#ddd}
.px-callbtns{display:flex;gap:60px;justify-content:center;font-size:30px}
.px-callbtns span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#ff3b4a;color:#fff}
.px-callbtns span+span{background:#2ecc71;animation:sxjitter .1s linear infinite}
.px-call.ended .px-caller,.px-call.ended .px-callbtns span{animation:none;opacity:.5}
.px-coat{position:absolute;top:18%;left:-60%;width:min(60vw,240px);animation:pxcoat 1.4s cubic-bezier(.5,0,.3,1) both;filter:drop-shadow(8px 8px 0 var(--mag))}
@keyframes pxcoat{0%{transform:rotate(-30deg)}50%{left:25%;transform:rotate(8deg) scaleX(1.2)}100%{left:130%;transform:rotate(20deg)}}
.px-fwah{background:#F4F7FF!important;color:#07041A!important;text-shadow:3px 3px 0 var(--mag)!important}
#chat.px-micro{animation:pxmicro 2.4s linear both}
@keyframes pxmicro{0%{filter:none;transform:rotate(0)}10%,90%{filter:sepia(.5) saturate(2) hue-rotate(-20deg) brightness(1.1)}100%{transform:rotate(360deg);filter:none}}
.px-ding{font-size:clamp(50px,18vw,100px);color:var(--volt);text-shadow:4px 4px 0 #07041A}
.msg.px-dust{animation:pxdust 1.2s ease-in forwards!important}
.msg.px-undust{animation:pxundust .6s ease-out both!important}
@keyframes pxdust{to{opacity:0;filter:blur(6px) sepia(1);transform:translate(40px,-30px) skewX(20deg)}}
@keyframes pxundust{from{opacity:0;filter:blur(6px)}}
.px-f{position:absolute;bottom:-60px;font-family:var(--num);color:var(--cyan);text-shadow:3px 3px 0 var(--mag);animation:pxfloat 2.6s ease-out both}
@keyframes pxfloat{to{transform:translateY(-110vh) rotate(20deg);opacity:0}}
.px-ach{position:absolute;left:50%;top:14%;display:flex;align-items:center;gap:12px;transform:translateX(-50%);background:#101418;border:3px solid #6f7b8a;border-radius:40px;padding:8px 20px 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.6);animation:pxach 3.2s cubic-bezier(.3,1.3,.5,1) both;min-width:min(86vw,300px)}
.px-achicon{width:48px;height:48px;border-radius:50%;background:#1f2a36;display:grid;place-items:center;font-size:26px;border:2px solid #9aa4b3}
.px-ach small{display:block;font-family:var(--tech);font-size:9px;color:#9aa4b3;letter-spacing:1px}
.px-ach b{font-size:17px;color:#fff}
@keyframes pxach{0%{transform:translate(-50%,-150%)}12%,85%{transform:translate(-50%,0)}100%{transform:translate(-50%,-150%)}}
.px-combo{position:absolute;right:6%;top:30%;font-family:var(--num);font-size:clamp(34px,11vw,56px);color:var(--volt);text-shadow:3px 3px 0 #07041A,-2px 0 var(--mag);transform:rotate(-10deg);animation:sxslam 1.1s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap}
.px-combo b{color:#fff}
.px-owl{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#07041A;border:3px solid var(--volt);padding:10px 14px;box-shadow:6px 6px 0 var(--mag);animation:sxflash 4.2s ease both;width:max-content;max-width:90vw}
.px-owlface{font-size:36px;animation:sxwink 1.3s ease 2}
.px-credits{position:absolute;inset:0;background:rgba(3,2,10,.94);overflow:hidden;animation:sxfadein .6s ease both;cursor:pointer}
.px-roll{position:absolute;left:0;right:0;top:100%;text-align:center;animation:pxroll 13s linear forwards}
.px-roll h1{font-family:var(--num);font-size:56px;color:var(--white);text-shadow:-3px 0 var(--cyan),4px 4px var(--mag)}
.px-roll h2{font-family:var(--tech);font-size:13px;color:var(--cyan);margin-top:34px;letter-spacing:3px}
.px-roll p{font-size:22px;color:var(--white);margin-top:6px}
.px-roll .px-end{margin-top:60px;color:var(--volt)}
@keyframes pxroll{to{transform:translateY(-230%)}}
.px-drift{position:absolute;top:-60px;animation:pxdrift 4.5s ease-in both}
@keyframes pxdrift{to{transform:translate(40px,115vh) rotate(160deg)}}
#chat.px-flip .msg{animation:pxflip 4s ease both!important}
@keyframes pxflip{15%,85%{transform:rotate(180deg)}}
.msg.shiny .bubble{animation:pxshiny 2.4s linear infinite}
.msg.shiny .bubble::after{content:"โจ";position:absolute;right:-10px;top:-12px;font-size:18px;animation:sxsparkle 1.6s ease-in-out infinite}
@keyframes pxshiny{0%,100%{filter:drop-shadow(0 0 4px #fff) drop-shadow(3px 3px 0 var(--volt))}50%{filter:drop-shadow(0 0 14px #fff6a8) drop-shadow(3px 3px 0 var(--mag))}}
/* ===== cleaner photos ===== */
.shot img{max-width:min(56vw,228px);max-height:260px;object-fit:cover;border-width:3px;transform:rotate(-1deg)}
.bubble .shot{margin:2px 0 8px}
.msg.photo-only .bubble{padding:0;filter:none}
.msg.photo-only .bubble::before{display:none}
.msg.photo-only .shot{margin:0}
.msg.photo-only .shot img{max-width:min(60vw,240px);max-height:300px;border:3px solid var(--cyan);box-shadow:5px 5px 0 var(--mag);transform:rotate(-1.5deg)}
.msg.me.photo-only .shot img{border-color:var(--mag);box-shadow:-5px 5px 0 var(--cyan);transform:rotate(1.5deg)}
.msg.photo-only .reacts{margin-top:10px}
/* ===== easier deleting ===== */
.swipe-hint.del{left:auto;right:4px;color:var(--red)}
.swipe-hint.del.ready{color:#fff;background:var(--red);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:18px}
.msg.me .swipe-hint.del{left:auto;right:4px}
.bubble{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* ===== ai / dates / tasks / disappearing ===== */
.dailybar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(90deg,rgba(243,255,58,.10),rgba(7,4,26,.9) 60%);border-bottom:2px solid var(--volt)}
.dailybar .db-icon{font-size:20px;flex:none}
.dailybar .db-body{flex:1;min-width:0;display:grid;line-height:1.2}
.dailybar .db-body small{font-family:var(--tech);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--volt)}
.dailybar .db-body span{font-size:14px;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dailybar .db-go{flex:none;font-family:var(--tech);font-size:11px;font-weight:700;text-transform:uppercase;background:var(--volt);color:var(--night);border:none;padding:7px 10px;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.dailybar .db-dice{flex:none;background:none;border:2px solid var(--cyan);font-size:17px;line-height:1;padding:4px 6px}
.dailybar .db-x{flex:none;background:none;border:none;color:var(--muted);font-size:16px;padding:4px}
.gamepick.flashpick{animation:flashpick 1.4s ease 2}
@keyframes flashpick{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px var(--volt),0 0 18px var(--volt)}}
.tour-icon{font-size:46px;line-height:1;text-align:center}
#tourSheet .sub{text-align:center}
.tour-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tour-try button{font:inherit;font-size:15px;font-weight:700;background:var(--night);color:var(--white);border:2px solid var(--cyan);padding:7px 12px;transform:skewX(-6deg)}
.tour-dots{display:flex;gap:7px;justify-content:center;margin:4px 0}
.tour-dots i{width:9px;height:9px;border:2px solid var(--cyan);transform:rotate(45deg)}
.tour-dots i.on{background:var(--volt);border-color:var(--volt)}
.catchup{display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(7,4,26,.9);border-bottom:2px solid var(--cyan)}
.catchbtn{flex:1;text-align:left;background:linear-gradient(90deg,rgba(0,240,255,.18),transparent);border:2px solid var(--cyan);color:var(--white);font-family:var(--tech);font-size:12px;padding:8px 10px;clip-path:polygon(0 0,98% 0,100% 40%,100% 100%,2% 100%,0 60%)}
.sumbody{width:100%;display:grid;gap:10px}
.sumhead{font-size:18px;font-weight:700;color:var(--volt)}
.sumlist{display:grid;gap:8px;padding-left:18px;font-size:17px;line-height:1.35}
.sumbody h3{font-family:var(--tech);font-size:12px;color:var(--cyan);margin-top:6px}
.trbox{margin-top:6px;border-top:1px dashed rgba(255,255,255,.35);padding-top:6px;cursor:pointer}
.trtext{font-size:17px}
.trlabel{display:block;font-family:var(--tech);font-size:10px;opacity:.75;margin-top:3px}
.datechip{font:inherit;font-weight:700;background:rgba(243,255,58,.14);color:inherit;border:none;border-bottom:2px dashed var(--volt);padding:0 3px;cursor:pointer}
.me .datechip{background:rgba(0,0,0,.25)}
.calico{display:inline-block;width:1.05em;height:1.05em;margin-right:.25em;vertical-align:-.12em;background:#fff;border-radius:2px;overflow:hidden;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.35);text-align:center}
.calico b{display:block;height:34%;background:#ff3d5a;color:#fff;font:800 .26em/1.3 var(--tech);letter-spacing:0;overflow:hidden}
.calico i{display:block;height:66%;color:#07041a;font:700 .56em/1.15 var(--body);font-style:normal}
.calico.clock b{background:#00b8d4}.calico.clock i{font-size:.46em;line-height:1.4}
.tasks{display:grid;gap:6px;width:100%}
.taskrow{display:flex;align-items:center;gap:8px;background:rgba(7,4,26,.6);border:2px solid #3b2d80;padding:6px 8px;text-align:left;cursor:pointer}
.taskrow input{width:22px;height:22px;accent-color:var(--volt);flex:none}
.taskrow .tasktext{flex:1;min-width:0;font-size:16px;overflow-wrap:anywhere}
.taskrow small{color:var(--muted);font-size:11px;flex:none}
.taskrow.done .tasktext{text-decoration:line-through;color:var(--muted)}
.taskrow .rm{background:none;border:2px solid var(--muted);color:var(--muted);padding:2px 7px;flex:none}
.taskcount{padding:6px 8px!important;font-size:11px}
.taskcount:empty{display:none}
.expiry{font-family:var(--tech);font-size:10px;color:var(--volt);margin-left:6px}
.sheet .field[type=date],.sheet .field[type=time]{color-scheme:dark;min-width:0}
/* ===== photo + caption: compact preview, tap to see full size ===== */
.msg:not(.photo-only) .bubble .shot{position:relative;width:min(56vw,210px);margin:2px 0 8px}
.msg:not(.photo-only) .bubble .shot img{width:100%;height:150px;max-height:150px;max-width:none;object-fit:cover;object-position:top;transform:none;border:3px solid var(--cyan);box-shadow:3px 3px 0 var(--night)}
.msg.me:not(.photo-only) .bubble .shot img{border-color:var(--mag)}
.msg:not(.photo-only) .bubble .shot::after{content:"โคข";position:absolute;right:6px;bottom:6px;width:24px;height:24px;display:grid;place-items:center;font-size:14px;background:rgba(7,4,26,.8);color:var(--white);border:1.5px solid var(--cyan);pointer-events:none}
/* ===== secrets pack 5 ===== */
.qx-stamp{font-size:clamp(34px,11vw,80px);color:var(--white);background:var(--night);padding:4px 20px 0;border:5px solid var(--cyan);box-shadow:10px 10px 0 var(--mag);clip-path:polygon(0 10%,100% 0,97% 100%,3% 90%);text-shadow:3px 3px 0 var(--mag)}
.qx-fly{position:absolute;left:-45%;top:55%;width:min(60vw,260px);animation:qxfly linear both;pointer-events:none}
@keyframes qxfly{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(170vw,-55vh) rotate(-6deg)}}
.qx-dragon .qx-wing{transform-origin:120px 70px;animation:qxflap .5s ease-in-out infinite alternate}
.qx-dragon .qx-wing2{transform-origin:120px 76px;animation:qxflap .5s ease-in-out infinite alternate-reverse}
@keyframes qxflap{to{transform:scaleY(.2)}}
.qx-dragon svg{width:100%;filter:drop-shadow(0 0 14px rgba(198,43,214,.7))}
.qx-gk{position:absolute;left:0;right:0;top:34%;text-align:center;animation:sxflash 3.6s ease both}
.qx-gkbox{display:inline-grid;gap:2px;padding:12px 18px;background:#F4F7FF;border:5px solid #07041A;box-shadow:10px 10px 0 #ff6a3d;transform:rotate(-4deg)}
.qx-gkbox span{font-family:var(--num);font-size:clamp(34px,12vw,64px);line-height:.9;color:#07041A;letter-spacing:2px}
.qx-gkbox span+span{color:#ff6a3d}
#chat.qx-bounce .msg{animation:qxbounce .6s ease-in-out 6!important}
@keyframes qxbounce{50%{transform:translateY(-6px) rotate(var(--tilt,0))}}
.qx-car{top:62%;animation-name:qxdriftpath;animation-timing-function:cubic-bezier(.4,0,.6,1)}
@keyframes qxdriftpath{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(70vw,-8vh) rotate(-28deg)}100%{transform:translate(180vw,-40vh) rotate(-6deg)}}
.qx-smoke{position:absolute;inset:0}
.qx-smoke i{position:absolute;left:30%;top:66%;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(220,220,240,.55),rgba(220,220,240,0) 70%);animation:qxsmoke 2s ease-out both}
@keyframes qxsmoke{from{transform:scale(.3);opacity:1}to{transform:translate(-20vw,-10vh) scale(3);opacity:0}}
#chat.qx-tilt{animation:qxtilt 2.6s ease both}
@keyframes qxtilt{30%{transform:rotate(-3deg) translateX(-10px)}60%{transform:rotate(2deg)}}
.qx-drift{color:#F3FF3A!important;border-color:#F3FF3A!important;letter-spacing:4px}
.qx-redrum{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scaleX(-1) rotate(-6deg);font-family:"Brush Script MT","Segoe Script",cursive;font-size:clamp(60px,20vw,120px);color:#ff1a1a;text-shadow:0 0 18px #ff1a1a,3px 3px 0 #300;animation:sxflash 2.6s ease both}
#chat.qx-flicker{animation:qxflicker 1.2s steps(1) 2}
@keyframes qxflicker{0%{filter:none}15%{filter:brightness(.2)}20%{filter:brightness(1.6) contrast(1.4)}35%{filter:brightness(.1)}45%{filter:none}70%{filter:brightness(.3) sepia(1) hue-rotate(-40deg)}80%{filter:none}}
.qx-lurker{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:-1;pointer-events:none;display:flex;justify-content:center;align-items:flex-end;animation:qxrise 2.4s ease both}
.qx-lurker svg{width:min(70vw,300px);height:auto}
.qx-eye{animation:qxglow .6s ease-in-out infinite alternate}
@keyframes qxglow{to{fill:#fff;filter:drop-shadow(0 0 8px #ff2b2b)}}
@keyframes qxrise{0%{transform:translateY(60%);opacity:0}30%,75%{transform:translateY(0);opacity:1}100%{transform:translateY(60%);opacity:0}}
.qx-flash{position:absolute;inset:0;background:#fff;animation:qxwhite .9s ease both}
@keyframes qxwhite{0%{opacity:1}30%{opacity:0}45%{opacity:.8}100%{opacity:0}}
.qx-boo{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:clamp(120px,45vw,240px);animation:qxbooin .9s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 0 20px #fff)}
@keyframes qxbooin{from{transform:translate(-50%,-50%) scale(.1)}30%{transform:translate(-50%,-50%) scale(1.3)}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
#chat.qx-vhs{animation:qxvhs 3.8s steps(12) both}
@keyframes qxvhs{0%,100%{filter:none;transform:none}20%{filter:contrast(1.4) saturate(.4) brightness(.8);transform:translateX(3px)}40%{filter:contrast(1.6) hue-rotate(20deg);clip-path:inset(0 0 0 0)}60%{transform:translateX(-4px) skewX(2deg);filter:blur(.6px) brightness(.7)}80%{filter:contrast(1.3) saturate(.2)}}
.qx-cursedcap{top:8%;color:#fff;font-family:ui-monospace,monospace;text-shadow:0 0 6px #f00;animation:sxblink .6s steps(1) infinite}
.face.qx-beam .fi{animation:qxbeam 2.4s ease both}
@keyframes qxbeam{25%{filter:brightness(3) blur(1px);opacity:.9;transform:scaleY(1.2)}50%{opacity:0;filter:brightness(4) blur(4px)}75%{opacity:.6;filter:brightness(2)}100%{opacity:1;filter:none}}
.qx-warp{color:#fff!important;border-color:#fff!important;background:#07041A!important}
.msg.qx-float{animation:qxfloat 2.6s ease-in-out both!important}
@keyframes qxfloat{40%,60%{transform:translateY(var(--fy)) rotate(var(--fr))}100%{transform:rotate(var(--tilt,0))}}
#chat.qx-borg{animation:qxborg 3.2s ease both}
@keyframes qxborg{20%,80%{filter:sepia(1) hue-rotate(60deg) saturate(2) contrast(1.2)}}
.qx-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,90,.25) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,255,90,.25) 0 1px,transparent 1px 22px);animation:sxflash 3.2s ease both}
.qx-borgtext{font-size:clamp(22px,7vw,48px)!important;font-family:var(--tech)!important;color:#5cff8a!important;border-color:#5cff8a!important;letter-spacing:2px}
.qx-42{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-4deg);text-align:center;animation:sxslam 3s cubic-bezier(.2,1.4,.4,1) both}
.qx-42 b{display:block;font-family:var(--num);font-size:clamp(120px,45vw,220px);line-height:.9;color:var(--volt);text-shadow:-5px 0 var(--cyan),8px 8px 0 var(--mag)}
.qx-42 small{font-family:var(--tech);font-size:16px;color:var(--white);letter-spacing:6px;background:var(--mag);padding:4px 10px}
.qx-fade{position:absolute;inset:0;background:#000;display:grid;place-items:center;opacity:0;transition:opacity .7s}
.qx-fade.in{opacity:1}.qx-fade.out{opacity:0}
.qx-cowboy{font-family:var(--tech);font-size:clamp(14px,4.6vw,22px);letter-spacing:4px;color:#e8e8f0;border-top:1px solid #444;border-bottom:1px solid #444;padding:10px 14px}
.qx-hud{position:absolute;inset:0;background:rgba(120,0,0,.28);mix-blend-mode:screen;animation:sxfadein .3s ease both}
.qx-hudbox{position:absolute;left:50%;top:40%;width:110px;height:110px;transform:translate(-50%,-50%);border:2px solid #ff3b3b;box-shadow:0 0 12px #ff3b3b;animation:qxlock .5s ease-out 3 alternate}
.qx-hudbox i{position:absolute;width:20px;height:20px;border:3px solid #ff3b3b}
.qx-hudbox i:nth-child(1){left:-6px;top:-6px;border-right:0;border-bottom:0}.qx-hudbox i:nth-child(2){right:-6px;top:-6px;border-left:0;border-bottom:0}.qx-hudbox i:nth-child(3){left:-6px;bottom:-6px;border-right:0;border-top:0}.qx-hudbox i:nth-child(4){right:-6px;bottom:-6px;border-left:0;border-top:0}
.qx-hudbox span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;font-family:ui-monospace,monospace;font-size:11px;color:#ff3b3b;white-space:nowrap}
@keyframes qxlock{from{transform:translate(-50%,-50%) scale(1.6);opacity:.4}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.qx-hudtext{position:absolute;left:12px;bottom:18%;font-family:ui-monospace,monospace;font-size:14px;color:#ff6b6b;line-height:1.6;text-shadow:0 0 6px #f00}
.qx-hudtext b{color:#fff;background:#c00;padding:0 4px}
.qx-action{color:var(--volt)!important;border-color:var(--volt)!important;font-style:italic}
.msg.qx-leave{animation:qxleave 3.2s ease-in-out both!important}
@keyframes qxleave{25%,60%{transform:translateX(120vw) rotate(var(--tilt,0))}100%{transform:rotate(var(--tilt,0))}}
.qx-nani{color:#fff!important;background:#c00!important;border-color:#07041A!important;text-shadow:4px 4px 0 #07041A!important}
.qx-shatter{animation:qxshatter .8s ease-in forwards!important}
@keyframes qxshatter{to{transform:translate(-50%,-50%) rotate(-8deg) scale(1.6);opacity:0;filter:blur(6px)}}
.face.qx-charge{position:absolute!important;left:-70px;width:56px;height:56px;animation:qxcharge 2.2s linear both}
@keyframes qxcharge{to{transform:translateX(130vw) rotate(360deg)}}
.qx-redslash{position:absolute;inset:0;background:linear-gradient(115deg,transparent 46%,#ff1a1a 48%,#fff 50%,#ff1a1a 52%,transparent 54%);animation:qxslash .5s cubic-bezier(.7,0,.3,1) both}
@keyframes qxslash{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.qx-fatality{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-5deg);font-family:var(--num);font-size:clamp(46px,16vw,110px);color:#ff1a1a;text-shadow:0 0 20px #f00,4px 4px 0 #300;animation:qxdrip 2.2s ease both;letter-spacing:2px}
@keyframes qxdrip{0%{opacity:0;letter-spacing:20px}20%{opacity:1;letter-spacing:2px}80%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scaleY(1)}100%{opacity:0;transform:translate(-50%,-30%) rotate(-5deg) scaleY(1.4)}}
.qx-gameover{position:absolute;inset:0;background:rgba(0,0,0,.92);display:grid;place-content:center;text-align:center;gap:12px;animation:sxfadein .4s steps(4) both;font-family:ui-monospace,monospace}
.qx-go{font-family:var(--num);font-size:clamp(50px,17vw,100px);color:#ff3b3b;text-shadow:5px 5px 0 #600;letter-spacing:3px}
.qx-cont{font-size:22px;color:#fff}.qx-cont b{color:var(--volt);font-size:34px}
.qx-coin{font-size:16px;color:#aaa;animation:sxblink .8s steps(1) infinite}
.qx-1up{position:absolute;left:50%;top:44%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;font-family:ui-monospace,monospace;font-weight:900;font-size:clamp(28px,9vw,48px);color:#5cff8a;text-shadow:3px 3px 0 #07041A;animation:qxup 1.8s ease-out both}
.qx-1up i{font-style:normal;color:#ff4d6d}
@keyframes qxup{to{transform:translate(-50%,-160px);opacity:0}}
.qx-cake{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:clamp(50px,18vw,100px);font-family:var(--num);color:var(--white);animation:sxflash 2.6s ease both;white-space:nowrap}
.qx-cake.qx-lie{color:#ff3b3b;filter:contrast(1.4);animation:sxflash 2.6s ease both,sxjitter .06s linear 12}
.qx-cross{position:absolute;left:var(--x,50%);top:var(--y,40%);width:90px;height:90px;transform:translate(-50%,-50%);border:3px solid #ff3b3b;border-radius:50%;box-shadow:0 0 10px #ff3b3b,inset 0 0 10px #ff3b3b;animation:qxcross .5s ease-out both}
.qx-cross::before,.qx-cross::after{content:"";position:absolute;background:#ff3b3b}
.qx-cross::before{left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px}.qx-cross::after{top:50%;left:-14px;right:-14px;height:2px;margin-top:-1px}
@keyframes qxcross{from{left:50%;top:50%;transform:translate(-50%,-50%) scale(3);opacity:0}}
.qx-victory{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) rotate(-4deg);text-align:center;animation:sxslam 3s cubic-bezier(.2,1.4,.4,1) both}
.qx-victory div{font-size:64px;filter:drop-shadow(0 0 12px #FFD86B)}
.qx-victory b{display:block;font-family:var(--num);font-size:clamp(90px,32vw,160px);line-height:.9;color:#FFD86B;text-shadow:-4px 0 var(--cyan),6px 6px 0 var(--mag)}
.qx-victory small{font-family:var(--tech);font-size:14px;color:var(--white);letter-spacing:4px}
.qx-level{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-3deg);width:min(78vw,300px);background:var(--night);border:4px solid var(--cyan);box-shadow:8px 8px 0 var(--mag);padding:14px;text-align:center;animation:sxflash 2.6s ease both}
.qx-lvlbar{height:16px;border:2px solid var(--white);overflow:hidden}
.qx-lvlbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--volt));animation:sxbar 1s ease-out forwards}
.qx-lvltxt{font-family:var(--num);font-size:clamp(34px,12vw,60px);color:var(--volt);margin-top:8px}
.qx-dmg{position:absolute;font-family:var(--num);font-size:clamp(26px,9vw,44px);color:var(--volt);text-shadow:3px 3px 0 #07041A;animation:qxdmg 1.6s ease-out both}
@keyframes qxdmg{from{transform:translateY(20px) scale(.5);opacity:0}30%{opacity:1;transform:scale(1.3)}to{transform:translateY(-90px);opacity:0}}
.qx-crit{color:var(--volt)!important;border-color:var(--volt)!important}
.qx-pog{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:min(50vw,200px);text-align:center;animation:sxslam 1.7s cubic-bezier(.2,1.6,.4,1) both}
.qx-pog svg{width:100%;filter:drop-shadow(8px 8px 0 var(--mag))}
.qx-pog b{display:block;font-family:var(--num);font-size:clamp(40px,14vw,70px);color:var(--white);text-shadow:4px 4px 0 var(--mag)}
.hintbox{font-size:15px;color:var(--white);background:rgba(243,255,58,.08);border-left:3px solid var(--volt);padding:6px 10px;width:100%}
.hintbox b{color:var(--volt);font-family:var(--tech);font-size:11px}
.hintbox small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
/* ===== pack 6 ===== */
#chat.rx-sepia{animation:rxsepia 4.6s ease both}
@keyframes rxsepia{15%,85%{filter:sepia(1) contrast(1.15) brightness(.75)}}
.rx-war{position:absolute;inset:0;display:grid;place-items:center;animation:sxflash 4.6s ease both}
.rx-dust{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(190,150,90,.55),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px)}
.rx-wartext{position:relative;text-align:center;font-family:var(--num);color:#e8d9b0;text-shadow:3px 3px 0 #2a1a08}
.rx-wartext span{display:block;font-size:clamp(46px,16vw,96px);line-height:1;opacity:0;animation:rxtype .6s ease forwards}
.rx-wartext span+span{font-size:clamp(20px,6.5vw,38px);letter-spacing:3px;animation-delay:1.1s}
@keyframes rxtype{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#chat.rx-pip{animation:rxpip 4.2s ease both}
@keyframes rxpip{10%,90%{filter:sepia(1) hue-rotate(60deg) saturate(3) contrast(1.2) brightness(.8)}}
.rx-pipboy{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-2deg);width:min(84vw,330px);animation:sxfadein .3s ease both;font-family:ui-monospace,Menlo,monospace;color:#5cff8a}
.rx-pipframe{background:#08140a;border:6px solid #2b2f2a;border-radius:16px;box-shadow:0 0 0 3px #111,8px 8px 0 #07041A,inset 0 0 40px rgba(92,255,138,.25);padding:12px;background-image:repeating-linear-gradient(0deg,rgba(92,255,138,.08) 0 2px,transparent 2px 4px)}
.rx-piphead{font-size:11px;letter-spacing:2px;border-bottom:2px solid #5cff8a;padding-bottom:6px;margin-bottom:8px}
.rx-pipbody{display:flex;gap:12px;align-items:center}
.rx-boy{font-size:54px;filter:sepia(1) hue-rotate(60deg) saturate(3);animation:sxwink 1.3s ease 2}
.rx-piprows{font-size:14px;line-height:1.7}
.rx-piprows b{color:#a7ffbf;display:inline-block;width:64px}
.rx-cap{position:absolute;top:-40px;font-size:24px;color:#ff3b3b;text-shadow:0 0 2px #fff;animation:rxcapfall 2.2s cubic-bezier(.3,0,.7,1) both}
@keyframes rxcapfall{to{transform:translateY(115vh) rotate(var(--r));opacity:.9}}
.rx-nukacap{top:30%;color:#ff8a3d}
.rx-bean{position:absolute;left:-80px;width:56px;animation:rxwaddle 3.6s linear both}
.rx-bean svg{width:100%;animation:rxbob .35s ease-in-out infinite alternate}
@keyframes rxwaddle{0%{transform:translateX(0)}70%{transform:translateX(105vw)}80%{transform:translateX(102vw) rotate(90deg)}100%{transform:translateX(130vw) rotate(90deg)}}
@keyframes rxbob{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(10deg) translateY(-8px)}}
.rx-qualified{font-size:clamp(40px,14vw,90px);color:#fff;background:#ff4fa3;border:5px solid #07041A;padding:4px 24px;box-shadow:10px 10px 0 #ffd400;clip-path:polygon(0 10%,100% 0,97% 100%,3% 90%);text-shadow:4px 4px 0 #07041A}
#chat.rx-tvworld{animation:rxtv 4.2s ease both}
@keyframes rxtv{15%,85%{filter:saturate(.2) contrast(1.4) sepia(.4) hue-rotate(20deg)}}
.rx-shadow{position:absolute;inset:0;display:grid;place-content:center;gap:16px;text-align:center;background:radial-gradient(circle,rgba(60,0,20,.6),rgba(0,0,0,.92));animation:sxflash 4.2s ease both}
.rx-shadowface{position:relative;width:140px;height:140px;margin:0 auto}
.rx-shadowface .face{width:140px;height:140px;font-size:60px}
.rx-shadowface .face .fi{filter:brightness(.25) contrast(1.4) saturate(0)}
.rx-eye{position:absolute;top:52px;width:22px;height:12px;background:#ffd400;border-radius:50%;box-shadow:0 0 16px #ffd400,0 0 30px #ff8a00;animation:qxglow .5s ease-in-out infinite alternate}
.rx-eye.l{left:38px}.rx-eye.r{right:38px}
.rx-shadowtext{font-size:22px;color:#e8e8f0;font-style:italic;max-width:80vw}
.rx-shadowtext b{color:#ffd400;font-style:normal}
#chat.rx-rain{animation:rxrainy 6s ease both}
@keyframes rxrainy{10%,90%{filter:saturate(.7) brightness(.75) contrast(1.1)}}
.rx-rainlayer{position:absolute;inset:0;overflow:hidden}
.rx-rainlayer i{position:absolute;top:-30px;width:2px;height:26px;background:rgba(170,200,255,.6);animation:rxdrop linear infinite}
@keyframes rxdrop{to{transform:translateY(115vh)}}
.rx-bowl{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-2deg);width:min(84vw,320px);background:var(--night);border:4px solid var(--volt);box-shadow:8px 8px 0 var(--mag);padding:12px;text-align:center;animation:sxfadein .3s ease both}
.rx-bowltitle{font-family:var(--tech);font-size:12px;color:var(--volt)}
.rx-bowlart svg{width:60%;margin:6px auto;display:block}
.rx-timer{font-family:var(--num);font-size:clamp(40px,14vw,64px);color:#ff3b3b;text-shadow:3px 3px 0 #07041A;letter-spacing:2px}
.rx-bowlfoot{font-size:15px;color:var(--muted)}
.rx-sweat{position:absolute;right:-8px;top:-4px;font-size:16px;animation:rxsweat 1s ease-in-out infinite;z-index:4}
@keyframes rxsweat{50%{transform:translateY(4px)}}
.rx-junes{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-3deg);text-align:center;animation:sxslam 3.6s cubic-bezier(.2,1.4,.4,1) both}
.rx-junesign{font-family:var(--num);font-size:clamp(28px,9vw,50px);line-height:1.05;color:#07041A;background:#fff;border:5px solid #d61f2c;padding:10px 18px;box-shadow:10px 10px 0 #d61f2c}
.rx-junesign span{display:inline-block;color:#fff;background:#d61f2c;padding:0 10px;transform:rotate(-3deg);font-size:1.25em}
.rx-bags{font-size:30px;margin-top:10px;animation:qxbounce .6s ease-in-out 5}
/* ===== Wasteland theme (unlocked by the "pip-boy" secret) ===== */
body.theme-pipboy{--night:#061008;--deep:#0b1c0e;--white:#c9ffd8;--muted:#6fbf86;--red:#ff6b6b}
body.theme-pipboy .app,body.theme-pipboy .sky{background:radial-gradient(circle at 50% 30%,#0f2a14,#061008 70%)!important}
body.theme-pipboy .sky canvas{opacity:.25;filter:sepia(1) hue-rotate(60deg) saturate(3)}
body.theme-pipboy::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(0deg,rgba(92,255,138,.07) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45))}
body.theme-pipboy .bubble::before{background:#0b1c0e!important;box-shadow:inset 0 0 0 2px #5cff8a}
body.theme-pipboy .msg.me .bubble::before{background:#173d20!important}
body.theme-pipboy .msg.custom .bubble::before{background:var(--bub)!important}
body.theme-pipboy .bubble,body.theme-pipboy .tag,body.theme-pipboy .roomname,body.theme-pipboy .field,body.theme-pipboy textarea{font-family:ui-monospace,Menlo,Consolas,monospace!important;text-shadow:0 0 6px rgba(92,255,138,.5)}
body.theme-pipboy .face .fi{filter:sepia(1) hue-rotate(60deg) saturate(2.4) brightness(.95)}
body.theme-pipboy .go,body.theme-pipboy .send{background:#5cff8a;color:#061008;box-shadow:0 0 14px rgba(92,255,138,.5)}
body.theme-pipboy .title span,body.theme-pipboy .month,body.theme-pipboy .day,body.theme-pipboy .weekday,body.theme-pipboy .phase{text-shadow:0 0 10px #5cff8a}
body.theme-pipboy .day{color:#c9ffd8!important}
body.theme-pipboy .icon{background:#a7ffbf!important}
body.theme-pipboy .weekday{background:#1f7a3a!important;color:#c9ffd8!important}
body.theme-pipboy .compose,body.theme-pipboy .top{background:rgba(6,16,8,.92)!important}
/* ===== pack 7 ===== */
.mx-speed{position:absolute;inset:0;overflow:hidden}
.mx-speed i{position:absolute;right:-240px;height:3px;background:linear-gradient(90deg,transparent,#3dd6ff,#fff);animation:mxline .5s linear infinite}
@keyframes mxline{from{transform:translateX(0)}to{transform:translateX(-140vw)}}
#chat.mx-dash{animation:mxdash 2.2s ease both}
@keyframes mxdash{10%{transform:translateX(-14px) skewX(12deg);filter:blur(1px) hue-rotate(160deg)}40%{transform:translateX(10px) skewX(8deg);filter:blur(2px) hue-rotate(160deg)}70%{transform:translateX(-6px) skewX(4deg);filter:blur(1px)}100%{transform:none;filter:none}}
.mx-rings{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 70px);display:flex;align-items:center;gap:8px;font-family:var(--num);font-size:32px;color:#ffd400;text-shadow:3px 3px 0 #07041A;animation:sxfadein .2s ease both}
.mx-ring,.mx-ringfly{width:28px;height:28px;border:6px solid #ffd400;border-radius:50%;box-shadow:inset 0 0 0 2px #b8860b,0 0 8px #ffd400}
.mx-ring{animation:mxspin .6s linear infinite}
@keyframes mxspin{50%{transform:scaleX(.2)}}
.mx-ringfly{position:absolute;right:-40px;animation:mxringfly 1.1s linear both}
@keyframes mxringfly{to{transform:translateX(-130vw) rotateY(720deg)}}
.mx-fast{color:#fff!important;background:#1a5dff!important;border-color:#fff!important;font-style:italic;letter-spacing:1px}
#chat.mx-hop{animation:mxhop 1.1s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mxhop{30%{transform:translateY(-34px) scaleY(1.04)}60%{transform:translateY(0) scaleY(.97)}100%{transform:none}}
.mx-coin{position:absolute;top:40%;font-size:44px;transform:translateX(-50%);animation:mxcoin 1.1s ease-out both;filter:drop-shadow(0 0 8px #ffd400)}
@keyframes mxcoin{from{transform:translate(-50%,0) rotateY(0)}to{transform:translate(-50%,-140px) rotateY(720deg);opacity:0}}
.mx-cointext{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:var(--num);font-size:24px;color:#ffd400;text-shadow:2px 2px 0 #07041A;animation:qxup 1.2s ease-out both}
.mx-letsago{color:#fff!important;background:#e4342f!important;border-color:#fff!important;box-shadow:10px 10px 0 #1e6fd9!important}
.mx-mamma{color:#e4342f!important;background:#fff!important;border-color:#e4342f!important;box-shadow:10px 10px 0 #1e6fd9!important}
.msg.mx-fall{animation:mxfall 2.4s cubic-bezier(.4,0,.6,1) both!important}
@keyframes mxfall{35%,55%{transform:translateY(60vh) rotate(25deg);opacity:0}100%{transform:rotate(var(--tilt,0));opacity:1}}
.face.mx-grow .fi{animation:mxgrow 3s ease both}
@keyframes mxgrow{15%,25%,35%{transform:scale(1.5)}20%,30%{transform:scale(1)}40%,85%{transform:scale(1.5)}100%{transform:scale(1)}}
/* ===== dragon scene ===== */
/* ๐ Hagrid (pspsps): the Creator's fluffy black smoke cat strolls across, sits, blinks, says mrrp, wanders off. Sheet: 6 frames of 36x24 (walk x4, sit, blink) */
.hg-cat{position:absolute;left:0;bottom:24%;width:108px;height:72px;background-size:648px 72px;background-repeat:no-repeat;image-rendering:pixelated;will-change:transform;filter:drop-shadow(0 0 3px rgba(200,190,255,.5))} /* he is a very dark cat on a dark app: a soft moonlight rim */
.hg-bubble{position:absolute;bottom:calc(24% + 76px);padding:4px 10px;background:#f4f1ff;color:#07041a;border:3px solid #07041a;box-shadow:3px 3px 0 #ff4fd8;font-family:"Monogram",ui-monospace,monospace;font-size:20px;line-height:1;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;white-space:nowrap}
.hg-bubble.on{opacity:1;transform:none}
.hg-paw{display:inline-block;width:14px;height:12px;margin-left:6px;vertical-align:-1px;color:#ff4fd8;animation:hgpaw .5s steps(3) both}
@keyframes hgpaw{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
/* ๐ฆ Jaws scenes */
.jw-water{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(rgba(29,111,168,.82),rgba(6,35,63,.95));animation:jwrise .9s ease-out forwards}
.jw-water::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;background:radial-gradient(circle at 12px 12px,rgba(29,111,168,.82) 10px,transparent 11px) 0 0/24px 12px repeat-x;animation:jwwave 1.6s linear infinite}
@keyframes jwrise{to{height:34%}}
@keyframes jwwave{to{background-position:24px 0}}
.jw-fin{position:absolute;bottom:calc(34% - 8px);left:-90px;width:70px;height:58px;background:linear-gradient(90deg,#3e4a58,#7a8898);clip-path:polygon(0 100%,56% 0,68% 6%,100% 100%);filter:drop-shadow(0 2px 0 #bff1ff)}
.jw-fin.go{animation:jwfin 3.4s cubic-bezier(.55,0,.85,1) forwards}
@keyframes jwfin{0%{left:-90px}75%{left:68%}100%{left:115%}}
.jw-cap{top:18%}
.jw-boat{position:absolute;left:50%;bottom:calc(34% - 6px);width:96px;height:56px;margin-left:-48px;animation:jwbob 1.2s ease-in-out infinite}
@keyframes jwbob{50%{transform:translateY(4px) rotate(-3deg)}}
.jw-boat.sunk{animation:jwsink .5s ease-in forwards}
@keyframes jwsink{to{transform:translateY(120px) rotate(30deg);opacity:0}}
.jw-mouth{position:absolute;left:50%;bottom:-75%;width:min(92vw,560px);height:58%;transform:translateX(-50%);transition:bottom .9s cubic-bezier(.2,.9,.3,1)}
.jw-mouth.up{bottom:-6%}
.jw-in{position:absolute;inset:14% 6% 10%;border-radius:50%;background:radial-gradient(ellipse at 50% 60%,#120208,#4a0c18 70%,#2a0610)}
.jw-jaw{position:absolute;left:0;right:0;height:46%;background:#5a6878;transition:transform .35s cubic-bezier(.6,0,.4,1)}
.jw-jaw.top{top:0;border-radius:50% 50% 10% 10%/80% 80% 20% 20%;transform:translateY(-62%)}
.jw-jaw.bot{bottom:0;border-radius:10% 10% 50% 50%/20% 20% 80% 80%;transform:translateY(62%);background:#d9dee6}
.jw-mouth.shut .jw-jaw{transform:none}
.jw-teeth{position:absolute;left:6%;right:6%;height:30px;background:#f4f1ff}
.jw-jaw.top .jw-teeth{bottom:-28px}
.jw-jaw.bot .jw-teeth{top:-28px;transform:scaleY(-1)}
.jw-sign{position:absolute;left:50%;top:22%;transform:translateX(-50%) rotate(-2deg);width:min(86vw,420px);padding:16px 18px 64px;background:linear-gradient(#bfe9ff,#7cc8f0 60%,#e9d39a 61%);border:6px solid #f4f1ff;box-shadow:0 0 0 4px #07041a,8px 8px 0 4px #ff4fd8;color:#0d3b66;text-align:center;font-family:var(--num);overflow:hidden;animation:sxcapin .5s ease-out both}
.jw-sign b{display:block;font-size:clamp(22px,7vw,36px);line-height:1;color:#c21f3a;text-shadow:2px 2px 0 #f4f1ff}
.jw-sign small{display:block;font-size:14px;margin-top:6px}
.jw-sign .jw-fin{position:absolute;bottom:4px;left:auto;right:18%;width:54px;height:44px;filter:none;clip-path:polygon(0 100%,56% 0,68% 6%,100% 100%);background:#07041a}
.jw-sign i{position:absolute;bottom:8px;left:24%;width:12px;height:12px;border-radius:50%;background:#ffcf9e;box-shadow:16px 0 0 #c21f3a}
.jw-tank{position:absolute;left:50%;top:50%;width:26px;height:58px;margin:-29px 0 0 -13px;border-radius:8px;background:linear-gradient(90deg,#ffcf3d,#ffef9a 40%,#e0a800);border:3px solid #07041a}
.jw-cross{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:3px solid #ff3d5a;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,61,90,.3);animation:jwaim 1.3s ease-in-out both}
.jw-cross::before,.jw-cross::after{content:"";position:absolute;background:#ff3d5a;left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px}
.jw-cross::after{top:50%;bottom:auto;left:-14px;right:-14px;width:auto;height:2px;margin:-1px 0 0}
@keyframes jwaim{0%{transform:translate(-40px,30px) scale(1.4);opacity:0}30%{opacity:1}70%{transform:translate(6px,-4px)}100%{transform:none}}
.jw-boom{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0 6%,#ffe27a 14%,#ff7a2a 30%,rgba(255,61,90,0) 60%);animation:jwboom .9s ease-out forwards}
@keyframes jwboom{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
/* ===================== ๐บ๏ธ INK MAP MODE ("I solemnly swearโฆ" / "Mischief managed") =====================
Only on the phone that said it. Parchment, brown ink, dotted paths, names on little scrolls.
Footprints for typing are Cole's part (see INKMAP below). Our own look: no film artwork copied. */
body.inkmap{--night:#efe2c2;--deep:#e2cf9f;--white:#3b2414;--muted:#7a5a3a;--cyan:#4a2e18;--mag:#8e1b1b;--volt:#7a5a1a;color-scheme:light}
body.inkmap .sky{background:url("data:image/svg+xml;utf8,"),radial-gradient(ellipse at 18% 22%,rgba(150,100,40,.18),transparent 38%),radial-gradient(ellipse at 82% 70%,rgba(140,90,30,.16),transparent 42%),radial-gradient(ellipse at 60% 8%,rgba(255,250,230,.5),transparent 50%),linear-gradient(#efe2c2,#e6d3a8)!important}
body.inkmap .sky canvas{opacity:0}
body.inkmap .sky::after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(90,55,20,.55),inset 0 0 24px rgba(60,35,10,.5)}
body.inkmap .screen,body.inkmap .screen *{font-family:"IM Fell English",Georgia,serif!important;letter-spacing:0!important;text-shadow:none!important}
body.inkmap .screen{color:#3b2414}
body.inkmap .bubble{color:#3b2414;filter:none!important}
body.inkmap .bubble::before{background:rgba(255,248,228,.55)!important;box-shadow:none!important;border:2px dashed #6b4a2b;clip-path:none!important;border-radius:10px 18px 12px 16px!important}
body.inkmap .msg.me .bubble::before{background:rgba(236,214,170,.6)!important;border-color:#8e1b1b}
body.inkmap .tag{background:#f6ebce!important;color:#3b2414!important;border:1.5px solid #3b2414!important;border-radius:3px 10px 3px 10px;box-shadow:2px 2px 0 rgba(59,36,20,.35)!important;font-style:italic}
body.inkmap .compose,body.inkmap .top,body.inkmap .pinbar,body.inkmap .dailybar,body.inkmap .herebar{background:rgba(231,212,166,.92)!important;border-color:#3b2414!important;border-style:double!important}
body.inkmap .field,body.inkmap textarea{background:rgba(255,250,235,.7)!important;color:#3b2414!important;border:2px solid #6b4a2b!important;border-radius:8px}
body.inkmap .field::placeholder,body.inkmap textarea::placeholder{color:#9a7a55;font-style:italic}
body.inkmap .go,body.inkmap .send{background:#3b2414!important;color:#f3e6c4!important;border-color:#3b2414!important;border-radius:6px;box-shadow:2px 2px 0 #8e1b1b!important}
body.inkmap .ghost,body.inkmap .icon,body.inkmap .tabs button{color:#3b2414!important;border-color:#3b2414!important}
body.inkmap .sheet{background:url("data:image/svg+xml;utf8,"),radial-gradient(ellipse at 18% 22%,rgba(150,100,40,.18),transparent 38%),radial-gradient(ellipse at 82% 70%,rgba(140,90,30,.16),transparent 42%),radial-gradient(ellipse at 60% 8%,rgba(255,250,230,.5),transparent 50%),linear-gradient(#efe2c2,#e6d3a8)!important;color:#3b2414;box-shadow:0 0 0 3px #3b2414,6px 6px 0 3px rgba(59,36,20,.4)!important}
body.inkmap .sheet h2{background:none!important;color:#3b2414!important;border-bottom:2px solid #3b2414}
body.inkmap .face .fi{filter:sepia(.9) contrast(1.05) brightness(.95);background-color:#d8c08f!important;color:#3b2414!important}
body.inkmap .face::after{border-color:#efe2c2!important}
body.inkmap .roomrow,body.inkmap .popt,body.inkmap .toast,body.inkmap .xpbox,body.inkmap .hintbox{background:rgba(250,240,214,.85)!important;color:#3b2414!important;border:1.5px solid #6b4a2b!important;box-shadow:2px 2px 0 rgba(59,36,20,.3)!important}
body.inkmap .roomrow *,body.inkmap .popt *,body.inkmap .toast *{color:inherit}
body.inkmap .roomrow .rtime,body.inkmap .roomrow small,body.inkmap .toast .ttext{color:#7a5a3a!important}
body.inkmap .toast .ttitle{color:#8e1b1b!important}
body.inkmap .weekday,body.inkmap .lvlpill,body.inkmap .tabbadge,body.inkmap .hash,body.inkmap .daybreak{color:#3b2414!important;background:rgba(250,240,214,.85)!important;border-color:#3b2414!important}
body.inkmap .feed img,body.inkmap .feed video{filter:sepia(.35)}
/* the spells */
.im-ink{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#2a170b 0 55%,#3b2414 70%,rgba(59,36,20,0) 72%);animation:iminkgrow 1.1s cubic-bezier(.6,0,.4,1) forwards}
@keyframes iminkgrow{70%{transform:scale(160);opacity:1}100%{transform:scale(220);opacity:1}}
.im-reveal{position:absolute;inset:0;background:url("data:image/svg+xml;utf8,"),radial-gradient(ellipse at 18% 22%,rgba(150,100,40,.18),transparent 38%),radial-gradient(ellipse at 82% 70%,rgba(140,90,30,.16),transparent 42%),radial-gradient(ellipse at 60% 8%,rgba(255,250,230,.5),transparent 50%),linear-gradient(#efe2c2,#e6d3a8);animation:imreveal 1.1s ease-out 1.15s both}
@keyframes imreveal{0%{clip-path:circle(0% at 50% 50%)}100%{clip-path:circle(150% at 50% 50%)}}
.im-words{position:absolute;left:50%;top:40%;transform:translateX(-50%);width:min(86vw,440px);text-align:center;color:#3b2414;font:italic clamp(24px,7vw,38px)/1.15 "IM Fell English",Georgia,serif;clip-path:inset(0 100% 0 0);animation:imwrite 1.6s steps(28) 1.7s forwards}
@keyframes imwrite{to{clip-path:inset(0 0 0 0)}}
.im-sheet{position:absolute;inset:0;perspective:1400px}
.im-half{position:absolute;left:0;right:0;background:url("data:image/svg+xml;utf8,"),radial-gradient(ellipse at 18% 22%,rgba(150,100,40,.18),transparent 38%),radial-gradient(ellipse at 82% 70%,rgba(140,90,30,.16),transparent 42%),radial-gradient(ellipse at 60% 8%,rgba(255,250,230,.5),transparent 50%),linear-gradient(#efe2c2,#e6d3a8);box-shadow:inset 0 0 60px rgba(90,55,20,.45);backface-visibility:hidden}
.im-half.top{top:0;height:50%;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.6,0,.4,1);z-index:2}
.im-half.bot{bottom:0;height:50%}
.im-sheet.f1 .im-half.top{transform:rotateX(-180deg)}
.im-letter{position:absolute;left:50%;top:50%;width:min(70vw,300px);height:min(44vw,190px);margin:calc(min(44vw,190px)/-2) 0 0 calc(min(70vw,300px)/-2);background:url("data:image/svg+xml;utf8,"),radial-gradient(ellipse at 18% 22%,rgba(150,100,40,.18),transparent 38%),radial-gradient(ellipse at 82% 70%,rgba(140,90,30,.16),transparent 42%),radial-gradient(ellipse at 60% 8%,rgba(255,250,230,.5),transparent 50%),linear-gradient(#efe2c2,#e6d3a8);box-shadow:0 0 0 2px #6b4a2b,4px 6px 0 rgba(0,0,0,.25);animation:imletter .5s ease-out both}
.im-letter::before{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:linear-gradient(to bottom right,transparent 49%,#6b4a2b 49.5%,transparent 51%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#6b4a2b 49.5%,transparent 51%) right/50% 100% no-repeat}
.im-letter::after{content:"M";position:absolute;left:50%;top:62%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c23a3a,#8e1b1b 60%,#5e0f0f);color:#f3c9b0;display:grid;place-items:center;font:italic 22px "IM Fell English",Georgia,serif;box-shadow:0 2px 0 #4a0a0a}
@keyframes imletter{from{transform:scale(1.8,3.2);opacity:.6}to{transform:none;opacity:1}}
.im-letter.fly{animation:imfly 1.1s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes imfly{0%{transform:none}20%{transform:translateY(10px) rotate(-6deg)}100%{transform:translate(70vw,-90vh) rotate(28deg) scale(.4);opacity:0}}
body.im-glitch .screen{animation:imglitch .7s steps(2) both}
@keyframes imglitch{0%{filter:hue-rotate(90deg) contrast(1.6);transform:translateX(-6px)}30%{filter:none;transform:translateX(5px)}60%{filter:saturate(2);transform:translateX(-2px)}100%{filter:none;transform:none}}
.face.frame-quill{--fr:linear-gradient(135deg,#f3e6c4,#c9a86a 45%,#6b4a2b);filter:drop-shadow(0 0 4px rgba(107,74,43,.7))}
.face.frame-quill>.frx::after{content:"๐ชถ";position:absolute;right:-.3em;top:-.45em;font-size:max(12px,.5em);transform:rotate(20deg)}
/* ===================== /INK MAP ===================== */
/* ===================== ๐ธ๏ธ COMIC VERSE MODE ("Anyone can wear the mask" / "That's a canon event") =====================
Only on the phone that said it. Comic-print look: halftone dots, off-register red/cyan ink, thick panel outlines,
caption boxes, stepped animation, spray drips. Art style only: no characters, no logos. */
body.verse{--night:#140a2e;--deep:#2b0b45;--white:#fffdf3;--muted:#c9b8ff;--cyan:#00e5ff;--mag:#ff2d55;--volt:#ffe600}
body.verse .sky{background:
radial-gradient(circle,rgba(255,45,85,.38) 1.3px,transparent 1.8px) 0 0/10px 10px,
radial-gradient(circle,rgba(0,229,255,.22) 1.1px,transparent 1.6px) 5px 5px/10px 10px,
radial-gradient(circle at 85% 8%,rgba(255,230,0,.25),transparent 40%),
linear-gradient(170deg,#1a0b3a,#3b0b4f 60%,#140a2e)}
body.verse .sky canvas{opacity:.18}
body.verse .sky::after{content:"";position:fixed;inset:0;pointer-events:none;background:
url("data:image/svg+xml;utf8,") left top/160px 90px no-repeat,
url("data:image/svg+xml;utf8,") right top/120px 70px no-repeat,
repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
body.verse .screen,body.verse .screen *{font-family:"Comic Neue","Comic Sans MS",system-ui,sans-serif}
body.verse .top,body.verse .compose,body.verse .pinbar,body.verse .dailybar,body.verse .herebar{background:rgba(20,10,46,.94)!important;border-color:#000!important;border-width:3px!important;box-shadow:0 3px 0 var(--mag)}
body.verse .top h1,body.verse .top .title,body.verse .top b,body.verse .tag,body.verse .sheet h2{font-family:"Bangers","Anton",sans-serif!important;letter-spacing:1px}
body.verse .bubble{color:#111;font-weight:700;filter:none!important;text-shadow:none}
body.verse .bubble::before{background:#fffdf3!important;clip-path:none!important;border:3px solid #000;border-radius:4px;box-shadow:4px 4px 0 #000,6px 6px 0 var(--mag)!important}
body.verse .msg.me .bubble::before{background:
radial-gradient(circle,rgba(255,45,85,.22) 1.2px,transparent 1.6px) 0 0/7px 7px,#ffe600!important;box-shadow:4px 4px 0 #000,6px 6px 0 var(--cyan)!important}
body.verse .bubble a{color:#c4002f}
body.verse .msg.me .bubble,body.verse .msg.me.custom .bubble{color:#111!important} /* your caption box is always yellow, so the ink is always black (custom bubble colors had white text) */
body.verse .msg.me .bubble a{color:#c4002f!important}
body.verse .tag{background:var(--mag)!important;color:#fff!important;border:2.5px solid #000!important;box-shadow:2px 2px 0 #000;text-shadow:-1.5px 0 var(--cyan),1.5px 0 #000;font-size:14px;transform:rotate(-4deg)}
body.verse .screen h1,body.verse .screen h2,body.verse .weekday,body.verse .daybreak{text-shadow:-2px 0 var(--mag),2px 0 var(--cyan)!important}
body.verse .go,body.verse .send{background:var(--volt)!important;color:#000!important;border:3px solid #000!important;box-shadow:3px 3px 0 var(--mag)!important;font-family:"Bangers","Anton",sans-serif!important;letter-spacing:1px}
body.verse .field,body.verse textarea{background:#fffdf3!important;color:#111!important;border:3px solid #000!important;border-radius:4px;box-shadow:3px 3px 0 var(--cyan)}
body.verse .field::placeholder,body.verse textarea::placeholder{color:#7a6a9a}
body.verse .sheet{background:radial-gradient(circle,rgba(255,45,85,.18) 1.2px,transparent 1.7px) 0 0/10px 10px,#1a0b3a!important;border:3px solid #000!important}
body.verse .roomrow,body.verse .popt,body.verse .toast{border:2.5px solid #000!important;box-shadow:3px 3px 0 var(--mag)!important}
body.verse .face .fi{filter:contrast(1.15) saturate(1.3)}
body.verse .msg{animation:svpop .36s steps(3) both}
@keyframes svpop{0%{transform:scale(.6) rotate(-4deg);opacity:0}50%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:none}}
body.verse .msg.sv-split .bubble{animation:svsplit .5s steps(4) both}
@keyframes svsplit{0%{transform:translate(-5px,0) skewX(-8deg);filter:drop-shadow(-6px 0 0 var(--cyan)) drop-shadow(6px 0 0 var(--mag)) hue-rotate(90deg)}
40%{transform:translate(6px,-2px) skewX(6deg);filter:drop-shadow(5px 0 0 var(--volt)) drop-shadow(-5px 0 0 var(--mag))}
75%{transform:translate(-2px,1px);filter:drop-shadow(-3px 0 0 var(--cyan)) hue-rotate(-60deg)}100%{transform:none;filter:none}}
/* typing: a comic thought bubble with spider-sense squiggles */
.sv-think{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;position:relative}
.sv-think .sv-cloud{position:relative;display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:radial-gradient(circle,rgba(255,45,85,.28) 1.2px,transparent 1.6px) 0 0/7px 7px,#fffdf3;border:3px solid #000;border-radius:999px;box-shadow:3px 3px 0 var(--cyan);color:#111;font:16px/1 "Bangers","Anton",sans-serif;letter-spacing:1px}
.sv-think .sv-cloud::before,.sv-think .sv-cloud::after{content:"";position:absolute;background:#fffdf3;border:2.5px solid #000;border-radius:50%}
.sv-think .sv-cloud::before{width:10px;height:10px;left:-8px;bottom:-6px}
.sv-think .sv-cloud::after{width:6px;height:6px;left:-15px;bottom:-11px}
.sv-think .sv-dots i{display:inline-block;width:6px;height:6px;margin:0 1px;background:#000;border-radius:50%;animation:svdot .9s steps(2) infinite}
.sv-think .sv-dots i:nth-child(2){animation-delay:.15s}.sv-think .sv-dots i:nth-child(3){animation-delay:.3s}
@keyframes svdot{50%{transform:translateY(-4px)}}
.sv-think .sv-sense{width:26px;height:22px;animation:svsense .32s steps(2) infinite}
@keyframes svsense{50%{transform:translate(1px,-1px) scale(1.12)}}
/* the onomatopoeia when you send */
.sv-sfx{position:fixed;z-index:61;pointer-events:none;padding:10px 18px;font:clamp(26px,8vw,40px)/1 "Bangers","Anton",sans-serif;letter-spacing:2px;color:var(--volt);-webkit-text-stroke:1.5px #000;text-shadow:3px 3px 0 #000,-2px 0 var(--cyan),5px 4px 0 var(--mag);
background:radial-gradient(circle,rgba(0,0,0,.25) 1.2px,transparent 1.7px) 0 0/7px 7px,#fff;clip-path:polygon(50% 0,61% 22%,85% 8%,78% 33%,100% 40%,80% 55%,96% 80%,70% 72%,62% 100%,48% 78%,30% 98%,28% 72%,2% 84%,18% 58%,0 38%,22% 32%,14% 6%,38% 22%);
animation:svsfx .9s steps(5) forwards}
@keyframes svsfx{0%{transform:scale(.2) rotate(-14deg);opacity:0}25%{transform:scale(1.15) rotate(6deg);opacity:1}70%{transform:scale(1) rotate(-3deg);opacity:1}100%{transform:scale(1.25) rotate(0);opacity:0}}
/* the spells */
.sxscene.sv-portal{background:radial-gradient(circle,rgba(0,0,0,.35) 1.4px,transparent 2px) 0 0/9px 9px}
.sv-ring{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:8px solid var(--c);box-shadow:0 0 0 3px #000,inset 0 0 0 3px #000;animation:svring 1.6s steps(8) var(--d) both}
@keyframes svring{0%{transform:scale(0) rotate(0);opacity:1}70%{opacity:1}100%{transform:scale(34) rotate(40deg);opacity:0}}
.sv-cap{font-family:"Bangers","Anton",sans-serif!important;letter-spacing:2px;color:#000!important;background:var(--volt);border:3px solid #000;padding:8px 16px;box-shadow:5px 5px 0 #000,8px 8px 0 var(--mag);text-shadow:none!important;transform:translateX(-50%) rotate(-3deg)!important;font-size:clamp(24px,7.5vw,44px)!important}
.sv-slice{position:absolute;left:-10%;width:120%;background:var(--c);mix-blend-mode:difference;animation:svslice .9s steps(6) var(--d) both}
@keyframes svslice{0%{transform:translateX(-30%);opacity:0}20%{opacity:.9}50%{transform:translateX(18%)}80%{transform:translateX(-8%);opacity:.9}100%{transform:none;opacity:0}}
body.sv-leap .screen{animation:svleap 1.5s steps(14) both}
@keyframes svleap{0%{transform:none}30%{transform:translateY(105vh) rotate(4deg)}55%{transform:translateY(-6vh) rotate(-3deg)}75%{transform:translateY(2vh)}100%{transform:none}}
.face.frame-verse{--fr:conic-gradient(from 20deg,#ff2d55,#ffe600,#00e5ff,#ff2d55);filter:drop-shadow(-2px 0 0 #00e5ff) drop-shadow(2px 0 0 #ff2d55)}
.face.frame-verse>.frx::after{content:"๐ธ๏ธ";position:absolute;right:-.3em;top:-.45em;font-size:max(12px,.5em);transform:rotate(-12deg)}
/* ๐ท๏ธ Spider-Verse on computers: same comic look, but calmer and easier to read */
@media (any-pointer:fine){
body.verse .sky{background:radial-gradient(circle,rgba(255,45,85,.14) 1.2px,transparent 1.7px) 0 0/12px 12px,radial-gradient(circle at 85% 8%,rgba(255,230,0,.16),transparent 40%),linear-gradient(170deg,#1a0b3a,#2a0b42 60%,#140a2e)}
body.verse .sky::after{opacity:.55}
body.verse .bubble{font-size:15.5px;line-height:1.45;font-weight:700;letter-spacing:.1px}
body.verse .bubble::before{border-width:2.5px!important;box-shadow:3px 3px 0 #000!important}
body.verse .msg.me .bubble::before{background:#ffe600!important;box-shadow:3px 3px 0 #000!important} /* plain yellow: no dots behind the words */
body.verse .tag{transform:rotate(-2deg);text-shadow:none;font-size:13px;box-shadow:2px 2px 0 #000}
body.verse .top,body.verse .compose,body.verse .pinbar,body.verse .dailybar,body.verse .herebar{border-width:2px!important;box-shadow:0 2px 0 var(--mag)}
body.verse .field,body.verse textarea{border-width:2px!important;box-shadow:2px 2px 0 var(--cyan)}
body.verse .roomrow,body.verse .popt,body.verse .toast{border-width:2px!important;box-shadow:2px 2px 0 var(--mag)!important}
body.verse .screen h1,body.verse .screen h2,body.verse .weekday,body.verse .daybreak{text-shadow:-1px 0 var(--mag),1px 0 var(--cyan)!important}
body.verse .msg{animation-duration:.24s}
}
@media (prefers-reduced-motion:reduce){body.verse .msg,body.verse .msg.sv-split .bubble,.sv-think .sv-sense,.sv-think .sv-dots i{animation:none}}
/* ===================== /COMIC VERSE ===================== */
/* ===================== ๐ฆ VOL + TRON: Kenneth / Keith ===================== */
.vt-wrap{position:absolute;left:50%;top:44%;width:min(92vw,560px);transform:translate(-50%,-50%) rotate(-2deg);animation:vtin .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes vtin{from{transform:translate(-50%,-50%) scale(.3) rotate(-14deg);opacity:0}to{transform:translate(-50%,-50%) rotate(-2deg);opacity:1}}
.vt-photo{position:relative;border:4px solid #fff;box-shadow:6px 6px 0 #d81e2c,12px 12px 0 #1e5bff,0 18px 40px rgba(0,0,0,.6);overflow:hidden;background:#000}
.vt-photo img{display:block;width:100%;height:auto}
.vt-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(216,30,44,.0),rgba(216,30,44,.18) 0 50%,rgba(30,91,255,.18) 50% 100%);opacity:0;animation:vttint .5s ease 1.4s forwards}
@keyframes vttint{to{opacity:1}}
.vt-word{position:absolute;font:clamp(28px,9vw,58px)/1 "Anton","Bangers",sans-serif;letter-spacing:2px;color:#fff;-webkit-text-stroke:2px #fff;transform:translate(-50%,-50%) scale(0);opacity:0;animation:vtstamp .45s cubic-bezier(.2,1.6,.4,1) forwards;z-index:2}
.vt-word.vol{left:27%;top:80%;color:#e8202f;-webkit-text-stroke:2px #fff;text-shadow:0 0 14px rgba(232,32,47,.9),3px 3px 0 #5a0008;animation-delay:.9s}
.vt-word.tron{left:70%;top:82%;color:#1e5bff;-webkit-text-stroke:2px #fff;text-shadow:0 0 14px rgba(30,91,255,.9),3px 3px 0 #04154f;animation-delay:1.35s}
@keyframes vtstamp{0%{transform:translate(-50%,-50%) scale(2.4) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:1}}
.vt-plus{position:absolute;left:48.5%;top:82%;transform:translate(-50%,-50%);font:clamp(20px,6vw,36px)/1 "Anton",sans-serif;color:#fff;opacity:0;animation:vtfade .3s ease 1.75s forwards;text-shadow:0 0 10px #fff;z-index:2}
@keyframes vtfade{to{opacity:1}}
.vt-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%);opacity:0;animation:vtflash .6s ease 1.8s forwards;pointer-events:none}
@keyframes vtflash{30%{opacity:1}100%{opacity:0}}
/* ===================== /VOL + TRON ===================== */
.dg-scene{position:absolute;inset:0;background:#000;opacity:0;animation:dgin .6s ease forwards;transition:opacity .8s}
.dg-scene.out{opacity:0!important}
@keyframes dgin{to{opacity:1}}
.dg-stars i{position:absolute;width:3px;height:3px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:dgtwinkle 1.6s ease-in-out infinite alternate;transform:scale(1.6)}
@keyframes dgtwinkle{from{opacity:.25}to{opacity:1;transform:scale(2.4)}}
.dg-moon{position:absolute;left:50%;top:44%;width:min(62vw,260px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff200;box-shadow:0 0 60px 10px rgba(255,242,0,.25)}
.dg-dragon{position:absolute;top:44%;left:-40%;width:min(46vw,190px);transform:translateY(-50%);animation:dgfly 4.6s cubic-bezier(.45,.05,.55,.95) both}
@keyframes dgfly{0%{left:-40%;transform:translateY(-30%) scale(.7)}45%{transform:translateY(-55%) scale(1)}55%{transform:translateY(-55%) scale(1)}100%{left:120%;transform:translateY(-80%) scale(.75)}}
/* ===== one piece chest ===== */
.op-wrap{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;background:radial-gradient(circle at 50% 45%,rgba(60,30,0,.5),rgba(0,0,0,.85));animation:sxfadein .3s ease both}
.op-chest{position:relative;width:200px;height:150px;margin:0 auto}
.op-body{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(#7a4a1e,#4a2a0e);border:5px solid #2a1606;border-radius:6px 6px 10px 10px;box-shadow:inset 0 0 0 6px #b8862e,8px 8px 0 #07041A}
.op-body b{position:absolute;left:50%;top:-4px;width:34px;height:40px;transform:translateX(-50%);background:#d4a537;border:4px solid #2a1606;border-radius:4px}
.op-lid{position:absolute;left:0;right:0;top:0;height:70px;background:linear-gradient(#8a5a2a,#5a3410);border:5px solid #2a1606;border-radius:60px 60px 6px 6px;box-shadow:inset 0 0 0 6px #b8862e;transform-origin:50% 100%;transition:transform 1.4s cubic-bezier(.3,.9,.4,1);z-index:2}
.op-lid i{position:absolute;left:50%;bottom:6px;width:22px;height:14px;transform:translateX(-50%);background:#d4a537;border:3px solid #2a1606}
.op-glow{position:absolute;left:10%;right:10%;top:40px;height:60px;background:radial-gradient(ellipse at 50% 100%,#fff6a8,#ffd84a 40%,rgba(255,216,74,0) 75%);opacity:0;transition:opacity 1s;z-index:1}
.op-wrap.open .op-lid{transform:rotateX(-70deg) translateY(-10px)}
.op-wrap.open .op-glow{opacity:1}
.op-wrap.slam .op-lid{transition:transform .12s ease-in;transform:none}
.op-wrap.slam .op-glow{transition:opacity .12s;opacity:0}
.op-wrap.slam .op-chest{animation:sxjitter .08s linear 6}
.op-cap{color:#ffd84a}
/* ===== XP ===== */
.xpbox{width:100%;display:grid;gap:6px;border:2px solid var(--cyan);padding:10px;background:rgba(0,240,255,.06)}
.xphead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--tech)}
.xphead b{font-size:18px;color:var(--volt)}.xphead span{font-size:12px;color:var(--cyan)}
.xpbar{height:14px;border:2px solid var(--white);overflow:hidden;clip-path:polygon(0 0,100% 0,98% 100%,2% 100%)}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--volt));transition:width .5s ease}
.xptext{font-size:13px;color:var(--muted);text-align:left}
.xpways{display:flex;flex-wrap:wrap;gap:6px}
.xpbox:not(.open) .xpways{display:none}
.xpmore{justify-self:start;background:none;border:none;padding:0;font-family:var(--tech);font-size:11px;color:var(--cyan);cursor:pointer}
#profile #changePhoto{justify-self:center}
.xpfloat{pointer-events:none;font-family:var(--num);font-size:24px;color:var(--volt);text-shadow:2px 2px 0 var(--night);animation:qxup 1.4s ease-out both;justify-self:end;margin-right:16px}
/* ===== kenough ===== */
.ken-wrap{position:absolute;inset:0;overflow:hidden;opacity:0;animation:dgin .6s ease forwards;transition:opacity .8s;background:#000}
.ken-wrap.out{opacity:0!important}
.ken-bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(18px) brightness(.55)}
.ken-img{position:absolute;left:0;right:0;top:50%;width:100%;transform:translateY(-58%);object-fit:contain;border-top:4px solid #ff8ac6;border-bottom:4px solid #ff8ac6;animation:kenzoom 5s ease-out both}
@keyframes kenzoom{from{transform:translateY(-58%) scale(1.1)}to{transform:translateY(-58%) scale(1)}}
.ken-text{position:absolute;left:50%;bottom:14%;transform:translateX(-50%) rotate(-3deg);text-align:center;color:#1d2b8a;background:#ff8ac6;border:5px solid #fff;padding:6px 22px;box-shadow:8px 8px 0 #1d2b8a;animation:sxslam 4.4s cubic-bezier(.2,1.4,.4,1) both;white-space:nowrap}
.ken-text span{display:block;font-family:var(--body);font-weight:700;font-size:clamp(18px,6vw,26px)}
.ken-text b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,12vw,64px);line-height:1}
/* ===== gifs ===== */
.gifbar{display:flex;gap:6px;margin-bottom:6px}
.gifbar .field{flex:1;min-width:0;padding:8px 10px;font-size:15px}
.gifgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:220px;overflow-y:auto}
.gifpick{background:#000;border:2px solid transparent;padding:0;height:90px;overflow:hidden}
.gifpick img{width:100%;height:100%;object-fit:cover;display:block}
.gifpick:focus-visible,.gifpick:hover{border-color:var(--volt)}
.gifgrid .note{grid-column:1/-1;text-align:center;font-size:13px}
#gbGrid{max-height:52vh;width:100%}
.gifcredit{font-family:var(--tech);font-size:10px;color:var(--muted)}
/* ===== dice ===== */
.dn-face{position:absolute;inset:0;background:#07041A;border:5px solid var(--cyan);box-shadow:7px 7px 0 var(--mag)}
.dn-circle .dn-face{border-radius:50%}
.dn-coin .dn-face{border-radius:50%;background:#b8860b;border-color:#ffd84a}
.dn-triangle .dn-face{clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none;border:none;background:var(--cyan)}
.dn-triangle .dn-face::after{content:"";position:absolute;inset:8px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#07041A}
.dn-square .dn-face{border-radius:14px}
.dn-diamond .dn-face{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border:none;box-shadow:none;background:var(--cyan)}
.dn-diamond .dn-face::after{content:"";position:absolute;inset:7px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#07041A}
.dn-kite .dn-face{clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);border:none;box-shadow:none;background:var(--cyan)}
.dn-kite .dn-face::after{content:"";position:absolute;inset:7px;clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);background:#07041A}
.dn-pentagon .dn-face{clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);border:none;box-shadow:none;background:var(--cyan)}
.dn-pentagon .dn-face::after{content:"";position:absolute;inset:7px;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);background:#07041A}
.dn-label{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:var(--tech);font-size:12px;color:var(--cyan)}
.dn-triangle .sx-dnum{transform:translateY(-30%)}
/* ===== ghostface-style call ===== */
.gf-call{gap:10px}
.gf-mask{width:90px;margin:0 auto;animation:gfbreathe 1.2s ease-in-out infinite alternate;filter:drop-shadow(0 0 16px rgba(255,255,255,.4))}
@keyframes gfbreathe{to{transform:scale(1.06) rotate(-3deg)}}
.gf-line{font-size:18px;color:#eee;font-style:italic;max-width:80vw;margin:0 auto}
/* ===== pot of greed ===== */
.pg-wrap{position:absolute;inset:0;display:grid;place-content:center;gap:16px;text-align:center;background:rgba(0,0,0,.75);animation:sxfadein .3s ease both;perspective:800px}
.pg-card{position:relative;width:150px;height:220px;margin:0 auto;transform-style:preserve-3d;animation:pgdraw .8s cubic-bezier(.2,1.2,.4,1) both;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.pg-wrap.flip .pg-card{transform:rotateY(180deg)}
@keyframes pgdraw{from{transform:translateY(60vh) rotate(-20deg)}}
.pg-back,.pg-front{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;border:4px solid #3b2a12}
.pg-back{background:radial-gradient(circle,#6b3a1a,#3b2210);display:grid;place-items:center;font-size:48px;color:#d9a441}
.pg-front{background:linear-gradient(160deg,#6a2fa0,#3d1766);transform:rotateY(180deg);padding:8px;display:grid;grid-template-rows:auto 1fr auto auto;gap:4px;color:#07041A;text-align:left}
.pg-name{font-family:var(--tech);font-size:11px;font-weight:900;background:#fff6c8;padding:3px 5px;border:2px solid #07041A}
.pg-art{background:radial-gradient(circle,#4b2378,#23103d);border:2px solid #07041A;display:grid;place-items:center}
.pg-art svg{width:80%}
.pg-type{font-size:10px;font-family:var(--tech)}
.pg-text{font-size:12px;background:#fff6c8;border:2px solid #07041A;padding:3px 5px}
.pg-cap{color:#ffd84a;max-width:84vw}
/* ===== yugioh ===== */
.yg-wrap{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(255,216,74,.35),rgba(20,8,0,.85) 70%);animation:sxflash 4.2s ease both}
.yg-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,rgba(255,216,74,.3) 0 5deg,transparent 5deg 15deg);animation:sxrays 4.2s linear both}
.yg-eye{position:absolute;left:50%;top:38%;width:min(60vw,240px);transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px #ffd84a);animation:sxslam 4s cubic-bezier(.2,1.4,.4,1) both}
.yg-glyphs i{position:absolute;font-style:normal;font-size:30px;color:#ffd84a;text-shadow:0 0 10px #ffb300;animation:ygglyph 1.2s ease-in-out infinite alternate}
@keyframes ygglyph{from{opacity:.3;transform:translateY(0)}to{opacity:1;transform:translateY(-8px)}}
.yg-cap{position:absolute;left:0;right:0;bottom:22%;text-align:center;color:#ffd84a;letter-spacing:2px}
/* ===== consoles ===== */
.cs-wrap{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;animation:sxflash 3.6s ease both}
.cs-glow{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px var(--csc);animation:cspulse 1.2s ease-in-out 3 alternate}
.cs-blue{--csc:#1e6fff}.cs-green{--csc:#2ecc40}
@keyframes cspulse{from{opacity:.4}to{opacity:1}}
.cs-logo{width:120px;margin:0 auto;filter:drop-shadow(0 0 18px var(--csc));animation:csfade 3.6s ease both}
@keyframes csfade{0%{opacity:0;transform:scale(.8)}25%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
.cs-text{font-family:var(--tech);font-size:13px;color:#fff;letter-spacing:3px;animation:sxblink .8s steps(1) infinite}
/* ===== shot first ===== */
.sf-wrap{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(120,80,20,.5),rgba(0,0,0,.9) 70%);animation:sxfadein .3s ease both}
.sf-man{position:absolute;left:50%;bottom:16%;width:min(40vw,150px);transform:translateX(-50%)}
.sf-man svg{width:100%;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.6,0,.9,.5)}
.sf-arm{transform-origin:78px 70px;animation:sfaim 1.2s ease both}
@keyframes sfaim{from{transform:rotate(60deg)}to{transform:rotate(0)}}
.sf-flash{position:absolute;inset:0;background:#fff;opacity:0}
.sf-wrap.bang .sf-flash{animation:sfbang .35s ease both}
@keyframes sfbang{20%{opacity:.95}100%{opacity:0}}
.sf-wrap.down .sf-man svg{transform:rotate(88deg) translateY(30%)}
.sf-cap{position:absolute;left:0;right:0;top:20%;text-align:center;color:#ffd84a}
/* ===== unlockables ===== */
.unlockbox{width:100%;display:grid;gap:8px;border:2px dashed #3b2d80;padding:10px;justify-items:start}
.unlockcount{font-family:var(--tech);font-size:13px;color:var(--volt)}
.unlockgroup{font-family:var(--tech);font-size:11px;color:var(--cyan);margin-top:6px;width:100%}
#unlockList{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.framerow{display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:center}
.framepick{background:var(--deep);border:2px solid #3b2d80;padding:8px 6px 7px;font-family:var(--tech);font-size:10.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px;width:76px}
.framepick.on{border-color:var(--volt);box-shadow:3px 3px 0 var(--mag);color:var(--white)}
.framepick .face{width:40px;height:40px;font-size:18px;display:block}
.framelabel{white-space:normal;text-align:center;line-height:1.2;max-width:100%;word-break:break-word}
/* frames */
@keyframes frglitch{0%,90%,100%{transform:none}92%{transform:translate(-2px,1px) skewX(6deg)}95%{transform:translate(2px,-1px)}}
@keyframes frspin{to{transform:rotate(360deg)}}
.mini-faces .face::before,.mini-faces .face::after,.face.sm::after{display:none}
/* new themes */
body.theme-redrum{--night:#0a0102;--deep:#1c0508;--white:#ffe9e9;--muted:#b06a6a}
body.theme-redrum .app,body.theme-redrum .sky{background:radial-gradient(circle at 50% 20%,#3a0208,#0a0102 70%)!important}
body.theme-redrum .bubble::before{background:#1c0508!important;box-shadow:inset 0 0 0 2px #ff1a1a}
body.theme-redrum .msg.me .bubble::before{background:#4a0a10!important}
body.theme-lab{--night:#120a03;--deep:#241407;--white:#ffe6c4;--muted:#c99a5b}
body.theme-lab .app,body.theme-lab .sky{background:radial-gradient(circle at 50% 30%,#2a1607,#120a03 70%)!important}
body.theme-lab .bubble::before{background:#241407!important;box-shadow:inset 0 0 0 2px #ff9a3d}
body.theme-lab .msg.me .bubble::before{background:#3d2208!important}
body.theme-lab .tag,body.theme-lab .roomname{font-family:ui-monospace,monospace!important;text-shadow:0 0 6px rgba(255,154,61,.6)}
body.theme-tvworld{--night:#1a1a08;--deep:#2b2a10;--white:#fff7cf;--muted:#b9b47a}
body.theme-tvworld .app,body.theme-tvworld .sky{background:radial-gradient(circle,#4a4614,#1a1a08 75%)!important}
body.theme-tvworld::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(0deg,rgba(255,240,150,.06) 0 2px,transparent 2px 4px)}
body.theme-tvworld .bubble::before{background:#2b2a10!important;box-shadow:inset 0 0 0 2px #ffe34a}
body.theme-plumber{--night:#0b1d4a;--deep:#153077;--white:#fff;--muted:#a9b8e6}
body.theme-plumber .app,body.theme-plumber .sky{background:linear-gradient(#0b1d4a,#153077)!important}
body.theme-plumber .bubble::before{background:#e4342f!important;box-shadow:inset 0 0 0 2px #fff}
body.theme-plumber .msg.me .bubble::before{background:#2e9b3a!important}
body.theme-plumber .go,body.theme-plumber .send{background:#ffd400;color:#0b1d4a}
body.theme-grandline{--night:#04101f;--deep:#0a2140;--white:#fff3d6;--muted:#9fb3c8}
body.theme-grandline .app,body.theme-grandline .sky{background:linear-gradient(#04101f,#0a2140 60%,#12365e)!important}
body.theme-grandline .bubble::before{background:#0a2140!important;box-shadow:inset 0 0 0 2px #ffd84a}
body.theme-grandline .msg.me .bubble::before{background:#1a3d6b!important}
body.theme-gold{--night:#120d02;--deep:#241a05;--white:#fff6d8;--muted:#c9b06a}
body.theme-gold .app,body.theme-gold .sky{background:radial-gradient(circle at 50% 20%,#3a2a08,#120d02 70%)!important}
body.theme-gold .bubble::before{background:#241a05!important;box-shadow:inset 0 0 0 2px #FFD86B}
body.theme-gold .msg.me .bubble::before{background:#4a3608!important}
body.theme-gold .go,body.theme-gold .send{background:linear-gradient(135deg,#FFD86B,#b8860b);color:#120d02}
/* new backgrounds */
#chat[data-bg="burning"]::before,.bgtile[data-bg="burning"]{background:linear-gradient(180deg,#140409 0%,#5c0f12 40%,#d2461a 75%,#ffb13b 100%)}
#chat[data-bg="burning"]::after{inset:auto 0 0 0;height:32%;background:repeating-linear-gradient(90deg,#07030a 0 26px,transparent 26px 34px,#07030a 34px 70px,transparent 70px 78px);-webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%)}
#chat[data-bg="darkhour"]::before,.bgtile[data-bg="darkhour"]{background:radial-gradient(circle at 70% 20%,#d8ffb0 0 12%,rgba(216,255,176,0) 13%),linear-gradient(180deg,#071a08,#0f2f12 60%,#1a4a1c)}
#chat[data-bg="wasteland"]::before,.bgtile[data-bg="wasteland"]{background:linear-gradient(180deg,#2b2417 0%,#5a4a2c 55%,#8a7448 100%)}
#chat[data-bg="wasteland"]::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px);opacity:.6}
#chat[data-bg="warp"]::before,.bgtile[data-bg="warp"]{background:radial-gradient(circle,#0b0b2a,#020208 70%)}
#chat[data-bg="warp"]::after{background:repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.35) 0 1px,transparent 1px 40px);animation:warpout 1.2s linear infinite}
@keyframes warpout{to{transform:scale(1.4);opacity:0}}
#chat[data-bg="matrix"]::before,.bgtile[data-bg="matrix"]{background:#010a03}
#chat[data-bg="matrix"]::after{background:repeating-linear-gradient(90deg,rgba(0,255,90,.12) 0 2px,transparent 2px 16px),repeating-linear-gradient(0deg,rgba(0,255,90,.1) 0 2px,transparent 2px 14px);animation:coderain 1.4s linear infinite;-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%)}
@keyframes coderain{to{background-position:0 0,0 140px}}
/* ===== search ===== */
.srch{background:none;border:2px solid var(--cyan);color:var(--cyan);width:34px;height:34px;display:grid;place-items:center;padding:0}
.srch svg{width:18px;height:18px}
.searchbar{display:flex;gap:8px;width:100%}
.searchbar .field{flex:1;min-width:0}
.sresults{display:grid;gap:8px;width:100%;max-height:52dvh;overflow-y:auto;text-align:left}
.srow{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:rgba(7,4,26,.7);border:2px solid #3b2d80;color:var(--white);padding:8px}
.srow .face{flex:none;width:34px;height:34px;font-size:15px}
.srow .info{flex:1;min-width:0}
.srhead{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srhead b{color:var(--cyan);font-family:var(--tech);font-size:11px}
.srsnip{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.srsnip mark{background:var(--volt);color:var(--night);padding:0 2px}
.sscope{color:var(--muted);font-size:14px;margin-top:-8px}
/* ===== presence ===== */
.receipt .mini-faces .face.online::after{display:none}
.lastseen{font-size:12px;color:var(--muted);margin-left:6px}
/* ===== link previews ===== */
.lpcard{--lc:var(--cyan);display:block;margin-top:10px;max-width:300px;background:rgba(7,4,26,.78);border:2px solid var(--lc);text-decoration:none!important;color:var(--white)!important;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);box-shadow:inset 0 0 22px rgba(0,0,0,.45);transition:box-shadow .2s,transform .15s}
.me .lpcard{--lc:var(--volt)}
.lpcard:hover,.lpcard:focus-visible{box-shadow:inset 0 0 22px rgba(0,0,0,.45),0 0 14px var(--lc);transform:translate(-1px,-1px)}
.lphead{display:flex;align-items:center;gap:8px;padding:4px 10px;background:var(--lc);color:var(--night);font-family:monospace;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.lphead i{font-style:normal;background:var(--night);color:var(--lc);padding:0 6px}
.lphost{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.lpgo{font-size:14px}
.lpbody{display:flex;gap:10px;align-items:stretch}
.lpimg{position:relative;flex:none;width:84px}
.lpimg img{display:block;width:84px;height:100%;min-height:72px;object-fit:cover;background:#000}
.lpimg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.lptext{display:grid;gap:3px;padding:8px 10px 9px 0;min-width:0;align-content:center}
.lpbody>.lptext:first-child{padding-left:10px}
.lptext b{font-size:15px;line-height:1.25;color:var(--white);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lpdesc{font-size:13px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lptext small{font-family:monospace;font-size:11px;color:var(--lc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* links inside messages: short, monospace, with a โ */
.bubble a.lnk{font-family:monospace;font-weight:700;font-size:.82em;text-decoration:none;border-bottom:2px solid currentColor;word-break:break-all}
.bubble a.lnk::after{content:" โ";font-size:.85em}
/* ===== front screen declutter ===== */
.front{padding-top:calc(env(safe-area-inset-top) + 10px)}
.front-inner{gap:18px;margin:0}
#front.logged .stamp{width:min(78%,300px);aspect-ratio:1.9;margin:0 auto -6px;transform:rotate(-5deg) scale(.92)}
#front.logged .stamp .phase{display:none}
#front.logged .stamp .day{font-size:clamp(76px,26vw,120px)}
#front.logged .stamp .month{font-size:clamp(48px,16vw,80px)}
#front.logged .stamp .weekday{font-size:clamp(13px,4.2vw,20px);bottom:16%}
#front.logged .stamp .icon{width:24%}
#front.logged .card{gap:10px}
.homebar{display:flex;align-items:center;gap:10px;min-width:0}
.homebar .face{width:44px;height:44px;font-size:20px;flex:none;cursor:pointer}
.homebar .who-text{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden}
.homebar .who-text b{font-family:var(--tech);color:var(--white);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvlpill{font-family:var(--tech);font-size:10px;color:var(--night);background:var(--volt);padding:2px 6px;flex:none}
.iconbtn{width:42px;height:42px;padding:0!important;display:grid;place-items:center;font-size:22px;line-height:1;flex:none}
.iconbtn svg{width:20px;height:20px}
.homebar .ghost{margin:0}
.joinpanel{display:grid;gap:8px;border:2px solid #3b2d80;padding:10px;background:rgba(7,4,26,.7);animation:rise .25s ease both}
.joinpanel .namerow .field{padding:10px 12px;font-size:16px}
.fronttabs{margin-top:2px}
.fronttabs .tab{padding:9px 4px;font-size:12px}
.addcontact .iconbtn{width:42px;height:42px;font-size:18px}
.installlink{font-size:14px}
#front:not(.logged) .front-inner{gap:44px;margin:auto 0}
/* ===== PERSONA-STYLE MENUS ===== */
/* ===== 2026.10.20x secrets: original art only ===== */
/* โ๏ธ together we ride */
.md-banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);padding:18px 34px;background:linear-gradient(#f1e2b8,#d9c08a);border:4px solid #6b4a1e;box-shadow:0 0 0 3px #e0b23a,6px 6px 0 #07041a;transform-origin:top center;animation:mdUnroll .9s cubic-bezier(.2,.9,.3,1.1) both}
.md-banner span{font-family:"IM Fell English",serif;font-style:italic;font-size:clamp(26px,7vw,46px);color:#5a2a12;white-space:nowrap}
@keyframes mdUnroll{0%{transform:translateX(-50%) scaleY(0)}100%{transform:translateX(-50%) scaleY(1)}}
.md-pennant{position:absolute;left:-20vw;width:10px;height:120px;background:#8a6a3a;border:2px solid #07041a;animation:mdCharge 2.6s linear both}
.md-pennant::after{content:"";position:absolute;left:8px;top:2px;width:54px;height:30px;background:var(--c);clip-path:polygon(0 0,100% 50%,0 100%);animation:mdFlap .25s ease-in-out infinite alternate}
@keyframes mdCharge{to{left:120vw}}
@keyframes mdFlap{to{transform:scaleY(.8) skewY(-6deg)}}
.md-frame{border:10px solid transparent;border-image:repeating-linear-gradient(90deg,#6c6f78 0 22px,#55585f 22px 24px,#7a7d86 24px 44px) 10;box-shadow:inset 0 0 0 3px #e0b23a}
#chat.md-chat .feed{filter:sepia(.55) saturate(1.15) hue-rotate(-8deg);transition:filter .6s}
/* ๐ society */
.js-hat{position:absolute;left:50%;top:14%;width:min(42vw,200px);transform:translateX(-50%);animation:jsDrop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes jsDrop{0%{transform:translate(-50%,-60vh) rotate(-20deg)}100%{transform:translate(-50%,0) rotate(0)}}
.js-card{position:absolute;left:50%;top:40%;width:44px;height:62px;display:grid;place-items:center;background:#f6f3ea;border:2px solid #07041a;border-radius:5px;font-size:26px;color:#07041a;animation:jsCard 1.8s ease-out both}
.js-card.red{color:#c8323c}
@keyframes jsCard{0%{transform:translate(-50%,0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--tx)),var(--ty)) rotate(var(--r));opacity:0}}
.js-ha{position:absolute;font-family:var(--num);font-size:clamp(30px,9vw,60px);text-shadow:3px 3px 0 #07041a;opacity:0;animation:jsHa .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes jsHa{0%{opacity:0;transform:scale(.3) rotate(-15deg)}60%{opacity:1;transform:scale(1.15) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
.sxcap.js-cap{top:auto;bottom:16%;font-size:clamp(20px,5vw,30px);color:#39ff9a}
/* ๐ฅ titans go */
.tt-lines{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.9) 0 2deg,transparent 2deg 9deg);opacity:0;animation:ttLines 1.4s ease-out .2s both}
@keyframes ttLines{0%{opacity:0;transform:scale(.6)}25%{opacity:.85}100%{opacity:0;transform:scale(1.3)}}
.tt-stripe{position:absolute;left:-110%;width:100%;height:10%;transform:skewX(-20deg);animation:ttStripe .9s cubic-bezier(.2,.9,.3,1) both}
@keyframes ttStripe{0%{left:-110%}45%{left:0}100%{left:120%}}
.tt-burst{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;padding:34px 60px;background:#ffe63a;clip-path:polygon(50% 0,61% 22%,86% 8%,78% 34%,100% 42%,80% 58%,94% 84%,66% 74%,54% 100%,42% 76%,14% 92%,22% 64%,0 50%,20% 36%,8% 10%,36% 22%);animation:ttBurst .6s cubic-bezier(.3,1.7,.5,1) .4s both}
@keyframes ttBurst{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
.tt-small{font-family:var(--num);font-size:clamp(20px,6vw,34px);color:#2f6bff;text-shadow:2px 2px 0 #07041a}
.tt-big{font-family:var(--num);font-size:clamp(54px,18vw,110px);line-height:.9;color:#e8313d;text-shadow:4px 4px 0 #07041a}
/* ๐ฅฃ cereal puffs */
.rp-bowl{position:absolute;left:50%;bottom:8%;width:min(70vw,320px);height:120px;transform:translateX(-50%);background:linear-gradient(#f4f6fb,#b9c3d6);border:4px solid #07041a;border-radius:0 0 160px 160px/0 0 120px 120px;overflow:hidden}
.rp-milk{position:absolute;left:0;right:0;top:0;height:22px;background:#fffdf4;border-bottom:3px solid #e9e0c8}
.rp-puff{position:absolute;top:-6%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a5532,#4a2410 70%);border:2px solid #2a1406;transform:scale(var(--s));animation:rpFall var(--d) cubic-bezier(.45,0,.9,.6) both}
.rp-puff.pb{background:radial-gradient(circle at 35% 35%,#f6c46a,#c88a2c 70%);border-color:#7a4e10}
@keyframes rpFall{0%{transform:translateY(0) scale(var(--s)) rotate(0)}100%{transform:translateY(calc(100vh - 140px)) scale(var(--s)) rotate(240deg)}}
.rp-drop{position:absolute;left:50%;bottom:calc(8% + 110px);width:10px;height:14px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#fffdf4;border:2px solid #d8cfb8;animation:rpDrop .8s ease-out both}
@keyframes rpDrop{0%{transform:translate(0,0)}60%{transform:translate(var(--dx),var(--dy))}100%{transform:translate(var(--dx),calc(var(--dy) + 80px));opacity:0}}
.sxcap.rp-cap{color:#f6c46a}
/* ๐ฎ capture orb (NightLane's own design) */
.po-orb{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#2a1b4a;border:4px solid #07041a;overflow:hidden;box-shadow:0 0 22px rgba(0,240,255,.6)}
.po-orb .po-top{position:absolute;inset:0 0 50% 0;background:linear-gradient(135deg,#00f0ff,#7a5cff)}
.po-orb .po-band{position:absolute;left:0;right:0;top:calc(50% - 4px);height:8px;background:#f3ff3a}
.po-orb .po-btn{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:#ff4fd8;border:3px solid #07041a;transform:rotate(45deg)}
.po-orb.throw{animation:poThrow 1.3s cubic-bezier(.3,0,.6,1) both,poWobble 2.1s ease-in-out 1.3s both}
@keyframes poThrow{0%{transform:translate(-45vw,40vh) rotate(-720deg) scale(.5)}60%{transform:translate(-10vw,-25vh) rotate(-200deg) scale(1.1)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes poWobble{0%,100%{transform:rotate(0)}8%,40%,72%{transform:rotate(-22deg)}16%,48%,80%{transform:rotate(18deg)}24%,56%,88%{transform:rotate(0)}}
.po-orb.release{animation:poThrow 1.3s cubic-bezier(.3,0,.6,1) both,poOpen .5s ease-in 1.3s both}
@keyframes poOpen{to{transform:scale(1.6);opacity:0}}
.po-burst{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:#fff;box-shadow:0 0 60px 40px #00f0ff,0 0 120px 80px rgba(255,79,216,.6);animation:poBurst 1.2s ease-out both}
@keyframes poBurst{0%{transform:scale(.2);opacity:1}100%{transform:scale(14);opacity:0}}
.po-star{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;background:#f3ff3a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:poStar .9s ease-out both}
@keyframes poStar{from{transform:rotate(var(--a)) translateY(0)}to{transform:rotate(var(--a)) translateY(-140px);opacity:0}}
.sxcap.po-cap{color:#f3ff3a;top:30%}
/* ๐พ a wild one appeared */
.wl-bars{position:absolute;inset:0;display:flex;flex-direction:column}
.wl-bars i{flex:1;background:#07041a;transform:scaleX(0);animation:wlBar 1.2s steps(6) both}
.wl-bars i:nth-child(odd){transform-origin:left}.wl-bars i:nth-child(even){transform-origin:right}
@keyframes wlBar{0%{transform:scaleX(0)}10%,20%{background:#fff}30%{background:#07041a}50%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.wl-box{position:absolute;left:4%;right:4%;bottom:6%;min-height:96px;padding:16px 20px;background:#f8f8f0;border:4px solid #07041a;box-shadow:inset 0 0 0 4px #f8f8f0,inset 0 0 0 7px #3a3a52;font-family:"Pixelify Sans","Silkscreen",monospace;font-size:clamp(18px,5vw,26px);color:#1a1a2e;opacity:0;animation:wlBox .2s steps(2) 1.2s both}
@keyframes wlBox{to{opacity:1}}
/* ๐งฌ digivolve */
.dg-wrap{position:absolute;left:50%;top:44%;width:200px;height:200px;margin:-100px 0 0 -100px;display:grid;place-items:center}
.dg-face{width:96px!important;height:96px!important;font-size:40px;animation:dgPulse .5s ease-in-out infinite alternate}
@keyframes dgPulse{to{filter:brightness(1.6) drop-shadow(0 0 12px #39ff9a)}}
.dg-ring{position:absolute;inset:0;border-radius:50%;border:3px dashed #39ff9a;animation:dgSpin 1.2s linear infinite}
.dg-ring.r2{inset:18px;border-color:#00f0ff;animation-duration:.8s;animation-direction:reverse}.dg-ring.r3{inset:-22px;border-color:#f3ff3a;border-style:dotted;animation-duration:2s}
@keyframes dgSpin{to{transform:rotate(360deg)}}
.dg-flash{position:absolute;inset:-60px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(57,255,154,.6) 40%,transparent 70%);opacity:0;animation:dgFlash .8s ease-out 2.3s both}
@keyframes dgFlash{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.dg-code{position:absolute;top:-30%;font-family:"Silkscreen",monospace;font-size:14px;line-height:1.1;white-space:pre;color:#39ff9a;opacity:.7;animation:dgRain 2.4s linear both}
@keyframes dgRain{to{transform:translateY(160vh)}}
.sxcap.dg-cap{color:#39ff9a;top:auto;bottom:18%;font-family:var(--tech)}
/* ๐ ace combat HUD */
.ac-hud{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(57,255,154,.06) 0 2px,transparent 2px 5px)}
.ac-ret{position:absolute;left:50%;top:46%;width:150px;height:150px;margin:-75px;border:2px solid #39ff9a;border-radius:50%;box-shadow:0 0 10px #39ff9a}
.ac-ret::before,.ac-ret::after{content:"";position:absolute;background:#39ff9a}.ac-ret::before{left:50%;top:-24px;bottom:-24px;width:2px}.ac-ret::after{top:50%;left:-24px;right:-24px;height:2px}
.ac-lock{position:absolute;left:50%;top:calc(46% + 90px);transform:translateX(-50%);font-family:var(--tech);font-size:16px;color:#ff4a4a;animation:acBlink .24s steps(2) infinite}
@keyframes acBlink{50%{opacity:0}}
.ac-missile{position:absolute;left:-10%;bottom:-10%;width:120vmax;height:6px;transform-origin:left center;transform:rotate(-38deg);overflow:visible}
.ac-missile i{position:absolute;left:0;top:0;height:6px;width:0;background:linear-gradient(90deg,rgba(220,220,230,0),rgba(220,220,230,.7) 70%,#fff);border-radius:3px;box-shadow:0 0 12px #fff;animation:acTrail 1.1s cubic-bezier(.4,0,.2,1) 1s both}
@keyframes acTrail{to{width:100%}}
.ac-flare{position:absolute;right:16%;top:16%;width:10px;height:10px;border-radius:50%;background:#ffd36a;box-shadow:0 0 14px 6px #ff8a1f;animation:acFlare 1.4s ease-in both}
@keyframes acFlare{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),160px);opacity:0}}
.ac-boom{position:absolute;right:22%;top:26%;width:20px;height:20px}
.ac-fire{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff6c2,#ff9a1f 45%,#c8321e 70%,transparent 72%);animation:acFire 1s ease-out .3s both}
@keyframes acFire{0%{transform:scale(0)}40%{transform:scale(5)}100%{transform:scale(6);opacity:0}}
.ac-smoke{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(120,120,130,.8),rgba(80,80,90,0) 70%);animation:acSmoke 2.6s ease-out .7s both}
@keyframes acSmoke{0%{transform:scale(1);opacity:0}20%{opacity:1}100%{transform:scale(9) translateY(-8px);opacity:0}}
.sxcap.ac-cap{color:#39ff9a;font-family:var(--tech);top:auto;bottom:22%;text-shadow:0 0 12px #39ff9a}
/* ๐ธ๏ธ webs */
.wb-corner{position:absolute;width:min(46vw,260px);height:min(46vw,260px);animation:wbShoot .35s cubic-bezier(.2,1.4,.4,1) both}
.wb-corner svg{width:100%;height:100%;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
.wb-corner.tl{left:0;top:0;transform-origin:0 0}.wb-corner.tr{right:0;top:0;transform-origin:100% 0;transform:scaleX(-1)}
.wb-corner.bl{left:0;bottom:0;transform-origin:0 100%;transform:scaleY(-1)}.wb-corner.br{right:0;bottom:0;transform-origin:100% 100%;transform:scale(-1,-1)}
@keyframes wbShoot{from{scale:0}to{scale:1}}
.sxcap.wb-cap{font-family:var(--body);font-style:italic;font-size:clamp(20px,5vw,30px);top:auto;bottom:40%}
.wb-line{position:absolute;inset:0;width:100%;height:100%}
.wb-line path{stroke-dasharray:200;stroke-dashoffset:200;animation:wbZip .25s ease-out forwards}
@keyframes wbZip{to{stroke-dashoffset:0}}
.wb-splat{position:absolute;right:-2%;top:12%;width:90px;height:90px;transform:rotate(135deg);opacity:0;animation:wbSplat .2s ease-out .22s forwards}
.wb-splat svg{width:100%;height:100%}
@keyframes wbSplat{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
/* ๐ the wind rises */
.wr-leaf{position:absolute;left:-8%;width:18px;height:9px;border-radius:0 100% 0 100%;background:var(--c);animation:wrLeaf var(--d) cubic-bezier(.3,.1,.4,1) both}
@keyframes wrLeaf{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(60vw,-6vh) rotate(260deg)}100%{transform:translate(118vw,4vh) rotate(560deg)}}
.wr-plane{position:absolute;left:-14%;top:58%;width:72px;animation:wrPlane 4.2s cubic-bezier(.35,.1,.4,1) .3s both}
@keyframes wrPlane{0%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(60vw,-22vh) rotate(-14deg)}100%{transform:translate(125vw,-30vh) rotate(4deg)}}
/* ๐ฎ spirited away */
.sxscene.sp-dusk{background:linear-gradient(180deg,rgba(40,20,70,.35),rgba(120,50,90,.35) 60%,rgba(240,130,60,.35));animation:spDusk 1s ease-out both}
@keyframes spDusk{from{opacity:0}}
.sp-lantern{position:absolute;bottom:-12%;width:30px;height:40px;border-radius:12px;background:radial-gradient(circle at 50% 45%,#fff2c2,#ff9a3c 55%,#c8461e);box-shadow:0 0 22px 6px rgba(255,150,60,.55);transform:scale(var(--s));animation:spRise var(--d) ease-in-out both}
.sp-lantern::before{content:"";position:absolute;left:30%;right:30%;top:-5px;height:5px;background:#3a1a10}
@keyframes spRise{0%{transform:translate(0,0) scale(var(--s));opacity:0}15%{opacity:1}100%{transform:translate(20px,-110vh) scale(var(--s));opacity:.2}}
.sp-petal{position:absolute;top:-4%;width:10px;height:7px;border-radius:70% 0 70% 0;background:#ffc0d8;animation:spPetal 3.4s linear both}
@keyframes spPetal{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(-40px,105vh) rotate(500deg)}}
/* ๐ launching */
.gl-deck{position:absolute;left:-50%;right:-50%;bottom:-10%;height:60%;transform:perspective(300px) rotateX(62deg);background:repeating-linear-gradient(0deg,#1a2238 0 38px,#2a3450 38px 40px),#141a2c;overflow:hidden}
.gl-deck::before,.gl-deck::after{content:"";position:absolute;top:0;bottom:0;width:14px;background:repeating-linear-gradient(0deg,#39ff9a 0 18px,transparent 18px 60px);animation:glLights .3s linear infinite}
.gl-deck::before{left:38%}.gl-deck::after{right:38%}
@keyframes glLights{to{background-position:0 -60px}}
.gl-thrust{position:absolute;left:50%;bottom:6%;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:radial-gradient(circle,#fff,#7ad6ff 40%,rgba(80,140,255,0) 70%);animation:glThrust 1.4s ease-in 1.4s both}
@keyframes glThrust{0%{transform:scale(.5)}60%{transform:scale(4,6)}100%{transform:scale(2,30) translateY(-6px);opacity:0}}
.sxcap.gl-cap{color:#7ad6ff;font-family:var(--tech);text-shadow:0 0 16px #7ad6ff}
/* โ๏ธ red comet */
.rc-comet{position:absolute;left:-40%;top:var(--y);width:36%;height:10px;border-radius:10px;background:linear-gradient(90deg,rgba(255,40,40,0),rgba(255,60,60,.8) 70%,#fff);box-shadow:0 0 18px 4px rgba(255,40,40,.7);transform:rotate(-12deg);animation:rcFly var(--dur) cubic-bezier(.5,0,.6,1) both}
@keyframes rcFly{to{left:130%}}
.rc-flash{position:absolute;inset:0;background:rgba(255,40,40,.35);animation:rcFlash .5s ease-out both}
@keyframes rcFlash{from{opacity:1}to{opacity:0}}
.sxcap.rc-cap{color:#ff4a4a}
@media (prefers-reduced-motion:reduce){.md-pennant,.js-card,.rp-puff,.wr-leaf,.sp-petal,.dg-code{animation-duration:.01s}}
/* ๐จ stay frosty (action-movie) */
.sf-lights{position:absolute;inset:0}
.sf-lights i{position:absolute;top:0;bottom:0;width:55%}
.sf-lights .r{left:0;background:radial-gradient(ellipse at 0 30%,rgba(255,30,50,.6),transparent 65%);animation:sfStrobe .5s steps(1) infinite}
.sf-lights .b{right:0;background:radial-gradient(ellipse at 100% 30%,rgba(40,90,255,.6),transparent 65%);animation:sfStrobe .5s steps(1) .25s infinite}
@keyframes sfStrobe{0%{opacity:1}50%{opacity:0}}
.sf-frost{position:absolute;width:46vmin;height:46vmin;background:radial-gradient(circle at 0 0,rgba(235,250,255,.85),rgba(170,225,255,.45) 35%,transparent 62%),repeating-conic-gradient(from 10deg at 0 0,rgba(255,255,255,.35) 0 1.5deg,transparent 1.5deg 9deg);mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle at 0 0,#000 30%,transparent 70%);transform-origin:0 0;animation:sfFrost 1.6s ease-out .4s both}
.sf-frost.tl{left:0;top:0}.sf-frost.tr{right:0;top:0;transform:scaleX(-1);transform-origin:100% 0}
.sf-frost.bl{left:0;bottom:0;transform:scaleY(-1);transform-origin:0 100%}.sf-frost.br{right:0;bottom:0;transform:scale(-1,-1);transform-origin:100% 100%}
@keyframes sfFrost{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
.sf-shades{position:absolute;left:50%;top:30%;width:min(70vw,320px);transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));animation:sfShades .9s cubic-bezier(.3,1.4,.5,1) .6s both}
@keyframes sfShades{0%{transform:translate(-50%,-70vh) rotate(-8deg)}100%{transform:translate(-50%,0) rotate(0)}}
.sxcap.sf-cap{top:auto;bottom:30%;font-size:clamp(34px,11vw,70px);letter-spacing:2px;color:#e8f6ff;background:linear-gradient(180deg,#ffffff,#9fdcff 55%,#4a90c8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(3px 3px 0 #07041a) drop-shadow(0 0 12px rgba(120,200,255,.7))}
.sf-glint{position:absolute;left:calc(50% - 90px);top:calc(30% + 8px);width:60px;height:60px;background:radial-gradient(circle,#fff 0 6%,transparent 30%),linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%);animation:sfGlint .7s ease-out both}
@keyframes sfGlint{0%{opacity:0;transform:scale(.2) rotate(0)}40%{opacity:1}100%{opacity:0;transform:scale(1.4) rotate(45deg)}}
/* bonus clues + clue board */
.hintbox .clue-btn{display:block;margin-top:8px;font-family:var(--tech);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:7px 10px;background:var(--night);color:var(--volt);border:2px solid var(--volt);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.hintbox .clue-btn:disabled{color:var(--muted);border-color:var(--plum);opacity:1}
.hintbox .clue-board{margin-top:8px}
.hintbox .clue-board summary{cursor:pointer;font-family:var(--tech);font-size:11px;color:var(--cyan)}
.hintbox .clue-board ul{list-style:none;display:grid;gap:6px;margin-top:6px;padding:0}
.hintbox .clue-board li{display:flex;gap:6px;font-size:14px;line-height:1.3}
.hintbox .clue-board li.solved{opacity:.6;text-decoration:line-through}