:root{--ink: #1a3348;--ink-soft: #5a758a;--sky: #e8f4f8;--line: rgba(26, 51, 72, .1);--coral: #c4563f;--coral-deep: #a94430;--teal: #2f7f88;--teal-deep: #246870;--danger: #ef5b45;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--font: "Plus Jakarta Sans", system-ui, sans-serif;--font-soft: "Plus Jakarta Sans", system-ui, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.4, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font);font-optical-sizing:auto;color:var(--ink);background-color:var(--sky);background-image:radial-gradient(ellipse 90% 70% at 100% -10%,rgba(255,122,92,.22),transparent 55%),radial-gradient(ellipse 80% 60% at -10% 110%,rgba(62,181,194,.28),transparent 50%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.55),transparent 45%),linear-gradient(165deg,#f7fcfd,#eaf6f9 45%,#e3eef5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;user-select:none;letter-spacing:-.015em;font-weight:500}body:before,body:after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px)}body:before{width:180px;height:180px;top:12%;right:-40px;background:radial-gradient(circle,rgba(255,122,92,.35),transparent 70%);animation:float-a 8s ease-in-out infinite}body:after{width:220px;height:220px;bottom:18%;left:-60px;background:radial-gradient(circle,rgba(62,181,194,.32),transparent 70%);animation:float-b 10s ease-in-out infinite}#app{position:relative;z-index:1;height:100%}.screen{height:100%;display:flex;flex-direction:column;padding:calc(18px + var(--safe-top)) 24px calc(14px + var(--safe-bottom));gap:18px}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes float-a{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-12px,18px) scale(1.06)}}@keyframes float-b{0%,to{transform:translate(0) scale(1)}50%{transform:translate(16px,-14px) scale(1.05)}}@keyframes bob-a{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes bob-b{0%,to{transform:translateY(0)}50%{transform:translateY(7px)}}@keyframes pop-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes code-in{0%{opacity:0;transform:translateY(14px) scale(.94);letter-spacing:.28em;filter:blur(5px)}60%{opacity:1;filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);letter-spacing:.06em;filter:blur(0)}}@keyframes soft-breathe{0%,to{transform:scale(1);box-shadow:0 6px 16px #1a33481a}50%{transform:scale(1.03);box-shadow:0 10px 22px #1a334824}}@keyframes btn-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes btn-press-ripple{0%{transform:scale(.55);opacity:.35}to{transform:scale(1.35);opacity:0}}@keyframes share-ok{0%{transform:scale(1)}45%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.home-stage,.join-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:0;gap:22px;padding:12px 4px 8px}.join-stage{gap:18px;padding:8px 4px}.join-stage .visual{width:min(30vw,112px)}.join-stage .brand{font-size:clamp(2.2rem,9vw,2.75rem)}.join-stage .tagline{max-width:22ch}.join-code-field{position:relative;width:min(100%,15.5ch);margin:6px auto 0;height:1.25em;overflow:hidden;white-space:nowrap;font-family:var(--font);font-size:clamp(2.2rem,9.5vw,2.85rem);font-weight:800;line-height:1.25;letter-spacing:.06em;animation:code-in .85s var(--ease-spring) .12s both;cursor:text;-webkit-user-select:none;user-select:none}.join-code-field.ready{animation:join-ready .55s var(--ease-spring) both}.join-code-slots{display:flex;align-items:center;justify-content:center;gap:0;height:100%;pointer-events:none}.join-slot{display:inline-block;min-width:1ch;text-align:center;color:#1a334838;transition:color .15s ease,transform .15s ease}.join-slot.filled{color:var(--ink)}.join-slot.caret{color:#1a334861;box-shadow:inset 0 -2px 0 var(--coral-deep);animation:join-caret 1s steps(1) infinite}.join-dash{color:#1a334847;padding:0 .02em}.join-code-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;background:transparent;color:transparent;caret-color:transparent;font:inherit;letter-spacing:inherit;text-align:center;resize:none;overflow:hidden;white-space:nowrap;appearance:none;-webkit-appearance:none;box-shadow:none}.join-code-input:focus{outline:none}@keyframes join-caret{50%{box-shadow:inset 0 -2px 0 transparent}}@keyframes join-ready{0%{transform:scale(1)}40%{transform:scale(1.04);filter:drop-shadow(0 0 12px rgba(228,87,46,.35))}to{transform:scale(1);filter:none}}.visual{position:relative;width:min(38vw,148px);aspect-ratio:1;margin:0 auto;animation:pop-in .65s var(--ease-spring) both}.visual-face{position:absolute;width:58%;aspect-ratio:3 / 4;border-radius:28% 28% 22% 22%;overflow:hidden;box-shadow:0 12px 28px #1a334824}.visual-face.a{left:0;top:12%;background:linear-gradient(160deg,rgba(255,255,255,.4),transparent 42%),linear-gradient(145deg,#3eb5c2,#1f7f8a);z-index:1;animation:bob-a 4.8s ease-in-out infinite;will-change:transform}.visual-face.b{right:0;bottom:8%;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 42%),linear-gradient(145deg,#ff8a6b,#e85a3c);z-index:2;animation:bob-b 5.2s ease-in-out infinite .3s;will-change:transform}.visual-link{position:absolute;left:50%;top:48%;width:24%;height:24%;translate:-50% -50%;border-radius:50%;background:#fff;border:2.5px solid rgba(26,51,72,.06);z-index:3;display:grid;place-items:center;animation:soft-breathe 3.4s ease-in-out infinite}.visual-link:before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(62,181,194,.35);opacity:.7;pointer-events:none}.visual-link:after{content:"";width:38%;height:38%;border-radius:50%;background:var(--ink)}.brand-block{text-align:center;animation:rise .55s var(--ease) .08s both}.brand{font-family:var(--font);font-weight:800;font-size:clamp(2.6rem,10.5vw,3.25rem);letter-spacing:-.045em;line-height:.94;color:var(--ink)}.tagline{margin:12px auto 0;font-family:var(--font-soft);color:var(--ink-soft);font-size:1.02rem;font-weight:500;line-height:1.45;letter-spacing:-.015em;max-width:20ch}.actions{display:flex;flex-direction:column;gap:11px;width:100%;max-width:360px;margin:0 auto;padding:8px 2px calc(6px + var(--safe-bottom))}.actions>.error{animation:btn-enter .35s var(--ease) both}.actions>.btn,.actions>.field-wrap{animation:btn-enter .4s var(--ease) both}.actions>.field-wrap:nth-of-type(1){animation-delay:.04s}.actions>.field-wrap:nth-of-type(2){animation-delay:.08s}.actions>.btn{animation-delay:.1s}.actions>.btn+.btn{animation-delay:.16s}.btn{appearance:none;-webkit-appearance:none;border:none;border-radius:18px;padding:0 22px;font-family:var(--font);font-weight:700;font-size:1.06rem;letter-spacing:-.025em;cursor:pointer;min-height:56px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;isolation:isolate;touch-action:manipulation;opacity:1;transition:transform .18s var(--ease),box-shadow .2s var(--ease),background .2s ease,filter .2s ease,opacity .2s ease}.btn:before{content:"";position:absolute;inset:0;margin:auto;width:40%;aspect-ratio:1;border-radius:50%;background:#ffffff73;opacity:0;pointer-events:none;z-index:0}.btn:active:not(:disabled):before{animation:btn-press-ripple .45s var(--ease) forwards}.btn>*{position:relative;z-index:1}.btn:active:not(:disabled){transform:scale(.97) translateY(1px)}.btn:disabled{opacity:.55;cursor:wait;transform:none}.btn-coral{color:#fffaf8;background:#c4563f;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px #ffffff1f inset,0 12px 28px #8b37283d}.btn-coral:active{background:#a94430;box-shadow:0 4px 14px #8b372833}.btn-teal{color:#f5fcfc;background:#2f7f88;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px #ffffff1f inset,0 12px 28px #1e5a623d}.btn-teal:active{background:#246870;box-shadow:0 4px 14px #1e5a6233}@media(hover:hover)and (pointer:fine){.btn-coral:hover{background:#d0644c}.btn-teal:hover{background:#368f99}}.field{width:100%;border:1px solid rgba(26,51,72,.1);background:#ffffffeb;color:var(--ink);border-radius:18px;padding:17px 16px;font-family:var(--font);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;outline:none;min-height:58px;box-shadow:0 6px 16px #1a33480d;transition:border-color .2s,background .2s,box-shadow .2s}.field:focus{border-color:#2f7f88a6;background:#fff;box-shadow:0 0 0 4px #2f7f8824}.field.code{letter-spacing:.1em;text-transform:uppercase;text-align:center;font-family:var(--font);font-weight:800;font-size:1.45rem;padding-left:.1em;border-radius:18px}.error{color:#9b2c1a;background:#ef5b451a;border:1px solid rgba(239,91,69,.2);border-radius:16px;padding:12px 14px;font-family:var(--font);font-size:.95rem;font-weight:600;letter-spacing:-.02em;animation:rise .3s var(--ease) both}.field-wrap{display:flex;flex-direction:column;gap:6px;width:100%}.field-label{font-family:var(--font);font-size:.8rem;font-weight:700;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;padding-left:4px}.lobby{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;animation:rise .5s var(--ease) both}.lobby-mark{width:96px;height:96px;position:relative;display:grid;place-items:center}.lobby-mark:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(62,181,194,.4);animation:pulse-soft-lobby 2.2s ease-out infinite}@keyframes pulse-soft-lobby{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.25);opacity:0}to{opacity:0}}.lobby-mark-inner{width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,#2f7f88,#c4563f);box-shadow:0 12px 28px #1a334824;animation:soft-breathe 3s ease-in-out infinite}.lobby-label{font-family:var(--font);color:var(--ink-soft);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;animation:rise .45s var(--ease) .05s both}.lobby-code{font-family:var(--font);font-size:clamp(2.2rem,9.5vw,2.85rem);letter-spacing:.06em;padding-left:.06em;font-weight:800;color:var(--ink);animation:code-in .85s var(--ease-spring) .12s both}.lobby-hint{font-family:var(--font-soft);color:var(--ink-soft);font-size:.98rem;font-weight:500;max-width:24ch;line-height:1.45;letter-spacing:-.015em;animation:rise .5s var(--ease) .28s both}.lobby-wait{font-family:var(--font);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:var(--teal-deep);animation:rise .45s var(--ease) .18s both}.lobby.shared .lobby-code{animation:share-ok .55s var(--ease)}.lobby.shared .lobby-mark-inner{filter:saturate(1.15)}.share-toast{margin-top:2px;padding:10px 16px;border-radius:999px;font-family:var(--font);font-size:.9rem;font-weight:700;letter-spacing:-.02em;color:#1a6f78;background:#3eb5c247;border:1px solid rgba(62,181,194,.35);animation:toast-in .35s var(--ease) both}.btn-shared{animation:share-ok .55s var(--ease)}.call{position:relative;padding:0;background:#0b1620;overflow:hidden;animation:none}.stage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols, 1),minmax(0,1fr));grid-template-rows:repeat(var(--rows, 1),minmax(0,1fr));gap:4px;padding:4px;padding-top:calc(28px + var(--safe-top));padding-bottom:calc(88px + var(--safe-bottom));background:#070e14;transition:grid-template-columns .35s var(--ease),grid-template-rows .35s var(--ease)}.tile{position:relative;overflow:hidden;border-radius:16px;background:#12202c;min-height:0;min-width:0;animation:rise .4s var(--ease) both}.tile video{width:100%;height:100%;object-fit:cover;background:#0b1620;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.tile.local video{transform:scaleX(-1) translateZ(0);-webkit-transform:scaleX(-1) translateZ(0)}.tile.local.rear video{transform:translateZ(0);-webkit-transform:translateZ(0)}.tile.cam-off{background:var(--avatar, #1c3348);display:grid;place-items:center}.tile.cam-off video{opacity:0;visibility:hidden;pointer-events:none;position:absolute;inset:0;width:100%;height:100%}.tile-avatar{display:none!important}.tile-label{display:none}.controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding:12px 16px calc(12px + var(--safe-bottom));background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.22) 60%,transparent 100%);pointer-events:none}.call-secure{display:flex;align-items:center;justify-content:center;gap:5px;pointer-events:none;line-height:1;margin-bottom:.3cm}.call-secure-ico{display:grid;place-items:center;flex:0 0 auto}.call-secure-ico svg{width:10px;height:10px;fill:none;stroke:#fff6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.call-secure-txt{font-family:var(--font);font-size:.68rem;font-weight:600;letter-spacing:.01em;color:#fff6;white-space:nowrap}.call-hud{position:absolute;top:10px;right:10px;left:auto;transform:none;z-index:4;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0;border:none;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;animation:rise .4s var(--ease) both}.call-hud-time{font-family:var(--font);font-size:.74rem;font-weight:600;letter-spacing:.04em;color:#ffffffb8;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}.call-hud-net{display:flex;align-items:flex-end;gap:2.5px;height:12px}.call-hud-net i{display:block;width:3px;border-radius:1px;background:#ffffff38;transition:background .25s ease}.call-hud-net i:nth-child(1){height:3px}.call-hud-net i:nth-child(2){height:6px}.call-hud-net i:nth-child(3){height:9px}.call-hud-net i:nth-child(4){height:12px}.call-hud-net[data-score="1"] i:nth-child(-n+1),.call-hud-net[data-score="2"] i:nth-child(-n+2),.call-hud-net[data-score="3"] i:nth-child(-n+3),.call-hud-net[data-score="4"] i{background:#fffffff0}.controls-dock{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:0;border:none;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.controls-row{display:flex;align-items:center;justify-content:center;gap:18px}.ctrl{width:58px;min-height:58px;padding:0;border:none;border-radius:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .22s var(--ease-spring),opacity .2s}.ctrl-ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#ffffff29;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px #00000038,inset 0 1px #ffffff2e;transition:transform .22s var(--ease-spring),background .2s,color .2s,box-shadow .2s}.ctrl-ico svg{width:24px;height:24px;overflow:visible;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.ctrl-lbl{display:none}.ctrl:active{transform:scale(.94)}.ctrl:active .ctrl-ico{transform:scale(.96)}.ctrl.on .ctrl-ico{background:#fff;color:var(--ink);border-color:transparent;box-shadow:0 8px 18px #00000047}.ctrl.hang .ctrl-ico{width:64px;height:64px;background:linear-gradient(180deg,#ff6d57,#e44530);border-color:transparent;box-shadow:0 10px 22px #e4453073,inset 0 1px #ffffff47}.ctrl.hang .ctrl-ico svg{transform:rotate(135deg)}@media(max-width:767.98px){.stage{gap:3px;padding:3px;padding-top:calc(10px + var(--safe-top));padding-bottom:calc(72px + var(--safe-bottom))}.controls{padding:0 14px var(--safe-bottom);background:none}.controls-dock{gap:6px}.controls-row{gap:16px}.call-secure-txt{color:#ffffff8c;text-shadow:0 1px 3px rgba(0,0,0,.55)}.call-secure-ico svg{stroke:#ffffff8c;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.ctrl{width:54px;min-height:54px}.ctrl-ico{width:54px;height:54px}.ctrl.hang .ctrl-ico{width:60px;height:60px}}@media(min-width:768px){.screen:not(.call){max-width:420px;margin:0 auto}.stage{gap:6px;padding:6px;padding-top:calc(28px + var(--safe-top));padding-bottom:calc(88px + var(--safe-bottom))}.controls{padding:12px 16px calc(12px + var(--safe-bottom));background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.22) 60%,transparent 100%)}.visual{animation:pop-in .65s var(--ease-spring) both}.visual-face.a{animation:bob-a 4.8s ease-in-out infinite}.visual-face.b{animation:bob-b 5.2s ease-in-out infinite .3s}.visual-link{animation:soft-breathe 3.4s ease-in-out infinite}.brand-block{animation:rise .55s var(--ease) .08s both}.lobby-mark:before{animation:pulse-soft-lobby 2.2s ease-out infinite}.lobby-mark-inner{animation:soft-breathe 3s ease-in-out infinite}.lobby-code{animation:code-in .85s var(--ease-spring) .12s both}}@media(prefers-reduced-motion:reduce){.btn:active:before,.btn-shared,.share-toast,.tile{animation:none!important}.btn:active,.ctrl:active{transform:none}}