*,:before,:after{box-sizing:border-box}:root{--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--ink:#f4f1ea;--ink-dim:#c9c4b8;--accent:#f2b84b;--glass-bg:#1018209e;--glass-border:#ffffff2e;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}html,body{width:100%;height:100%;color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#000;margin:0;font-size:16px;line-height:1.35;overflow:hidden}#scene{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:fixed;inset:0}#overlay{pointer-events:none;position:fixed;inset:0;overflow:hidden}#ui{padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}.ov{will-change:transform;pointer-events:none;white-space:nowrap;text-align:center;position:absolute;top:0;left:0}.ov-name{height:18px;color:var(--ink);text-shadow:0 1px 1px #0009;background:#00000080;border-radius:9px;padding:0 6px;font-size:12px;line-height:18px}.ov-self .ov-name{color:var(--accent);background:#0000009e;box-shadow:0 0 0 1px #f2b84b8c}.ov-bubble{color:#1b1b1b;white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:2;background:#fffffff0;border-radius:12px;-webkit-box-orient:vertical;width:max-content;max-width:180px;height:36px;padding:4px 10px;font-size:13px;line-height:14px;display:-webkit-box;overflow:hidden}.glass{color:var(--ink);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;box-shadow:0 4px 18px #00000059}@media (width>=720px){html,body{font-size:17px}}.btn{min-height:40px;font:inherit;color:var(--ink);border:1px solid var(--glass-border);cursor:pointer;background:#ffffff1f;border-radius:12px;padding:0 14px;font-size:15px}.btn:active{background:#ffffff3d}.btn:focus-visible,.gender-card:focus-visible,.exit-label:focus-visible,.emote-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{color:#1b1b1b;background:var(--accent);border-color:#0000;font-weight:600}.btn-primary:active{background:#e0a63a}.btn[hidden],.banner[hidden]{display:none}.entry{z-index:10;overscroll-behavior:contain;padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 12px);-webkit-overflow-scrolling:touch;background:#0c1218;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden auto}.entry-bg{z-index:0;filter:blur(6px)saturate(1.1)brightness(.85);pointer-events:none;background-color:#0c1218;background-image:url(/photos/san-truong-1.jpg),radial-gradient(at 30% 10%,#2c4a63 0%,#14202b 55%,#0a0f14 100%);background-position:50%,50%;background-size:cover,cover;animation:40s ease-in-out infinite alternate entry-drift;position:fixed;inset:-48px;transform:scale(1.06)}.entry-bg:after{content:"";background:radial-gradient(at 50% 20%,#f2b84b29 0%,#0000 55%),linear-gradient(#080c1059 0%,#080c10b8 55%,#080c10eb 100%);position:absolute;inset:0}@keyframes entry-drift{0%{transform:scale(1.06)translate(-1.5%,-1%)}to{transform:scale(1.12)translate(1.5%,1%)}}.entry-card{z-index:1;background:#0e141b94;width:100%;max-width:420px;margin:auto;padding:22px 18px 18px;animation:.5s cubic-bezier(.2,.8,.2,1) both entry-rise;position:relative}@keyframes entry-rise{0%{opacity:0;transform:translateY(16px)scale(.98)}to{opacity:1;transform:none}}.entry-shake{animation:.38s both entry-shake}@keyframes entry-shake{0%,to{transform:none}20%,60%{transform:translate(-7px)}40%,80%{transform:translate(7px)}}.entry-title{letter-spacing:.01em;text-align:center;color:var(--accent);text-shadow:0 0 18px #f2b84b59;margin:0;font-size:clamp(30px,9vw,40px);font-weight:800;line-height:1.1}@supports ((-webkit-background-clip:text) or (background-clip:text)){.entry-title{color:#0000;background:linear-gradient(100deg,#f2b84b 0% 40%,#fff3d1 50%,#f2b84b 60% 100%) 0 0/250% 100%;text-shadow:none;filter:drop-shadow(0 0 12px #f2b84b59);-webkit-background-clip:text;background-clip:text;animation:5s ease-in-out infinite entry-shimmer}}@keyframes entry-shimmer{0%,35%{background-position:100% 0}70%,to{background-position:0 0}}.entry-sub{text-align:center;color:var(--ink-dim);margin:6px 0 12px}.field-label{color:var(--ink-dim);margin:12px 0 6px;font-size:14px;font-weight:600}.entry-input{width:100%;min-height:48px;font:inherit;color:var(--ink);border:1px solid var(--glass-border);background:#00000061;border-radius:12px;outline:none;padding:0 14px;font-size:16px;transition:border-color .15s,box-shadow .15s;display:block}.entry-input::placeholder{color:#f4f1ea73}.entry-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #f2b84b40}select.entry-input{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);background-position:calc(100% - 20px),calc(100% - 14px);background-repeat:no-repeat;background-size:6px 6px;padding-right:36px}select.entry-input option{color:#111}.field-error{color:#ff8d8d;min-height:0;margin-top:4px;font-size:13px}.field-error:empty{margin-top:0}.gender-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}.gender-card{min-height:168px;font:inherit;color:var(--ink);border:2px solid var(--glass-border);cursor:pointer;touch-action:manipulation;background:#ffffff12;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s,background-color .2s,opacity .2s;display:flex}.gender-card:active{transform:scale(.97)}.gender-card[aria-pressed=true]{border-color:var(--accent);background:#f2b84b24;transform:translateY(-6px);box-shadow:0 10px 24px #00000059,0 0 22px #f2b84b59}.gender-cards:has([aria-pressed=true]) .gender-card[aria-pressed=false]{opacity:.68}.gender-stage{flex-direction:column;justify-content:flex-end;align-items:center;min-height:122px;display:flex;position:relative}.gender-preview{filter:drop-shadow(0 6px 6px #00000073);width:80px;height:120px;display:block}.gender-card[aria-pressed=true] .gender-preview{animation:1.6s ease-in-out infinite entry-bob}@keyframes entry-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.gender-tag{white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--accent);background:#0000008c;border-radius:10px;margin-bottom:4px;padding:0 8px;font-size:12px;line-height:20px;display:none;overflow:hidden}.gender-card[aria-pressed=true] .gender-tag:not(:empty){display:block}.gender-name{font-size:18px;font-weight:700}.entry-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.entry-actions .btn{min-height:48px}.entry-go{letter-spacing:.02em;flex:1;font-size:17px;animation:2.4s ease-in-out infinite entry-pulse;box-shadow:0 0 #f2b84b8c}@keyframes entry-pulse{0%,to{box-shadow:0 0 #f2b84b80}50%{box-shadow:0 0 0 8px #f2b84b00}}@media (width>=720px){.entry-card{padding:28px 26px 22px}}@media (prefers-reduced-motion:reduce){.entry-bg,.entry-card,.entry-shake,.entry-title,.gender-card[aria-pressed=true] .gender-preview,.entry-go{animation:none}.gender-card,.entry-input{transition:none}.gender-card[aria-pressed=true]{transform:none}}.topbar{top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + 8px);gap:8px;display:flex;position:absolute}.banner{top:calc(var(--safe-top) + 56px);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;max-width:min(92vw,520px);padding:10px 14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.banner-text{font-weight:600}#ui>.toasts{pointer-events:none;flex-direction:column;align-items:center;gap:8px;max-width:92vw;display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%)}.toast{text-align:center;padding:10px 16px}#ui>.hud-layer{pointer-events:none;position:absolute;inset:0}.exit-label{min-height:34px;font:inherit;color:#1b1b1b;white-space:nowrap;pointer-events:auto;cursor:pointer;background:#f2b84beb;border:0;border-radius:17px;padding:0 14px;font-size:14px;font-weight:600;position:absolute;top:0;left:0}.exit-label[hidden]{display:none}.sit-btn{right:8px;bottom:calc(var(--safe-bottom) + 68px + 3 * 50px);pointer-events:auto;min-width:96px;min-height:46px;position:absolute}.emotes{right:calc(var(--safe-right) + 8px);bottom:calc(var(--safe-bottom) + 68px);flex-direction:column;gap:6px;display:flex;position:absolute}.emote-btn{cursor:pointer;width:44px;height:44px;padding:0;font-size:22px;line-height:1}#ui>.chat{left:calc(var(--safe-left) + 8px);right:calc(var(--safe-right) + 8px);bottom:calc(var(--safe-bottom) + 8px);pointer-events:none;position:absolute}.chat-log{text-shadow:0 1px 2px #000c;pointer-events:none;max-width:calc(100% - 64px);max-height:8.5rem;margin-bottom:6px;font-size:14px;overflow-y:auto}.chat-line{overflow-wrap:anywhere;background:#00000073;border-radius:8px;width:fit-content;max-width:100%;margin-top:2px;padding:2px 8px}.chat-self b{color:var(--accent)}.chat-form{pointer-events:auto;gap:8px;padding:6px;display:flex}.chat-input{min-width:0;min-height:40px;font:inherit;color:var(--ink);border:1px solid var(--glass-border);background:#00000059;border-radius:10px;flex:1;padding:0 10px;font-size:16px}.fade{opacity:0;pointer-events:none;background:#000;transition:opacity .3s;position:fixed;inset:0}.fade-on{opacity:1}@media (prefers-reduced-motion:reduce){.fade{transition:none}}@media (width>=720px){.sit-btn{right:12px}.chat{max-width:560px}}.notice{text-align:center;max-width:90vw;padding:14px 18px;position:absolute;top:40%;left:50%;transform:translate(-50%)}.emotes{grid-template-columns:repeat(2,44px);gap:6px;display:grid}.emote-btn{position:relative}@media (hover:hover) and (pointer:fine){.emote-btn:after{content:attr(data-key);color:var(--ink-dim);opacity:.75;font-size:10px;line-height:1;position:absolute;bottom:1px;right:3px}}.chat-log{max-width:calc(100% - 112px)}.sit-btn{right:calc(var(--safe-right) + 8px);box-shadow:0 6px 18px #00000059}.sit-btn.sit-btn-stand{color:var(--ink);border:1px solid var(--glass-border);background:#101820c7}.exit-label{box-shadow:0 3px 10px #00000059}.zone-card{text-align:center;min-width:220px;color:var(--ink);text-shadow:0 2px 12px #000c;pointer-events:none;opacity:0;padding:0 24px;position:fixed;top:42%;left:50%;transform:translate(-50%,-50%)}.zone-card-kicker{letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-size:12px;font-weight:600}.zone-card-name{margin-top:4px;font-size:clamp(28px,7vw,44px);font-weight:800;line-height:1.1}.zone-card-name:after{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);border-radius:2px;width:70%;height:3px;margin:10px auto 0;display:block}.zone-card-in{opacity:1}.zone-card-out{opacity:0;transition:opacity .3s .9s}@media (prefers-reduced-motion:no-preference){.ov-bubble{transform-origin:50% 100%;animation:.34s cubic-bezier(.2,1.5,.4,1) both fx-bubble-pop}.ov-name{animation:.22s ease-out both fx-fade-in}.emote-btn{transition:transform .12s}@media (hover:hover){.emote-btn:hover{transform:translateY(-2px)}}.emote-btn.emote-pressed{animation:.26s cubic-bezier(.3,1.6,.5,1) fx-emote-press}.sit-btn.sit-btn-in{animation:.52s cubic-bezier(.25,1.4,.5,1) both fx-sit-bounce}.sit-btn.sit-btn-in:not(.sit-btn-stand){animation:.52s cubic-bezier(.25,1.4,.5,1) both fx-sit-bounce,1.8s ease-in-out .52s infinite fx-glow}.exit-label{animation:2.4s ease-in-out infinite fx-exit-pulse;animation-delay:var(--pulse-delay,0s)}.chat-line{animation:.26s ease-out both fx-slide-up}.toast{animation:.3s cubic-bezier(.2,1.3,.4,1) both fx-toast-in}.banner:not([hidden]){animation:.32s ease-out both fx-banner-in}.zone-card-in{animation:.52s cubic-bezier(.2,.9,.3,1) both fx-card-in}.zone-card-in .zone-card-name:after{animation:.7s ease-out .2s both fx-underline}.zone-card-out{transition:none;animation:1.4s ease-in both fx-card-out}}@keyframes fx-fade-in{0%{opacity:0}}@keyframes fx-bubble-pop{0%{opacity:0;transform:translateY(6px)scale(.3)}}@keyframes fx-emote-press{0%{transform:scale(1)}35%{transform:scale(.8)}70%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes fx-sit-bounce{0%{opacity:0;transform:translateY(16px)scale(.4)}60%{opacity:1;transform:translateY(-4px)scale(1.1)}to{transform:none}}@keyframes fx-glow{50%{box-shadow:0 6px 18px #00000059,0 0 0 6px #f2b84b59}}@keyframes fx-exit-pulse{0%,to{box-shadow:0 3px 10px #00000059,0 0 #f2b84b99}50%{box-shadow:0 3px 10px #00000059,0 0 0 8px #f2b84b00}}@keyframes fx-slide-up{0%{opacity:0;transform:translateY(10px)}}@keyframes fx-toast-in{0%{opacity:0;transform:translateY(-10px)scale(.92)}}@keyframes fx-banner-in{0%{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%)}}@keyframes fx-card-in{0%{opacity:0;transform:translate(calc(-50% - 60px),-50%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes fx-card-out{0%,55%{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(calc(60px - 50%),-50%)}}@keyframes fx-underline{0%{transform:scaleX(0)}}
