*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;color:#eef;font-family:"Trebuchet MS",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}
body{background:
radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 72%,#fff,transparent),
radial-gradient(1.5px 1.5px at 44% 12%,#cfe,transparent),radial-gradient(1px 1px at 63% 84%,#fff,transparent),
radial-gradient(2px 2px at 81% 30%,#fff,transparent),radial-gradient(1px 1px at 90% 66%,#ffd,transparent),
radial-gradient(1px 1px at 6% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 8%,#fff,transparent),
radial-gradient(1px 1px at 36% 40%,#fff,transparent),radial-gradient(1px 1px at 55% 55%,#bdf,transparent),
radial-gradient(ellipse at 30% 20%,rgba(120,90,255,.25),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(241,90,41,.18),transparent 50%),
linear-gradient(#141238,#1f1b4d 50%,#0b0a24);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;
padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 90px,#fff,transparent),radial-gradient(1.5px 1.5px at 200px 160px,#dde,transparent);background-size:240px 200px;opacity:.55;animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.2}}
/* porthole / helmet frame */
.frame{position:relative;width:min(70vh,88vw);aspect-ratio:1;border-radius:50%;padding:clamp(18px,3.2vh,34px);
background:radial-gradient(circle at 35% 30%,#fff,#d9dde6 35%,#9aa1b2 70%,#6b7184);
box-shadow:0 0 60px rgba(120,160,255,.35),0 24px 50px rgba(0,0,0,.7),inset 0 -6px 14px rgba(0,0,0,.35),inset 0 6px 12px rgba(255,255,255,.8)}
.rivet{position:absolute;width:3.2%;height:3.2%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#7a8094 70%);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.canvas{position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;background:#1f1b4d;
box-shadow:inset 0 0 0 6px #b9bfcc,inset 0 0 0 9px #5e6478,inset 0 0 40px 10px rgba(0,0,0,.55)}
.canvas::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(ellipse 60% 40% at 30% 18%,rgba(255,255,255,.22),transparent 60%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,0,20,.55));}
#sway{position:absolute;inset:0}
#mouth{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 45%;transform:scale(1.25);transform-origin:43% 44%;pointer-events:none}
/* rocket button */
.plaque{appearance:none;border:0;cursor:pointer;position:relative;font:700 clamp(17px,2.5vh,26px)/1 "Trebuchet MS",system-ui,sans-serif;letter-spacing:.03em;color:#fff;
padding:.85em 2.4em .85em 1.6em;border-radius:999px 40% 40% 999px / 999px 50% 50% 999px;
background:linear-gradient(180deg,#ff8a4c,#f15a29 55%,#c63d14);text-shadow:0 2px 0 rgba(0,0,0,.25);
box-shadow:0 8px 22px rgba(241,90,41,.45),inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.2);transition:transform .12s}
.plaque::before{content:"";position:absolute;right:-1.1em;top:50%;width:1.6em;height:1.6em;margin-top:-.8em;border-radius:50%;
background:radial-gradient(circle at 40% 40%,#e8f7ff,#5ec6c9 60%,#2b8f95);box-shadow:0 0 0 .18em #fff,0 0 0 .3em #c63d14}
.plaque::after{content:"";position:absolute;left:-1.3em;top:50%;width:1.5em;height:.9em;margin-top:-.45em;border-radius:50% 0 0 50%;
background:radial-gradient(ellipse at 100% 50%,#fff3a0,#ffb02e 45%,rgba(241,90,41,0) 75%);opacity:.35;transform-origin:100% 50%}
body.incall .plaque::after{opacity:1;animation:flame .18s ease-in-out infinite alternate}
@keyframes flame{to{transform:scaleX(1.35)}}
.plaque:active{transform:translateY(2px) scale(.98)}
.plaque small{display:block;font-size:.5em;font-weight:400;letter-spacing:.1em;margin-top:.45em;opacity:.85}
body.hide-widget chat-widget{position:fixed!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
#hot{position:fixed;top:0;right:0;width:80px;height:80px;z-index:50}
#dbg{position:fixed;left:8px;top:8px;z-index:60;font:12px/1.45 ui-monospace,Menlo,monospace;background:rgba(0,0,0,.78);color:#9f9;padding:8px 10px;border-radius:6px;display:none;max-width:min(420px,92vw);white-space:pre-wrap}
body.debug #dbg{display:block}
#dbg button{font:inherit;margin:4px 4px 0 0;padding:4px 7px;border-radius:4px;border:1px solid #6a6;background:#132;color:#cfc}
#toast{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#cfe3ff;opacity:.9;font-size:clamp(13px,1.8vh,18px);text-align:center;min-height:1.4em}