@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Nunito:wght@600;700;800;900&display=swap');
:root{--ink:#1a1834;--night:#211d45;--cream:#fff7e8;--peach:#ffbd83;--coral:#fa6a76;--purple:#7655ea;--mint:#80d8c4;--line:#ded5cc;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--cream)}button,input{font:inherit}button{cursor:pointer}.button-reset{border:0;background:transparent}.screen{min-height:100vh;padding:28px clamp(22px,5vw,76px);position:relative;overflow:hidden}.screen[hidden]{display:none}.brand{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.08em;font-size:1rem}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--coral);color:#fff;border-radius:10px 10px 10px 2px;letter-spacing:0}.kicker{margin:0 0 8px;font-size:.7rem;letter-spacing:.15em;font-weight:900;color:var(--coral)}.button{border:0;border-radius:15px;padding:14px 19px;font-weight:900;transition:transform .16s,box-shadow .16s}.button:hover,.icon-button:hover{transform:translateY(-2px)}.button:active{transform:translateY(1px)}.button.primary{color:#fff;background:var(--coral);box-shadow:0 6px 0 #ce4f5d}.button.secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}.button span{margin-left:9px}.icon-button{border:0;width:40px;height:40px;border-radius:13px;background:#fff;color:var(--ink);font-size:1.15rem;box-shadow:0 3px 0 #e6dacc;transition:transform .16s}.landing{display:flex;flex-direction:column;align-items:flex-start;background:radial-gradient(circle at 84% 42%,#f4d4b5 0 11%,transparent 11.2%),radial-gradient(circle at 78% 50%,#8ed9ce 0 17%,transparent 17.2%),var(--cream)}.settings-trigger{position:absolute;right:clamp(22px,5vw,76px);top:28px}.landing .brand{margin-top:1px}.landing-copy{margin:clamp(72px,14vh,150px) 0 29px;max-width:680px;z-index:1}.landing h1{margin:0;font-size:clamp(3.8rem,8vw,7.7rem);line-height:.86;letter-spacing:-.075em}.landing h1 em{font-style:normal;color:var(--purple)}.landing-copy>p:last-child{font-size:1.08rem;line-height:1.55;max-width:450px;margin:23px 0 0}.name-form{width:min(595px,100%);z-index:1}.name-form label{display:block;font-weight:900;margin-bottom:9px}.name-form>div{display:flex;padding:7px;border-radius:20px;background:#fff;box-shadow:0 13px 35px #b7835840}.name-form input,.join-form input{min-width:0;flex:1;border:0;outline:0;padding:10px 14px;font-size:1.05rem;font-weight:800;background:transparent}.link-button,.text-button{border:0;background:transparent;color:var(--purple);font-weight:900;padding:12px 0}.privacy-note{margin-top:22px;color:#6d6671;font-size:.78rem}.landing-orbit{position:absolute;right:6vw;top:10%;width:min(42vw,570px);aspect-ratio:1;border:2px dashed #ccaf9b;border-radius:50%;opacity:.65;animation:orbit 20s linear infinite}.landing-orbit i{position:absolute;display:grid;place-items:center;width:80px;height:80px;border-radius:35px 35px 35px 6px;background:var(--purple);color:#fff;font-size:2.5rem;font-style:normal}.landing-orbit i:nth-child(1){top:4%;left:17%;background:var(--coral)}.landing-orbit i:nth-child(2){right:-3%;top:42%;background:var(--night);font-size:1rem}.landing-orbit i:nth-child(3){bottom:6%;left:14%;background:var(--mint);color:var(--night)}@keyframes orbit{to{rotate:360deg}}.topbar,.room-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.stepper{display:flex;align-items:center;gap:8px}.stepper b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eae4dc;color:#999;font-size:.72rem}.stepper b.current{background:var(--purple);color:#fff}.stepper i{width:28px;height:2px;background:#e0d7d0}.character-screen,.play-screen{background:#f8f0e4}.character-layout{display:grid;grid-template-columns:minmax(330px,1.3fr) minmax(360px,.8fr);min-height:calc(100vh - 96px);max-width:1280px;margin:auto;gap:clamp(20px,5vw,80px);align-items:center}.character-stage{position:relative;min-height:650px;border-radius:42px;background:#25204d;overflow:hidden;color:#fff;padding:38px}.character-stage h2{font-size:clamp(2.3rem,4vw,4rem);line-height:.95;letter-spacing:-.06em;margin:0}.stage-lights{position:absolute;inset:auto -10% -30%;height:65%;background:radial-gradient(circle at 50% 50%,#ffba67 0 8%,#a274f5 30%,transparent 65%);filter:blur(5px)}.avatar{position:absolute;width:330px;height:475px;left:50%;bottom:0;transform:translateX(-50%);transform-origin:50% 73%;transform-style:preserve-3d;will-change:transform}.hero-rig{scale:1.15;bottom:-18px}.tracking-pill{position:absolute;bottom:27px;left:29px;padding:10px 13px;border-radius:99px;background:#ffffff1d;font-size:.75rem;backdrop-filter:blur(8px)}.tracking-pill span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#aaa;margin-right:6px}.tracking-pill.active span{background:var(--mint);box-shadow:0 0 0 4px #80d8c433}.tracking-pill b{margin-left:4px}.creator-panel{padding:20px 0}.creator-heading,.camera-controls,.creator-actions{display:flex;justify-content:space-between;gap:15px;align-items:center}.creator-heading h2,.play-card h2,.room-title h2{margin:0;font-size:clamp(2rem,4vw,3.3rem);line-height:.95;letter-spacing:-.06em}.category-tabs{display:flex;gap:8px;overflow:auto;margin:30px 0 16px;padding-bottom:3px}.category-tabs button{border:0;background:#e9e0d6;color:#6d6671;border-radius:12px;padding:10px 13px;font-weight:900;white-space:nowrap}.category-tabs button.active{background:var(--night);color:#fff}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:145px}.choice{border:2px solid transparent;background:#fff;border-radius:17px;padding:10px;text-align:left;font-weight:900;color:var(--ink)}.choice.active{border-color:var(--purple);background:#f1edff}.choice-preview{display:block;height:62px;border-radius:11px;background:linear-gradient(135deg,#ffd5bd,#c4b9ff);margin-bottom:7px}.choice-preview[data-category="hair"]{background:#372c77}.choice-preview[data-category="body"]{background:#fa8494}.camera-controls{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.camera-controls small{display:block;color:#766f76;font-size:.75rem;margin-top:3px}.camera-preview{position:relative;width:144px;aspect-ratio:4/3;margin:15px 0;border-radius:13px;overflow:hidden;background:#222}.camera-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-preview .icon-button{position:absolute;top:5px;right:5px;width:27px;height:27px}.creator-actions{border-top:1px solid var(--line);margin-top:18px;padding-top:20px}.play-screen{display:flex;flex-direction:column}.play-card{width:min(960px,100%);margin:auto;display:grid;grid-template-columns:200px 1fr auto;gap:40px;align-items:center;background:#fff;border-radius:32px;padding:28px;box-shadow:0 22px 70px #6a51422b}.mini-stage{height:196px;border-radius:22px;position:relative;overflow:hidden;background:#b8a4f5}.mini-rig{scale:.43;bottom:-104px}.play-card>div>p:last-of-type{color:#716976}.play-actions{display:grid;gap:10px}.join-form{grid-column:2/-1;display:flex;background:#f6f0eb;padding:6px;border-radius:18px}.form-message{grid-column:1/-1;color:#c23e50;margin:0;font-weight:800}.room-screen{background:#f2e8d9;padding-bottom:18px}.room-code{display:flex;align-items:center;gap:9px;background:#fff;border-radius:15px;padding:7px 8px 7px 13px;box-shadow:0 3px 0 #e1d4c5}.room-code small{font-size:.58rem;font-weight:900;color:#78717a}.room-code strong{font-family:'DM Mono',monospace;letter-spacing:.12em}.copy-button{border:0;border-radius:10px;padding:8px 10px;background:#eee7ff;color:#5940b8;font-weight:900}.room-tools{display:flex;align-items:center;gap:7px}.mute-button{border:0;border-radius:13px;padding:10px 12px;background:#29244e;color:#fff;font-weight:900}.mute-button[aria-pressed="true"]{background:#d8d0c9;color:#6c6670}.leave{color:#c74357}.room-title{display:flex;justify-content:space-between;align-items:end;gap:20px;max-width:1270px;margin:24px auto 15px}.host-actions{display:flex;gap:9px}.party-room{position:relative;max-width:1270px;min-height:clamp(420px,65vh,690px);margin:auto;overflow:hidden;border-radius:35px 35px 16px 16px;background:#3d326d}.room-sun{position:absolute;width:50%;aspect-ratio:1;left:25%;top:4%;border-radius:50%;background:#f6bc77;box-shadow:0 0 120px #ffbc7666}.room-floor{position:absolute;inset:auto -10% 0;height:27%;background:#2a2450;clip-path:polygon(0 47%,100% 0,100% 100%,0 100%)}.room-wall-art{position:absolute;color:#fff4c5;font-size:2.4rem;opacity:.55}.art-one{top:18%;left:11%}.art-two{top:25%;right:12%}.player-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;gap:5px;min-height:clamp(420px,65vh,690px);padding:35px 35px 12px}.player-card{position:relative;display:grid;justify-items:center;align-content:end;min-height:260px;color:#fff;animation:arrive .45s cubic-bezier(.2,1.4,.5,1)}.player-card.speaking:before{content:"";position:absolute;bottom:39px;width:130px;height:130px;border-radius:50%;border:3px solid var(--mint);box-shadow:0 0 35px #80d8c477}.player-card .room-avatar-frame{position:relative;width:150px;height:218px;overflow:hidden;filter:drop-shadow(0 14px 9px #17133160)}.room-rig{scale:.45;bottom:-71px}.player-label{position:relative;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;background:#1d193bd9;font-size:.78rem;font-weight:900}.crown{color:#ffda62}.mic{font-size:.7rem;color:#aaa}.player-card.is-you .player-label:after{content:"YOU";color:#ffe16a;font-size:.56rem;margin-left:3px}.connection{position:absolute;top:12px;color:#ffd06a;font-size:.65rem;font-weight:900}.empty-seat{align-self:end;height:145px;border:2px dashed #ffffff55;border-radius:20px;background:#ffffff12;color:#e6dbee;display:grid;place-items:center;font-weight:900}.room-footer{display:flex;justify-content:space-between;max-width:1270px;margin:10px auto 0;color:#665e67;font-weight:800}.room-footer p{margin:10px 0}.toast{position:fixed;bottom:23px;left:50%;translate:-50% 20px;padding:11px 15px;border-radius:99px;background:var(--night);color:#fff;font-weight:900;font-size:.84rem;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;translate:-50% 0}dialog{border:0;border-radius:25px;padding:0;box-shadow:0 30px 90px #17133155}dialog::backdrop{background:#17133175}.settings-panel{min-width:min(450px,92vw);padding:30px;position:relative}.settings-panel h2{margin:0 0 22px;letter-spacing:-.05em}.close-dialog{position:absolute;right:18px;top:18px}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid #eee6de}.setting small{display:block;margin-top:3px;color:#77707b;font-size:.75rem}.setting input{accent-color:var(--purple);width:19px;height:19px}@keyframes arrive{from{opacity:0;transform:translateY(25px) scale(.8)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}body.reduce-motion *{animation:none!important;transition:none!important}@media(max-width:760px){.screen{padding:18px}.landing-copy{margin-top:95px}.landing h1{font-size:clamp(3.6rem,18vw,5.4rem)}.landing-orbit{width:330px;right:-100px;top:17%;opacity:.38}.character-layout{grid-template-columns:1fr;gap:0}.character-stage{min-height:420px;padding:28px;border-radius:25px}.hero-rig{scale:.76;bottom:-70px}.creator-panel{padding:25px 3px}.choice-grid{grid-template-columns:repeat(2,1fr)}.play-card{grid-template-columns:1fr;padding:22px;gap:20px}.mini-stage{height:150px}.play-actions{grid-template-columns:1fr 1fr}.join-form{grid-column:auto}.room-topbar{flex-wrap:wrap}.room-code{order:3;width:100%;justify-content:center}.room-title{align-items:start;margin-top:20px}.host-actions{display:grid}.host-actions .button{padding:10px}.party-room{min-height:510px;border-radius:25px 25px 14px 14px}.player-grid{grid-template-columns:repeat(2,1fr);padding:22px 10px 8px;gap:2px;min-height:510px}.player-card{min-height:210px}.player-card .room-avatar-frame{width:125px;height:178px}.room-rig{scale:.37;bottom:-95px}.room-footer{font-size:.76rem}.mute-button span{display:none}.landing .brand{z-index:2}}

/* Shared modular SVG avatar rig. The same DOM renderer is used locally and in rooms. */
.avatar-rig{isolation:isolate}.rig-part,.rig-head>img{position:absolute;display:block;pointer-events:none}.rig-body{width:330px;height:475px;inset:0;z-index:1}.rig-head{position:absolute;z-index:3;width:250px;height:315px;left:40px;bottom:80px;transform-origin:50% 60%;will-change:transform}.rig-face,.rig-ears,.rig-hair-back,.rig-hair-front,.rig-cheeks{inset:0;width:250px;height:315px}.rig-hair-back{z-index:1}.rig-ears{z-index:2}.rig-face{z-index:3}.rig-cheeks{z-index:4}.rig-hair-front{z-index:9}.rig-eye{position:absolute;z-index:5;width:56px;height:38px;overflow:hidden;transform-origin:center}.rig-eye img{display:block;width:56px;height:38px}.rig-eye-left{left:37px;top:129px}.rig-eye-right{right:37px;top:129px}.rig-iris{position:absolute;width:29px;height:29px;left:14px;top:5px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#fff 0 8%,#8254ff 10% 40%,#3a227e 43% 64%,#171336 66%)}.rig-iris i{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;top:4px;left:6px}.rig-lid{position:absolute;z-index:6;top:-40px;left:-3px;width:62px;height:40px;background:var(--lid-skin,#ffc09e);border-radius:0 0 50% 50%}.rig-brow{position:absolute;z-index:7;width:53px;height:16px;top:106px;transform-origin:center}.rig-brow img{width:60px;height:16px;display:block}.rig-brow-left{left:42px;transform:rotate(-8deg)}.rig-brow-right{right:42px;transform:rotate(8deg)}.rig-nose{z-index:6;width:28px;height:24px;left:111px;top:172px}.rig-mouth{position:absolute;z-index:8;width:80px;height:3px;left:85px;top:223px;overflow:hidden;border-radius:0 0 40px 40px;transform-origin:top}.rig-mouth img{display:block;width:80px;height:60px}

/* In-room camera reminder — fixed to the top while anyone is offline. */
.camera-banner{position:fixed;z-index:45;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 18px;background:linear-gradient(180deg,#2a2148ee,#1d1838f2);color:#fff8ea;box-shadow:0 10px 30px #17133155;transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .28s ease}
.camera-banner.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.camera-banner[hidden]{display:none!important}
.camera-banner-copy{display:flex;flex-direction:column;gap:2px;text-align:center;max-width:640px}
.camera-banner-copy strong{font-size:.95rem;letter-spacing:-.02em}
.camera-banner-copy span{font-size:.78rem;font-weight:700;color:#ffd9a8}
.camera-banner .button{padding:10px 14px;font-size:.85rem;box-shadow:0 4px 0 #ce4f5d}
body.has-camera-banner .screen{padding-top:76px}
@media(max-width:760px){.camera-banner{padding:10px 12px;gap:10px}.camera-banner-copy strong{font-size:.86rem}.camera-banner-copy span{font-size:.72rem}body.has-camera-banner .screen{padding-top:96px}}