*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:linear-gradient(180deg,#e3f4ed,var(--pearl) 45%,var(--vanilla));-webkit-font-smoothing:antialiased;overflow-x:hidden}button{font:inherit;color:inherit}img{max-width:100%}.btn{font-weight:700;border:0;border-radius:999px;padding:.7em 1.5em;cursor:pointer;background:var(--lagoon);color:#fff;box-shadow:0 6px 18px #1f7f8052}.btn:disabled{opacity:.55;cursor:default}.btn.ghost{background:#ffffffe0;color:var(--lagoon);box-shadow:none}.muted{color:var(--ink-soft);font-size:.9em}.loading{min-height:60vh;display:grid;place-items:center;gap:12px;font-weight:600;color:var(--lagoon);text-align:center}.topbar{position:fixed;top:12px;right:14px;z-index:40}.chip{display:inline-flex;align-items:center;gap:8px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;border-radius:999px;padding:6px 8px 6px 14px;box-shadow:var(--shadow);font-weight:600;font-size:14px;cursor:pointer}.chip-name{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-room{font-size:12px;background:var(--mint);color:var(--lagoon);border-radius:999px;padding:2px 8px}.chip-link{border:0;background:transparent;color:var(--ink-soft);font-size:12px;text-decoration:underline;cursor:pointer}.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.petal{position:absolute;top:-40px;width:14px;height:20px;border-radius:70% 0;background:linear-gradient(135deg,#ffb3c4,var(--poinciana));opacity:.8;animation:fall linear infinite}@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(720deg)}}.bubble{position:absolute;bottom:-60px;border-radius:50%;opacity:.8;animation:rise linear infinite;background:radial-gradient(circle at 30% 30%,#fffffff2,#fff0 30%),conic-gradient(from 30deg,#ffa0c866,#82c8ff66,#aaffd266,#ffa0c866);-webkit-mask:radial-gradient(circle,transparent 60%,#000 67%);mask:radial-gradient(circle,transparent 60%,#000 67%)}@keyframes rise{to{transform:translateY(-120vh)}}@media(prefers-reduced-motion:reduce){.petal,.bubble{animation:none;display:none}}.start-overlay{position:fixed;inset:0;z-index:100;border:0;display:grid;place-content:center;gap:16px;text-align:center;cursor:pointer;background:#e8f6f09e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .6s}.start-overlay.light{background:#e8f6f059}.start-overlay.out{opacity:0}.start-title{font:700 clamp(34px,6vw,72px) var(--font-title);color:var(--lagoon)}.start-cta{justify-self:center;font-weight:700;background:var(--lagoon);color:#fff;padding:.8em 2em;border-radius:999px;box-shadow:0 8px 24px #1f7f8059;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.05)}}.page-lobby{position:relative;min-height:100vh;padding:28px 20px 40px;max-width:1400px;margin:0 auto}.lobby-bg{position:fixed;inset:-20px;z-index:-1;background:url(/img/room-bg.jpg) center/cover;filter:blur(6px) brightness(1.08) saturate(1.1)}.lobby-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#f6fbf88c,#fff6e066)}.lobby-title{text-align:center;margin:10px 0 18px}.lobby-title h1{margin:0;font:700 clamp(38px,6vw,76px) var(--font-title);color:var(--lagoon);text-shadow:0 2px 22px rgba(255,255,255,.9)}.lobby-title p{margin:4px 0 0;color:var(--ink-soft)}.countdown,.banner{margin:0 auto 18px;width:fit-content;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 20px;border-radius:999px;font-weight:700;color:var(--lagoon);box-shadow:var(--shadow);text-align:center}.lobby-body{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}.rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 14px}.room-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;cursor:pointer;padding:6px;animation:bob 5s ease-in-out infinite}.room-card img{width:100%;aspect-ratio:764 / 880;object-fit:contain;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),filter .35s;filter:drop-shadow(0 10px 18px rgba(31,127,128,.25))}.room-card:hover img,.room-card:focus-visible img{transform:scale(1.07) translateY(-3%)}.room-card.mine .room-name{background:var(--lagoon);color:#fff}@keyframes bob{50%{transform:translateY(-6px)}}.room-name{font-weight:800;background:#ffffffd9;padding:2px 12px;border-radius:999px;margin-top:-8%}.room-count{font-size:12px;color:var(--ink-soft)}.room-mine{font-size:11px;font-weight:700;color:var(--lagoon)}.bar{width:62%;height:6px;border-radius:9px;background:#ffffffbf;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--lagoon));border-radius:9px;transition:width .8s}.leaderboard{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:sticky;top:70px}.leaderboard h3{margin:0 0 8px;font-size:16px;color:var(--lagoon)}.lb-row{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;border-bottom:1px dashed rgba(31,127,128,.15)}.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:#123b3347;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.login-card{width:min(420px,100%);background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:0 20px 60px #123b3340;display:grid;gap:10px}.login-card h2{margin:0;font:700 32px var(--font-title);color:var(--lagoon)}.login-card label{display:grid;gap:4px;font-size:13px;font-weight:600}.login-card input,.login-card select{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid #cfe5dc;background:var(--pearl)}.login-card .row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.error{color:var(--berry);font-size:13px;margin:0;min-height:1em}.toasts{position:fixed;left:50%;bottom:20px;transform:translate(-50%);z-index:120;display:grid;gap:8px;width:min(520px,calc(100% - 32px))}.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;box-shadow:var(--shadow);transition:opacity .4s;font-size:14px}.toast-error{background:var(--berry)}.toast.out{opacity:0}.quota-notice{position:fixed;z-index:1000;left:50%;top:max(16px,env(safe-area-inset-top));transform:translate(-50%);width:min(560px,calc(100% - 32px));padding:14px 18px;border-radius:18px;background:#ffffffc7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);box-shadow:var(--shadow);text-align:center;font-size:15px;line-height:1.5}.quota-notice p{margin:0}@media(max-width:900px){.lobby-body{grid-template-columns:1fr}.leaderboard{position:static;order:-1}.rooms{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.page-lobby{padding:64px 12px 32px}.rooms{grid-template-columns:repeat(2,1fr)}.chip-name{max-width:9ch}}.page-room{position:fixed;inset:0;overflow:hidden}.stage{position:absolute;inset:0;background:#dff1ea url(/img/room-bg.jpg) center/cover}.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}.hud{position:absolute;inset:0;pointer-events:none;z-index:20}.hud>*{pointer-events:auto}.hud-left{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center}.hud-right{position:absolute;right:14px;bottom:16px;display:flex;gap:10px;align-items:center}.hud-box{display:flex;align-items:center;gap:10px;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow);font-weight:700}.hud-box .bar{width:clamp(70px,12vw,180px);height:8px;background:#1f7f8026}.hud-count{font-size:13px;color:var(--ink-soft);white-space:nowrap}.hud-btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);cursor:pointer;font-size:18px}.hud-link{border:0;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--lagoon);cursor:pointer;box-shadow:var(--shadow)}.hud-notice{position:absolute;left:50%;top:66px;transform:translate(-50%);background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--berry);box-shadow:var(--shadow);max-width:calc(100% - 32px);text-align:center}.bell-tip{position:absolute;transform:translate(-50%,12px);background:#fffffff0;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 4px 14px #0000001a;opacity:0;transition:opacity .2s;pointer-events:none}.bell-tip.on{opacity:1}.bells-2d{position:absolute;inset:0}.bell-2d{position:absolute;width:9%;aspect-ratio:300 / 666;transform:translate(-50%,-38%);border:0;padding:0;background:transparent;cursor:pointer;transition:left 1.6s cubic-bezier(.6,0,.3,1),top 1.6s cubic-bezier(.6,0,.3,1),width 1.6s,opacity 1.2s}.bells-2d.portrait .bell-2d{width:17%}.bell-2d:before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:300%;background:#2f5f56;opacity:.85;pointer-events:none}.bell-2d .bell-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s;transform-origin:50% 0;animation:sway var(--d) ease-in-out infinite var(--dl)}.bell-2d[data-state=vo] .bell-img-vo,.bell-2d[data-state=lanh] .bell-img-lanh,.bell-2d[data-state=hoanthien] .bell-img-hoanthien{opacity:1}.bell-2d .bell-img-vo{filter:brightness(1.28) saturate(1.05) contrast(.95)}.bell-2d .bell-img-lanh{filter:brightness(1.22) saturate(1.15)}@keyframes sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.bell-glow{position:absolute;left:-60%;right:-60%;top:2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,246,210,.95),rgba(255,226,160,.4) 35%,transparent 65%);opacity:0;transition:opacity 1.2s;pointer-events:none}.bell-2d[data-state=hoanthien] .bell-glow{opacity:.8}.bell-flash{position:absolute;left:-80%;right:-80%;top:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,.6) 25%,transparent 60%);opacity:0;pointer-events:none}.bell-flash.go{animation:flash 1s ease-out}@keyframes flash{0%{opacity:0;transform:scale(.3)}20%{opacity:1}to{opacity:0;transform:scale(1.4)}}.bells-2d.gather .bell-2d{left:50%!important;top:18%!important;opacity:0}@media(max-width:640px){.hud-left{top:60px}.hud-notice{top:116px;font-size:12px}.hud-right{left:12px;right:12px;justify-content:space-between}}.sheet-wrap{position:fixed;inset:0;z-index:60;background:#123b3338;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .25s;transition:opacity .3s}.sheet-wrap.out{opacity:0}@keyframes fadeIn{0%{opacity:0}}.sheet{position:relative;width:min(720px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,#fff,var(--pearl));border-radius:26px 26px 0 0;padding:22px 24px 28px;box-shadow:0 -10px 40px #123b3333;animation:up .35s cubic-bezier(.2,.9,.3,1)}@keyframes up{0%{transform:translateY(40px);opacity:0}}.sheet-close{position:absolute;right:14px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:var(--mint);color:var(--lagoon);font-size:22px;cursor:pointer}.sheet header h2{margin:2px 0 0;font:700 38px var(--font-title);color:var(--lagoon)}.sheet-code{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.mockup-badge{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--berry);background:var(--blush);padding:2px 10px;border-radius:999px}.sheet-message{font-style:italic;color:var(--ink-soft);margin:8px 0 12px}.sheet-progress{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin-bottom:10px}.sheet-progress .bar{flex:1;height:8px;background:#1f7f801f}.sheet-how{background:#fff;border:1px solid #dcefe7;border-radius:14px;padding:8px 14px;margin-bottom:14px}.sheet-how summary{font-weight:700;cursor:pointer;color:var(--lagoon)}.sheet-how p{margin:6px 0;font-size:14px;line-height:1.55}.form{display:grid;gap:10px;margin-bottom:12px}.form label{display:grid;gap:4px;font-size:13px;font-weight:600}.form input,.form textarea{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid #cfe5dc;background:#fff;resize:vertical}.form-row{display:flex;justify-content:space-between;align-items:center}.counter{font-size:12px;color:var(--ink-soft)}.counter.over{color:var(--berry);font-weight:700}.form-msg{margin:0;font-size:13px;min-height:1em;color:var(--lagoon)}.form-msg.error{color:var(--berry)}.notice{background:var(--vanilla);border-radius:14px;padding:12px 14px;font-weight:600;color:var(--berry)}.big-press{justify-self:center;font-size:17px;padding:.9em 2em}.kw{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.kw-chip{border:1px solid var(--aqua);background:#fff;color:var(--lagoon);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:13px}.kw-chip.on{background:var(--lagoon);color:#fff}.multi-progress{margin:0;font-weight:700;color:var(--lagoon)}.poses{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pose{margin:0;text-align:center;font-size:12px}.pose img,.pose-ph{display:block;width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}.pose-ph{background:radial-gradient(circle at 50% 38%,var(--blush) 0 18%,transparent 19%),radial-gradient(ellipse at 50% 85%,var(--aqua) 0 35%,transparent 36%),var(--mint)}.pose-ph-1{filter:hue-rotate(40deg)}.pose-ph-2{filter:hue-rotate(-40deg)}.pose-ph-3{filter:hue-rotate(90deg)}.photo-preview{max-height:200px;border-radius:12px;object-fit:contain}.quiz{display:grid;gap:8px}.quiz-q{font-weight:700;margin:0}.quiz-choice{text-align:left;border:1px solid #cfe5dc;background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}.quiz-choice:hover{background:var(--mint)}.quiz-result{font-weight:800;color:var(--lagoon);font-size:18px}.mine{background:#fff;border-radius:14px;padding:8px 14px;margin-bottom:12px;border:1px dashed var(--aqua)}.mine h4{margin:4px 0;font-size:13px;color:var(--lagoon)}.mine ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}.mine li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.status-chip{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--vanilla);color:#8a6d1f}.mine-approved .status-chip{background:var(--mint);color:var(--lagoon)}.mine-rejected .status-chip{background:var(--blush);color:var(--berry)}.mine-body{overflow-wrap:anywhere}.wall-title{font:700 26px var(--font-title);color:var(--lagoon);margin:8px 0}.wall-wishes{columns:2 220px;column-gap:12px}.wish-card{break-inside:avoid;margin:0 0 12px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 6px 18px #1f7f801a;border-top:4px solid var(--aqua)}.wish-card blockquote{margin:0;font:600 18px/1.35 var(--font-title);color:var(--ink);overflow-wrap:anywhere}.wish-card figcaption{margin-top:6px;font-size:12px;color:var(--ink-soft)}.wall-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.wall-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.wall-feed{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}.wall-feed li{background:#fff;border-radius:12px;padding:8px 12px;display:flex;gap:6px;flex-wrap:wrap}.wall-feed time{margin-left:auto;color:var(--ink-soft);font-size:12px}@media(max-width:640px){.sheet-wrap{align-items:stretch}.sheet{max-height:none;height:100%;border-radius:0;padding:18px 16px 28px}.poses{grid-template-columns:repeat(2,1fr)}}.guide{position:fixed;left:10px;bottom:8px;z-index:70;display:flex;align-items:flex-end;pointer-events:none;height:min(40vh,340px)}.pl-char{pointer-events:auto;position:relative;height:100%;aspect-ratio:524 / 800;border:0;padding:0;background:transparent;cursor:pointer;animation:plFloat 4s ease-in-out infinite;transform-origin:50% 100%}.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(31,127,128,.25));transition:transform .08s}.pl-aura{position:absolute;inset:12% 10% 20%;border-radius:50%;background:radial-gradient(circle,rgba(255,250,220,.9),rgba(191,230,216,.35) 45%,transparent 70%);opacity:0;transition:opacity .15s}@keyframes plFloat{50%{transform:translateY(-3%)}}.guide.excited .pl-char{animation:plHop .55s ease-in-out infinite}@keyframes plHop{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6%) rotate(2deg)}}.guide.tender .pl-char{animation:plBreathe 3.2s ease-in-out infinite}@keyframes plBreathe{50%{transform:scale(1.025) translateY(-1%)}}.pl-bubble{pointer-events:auto;align-self:center;margin-left:-10px;max-width:min(480px,42vw);background:#fffffff0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px 20px 20px 6px;padding:10px 14px 8px;box-shadow:0 10px 30px #1f7f8038;border:1px solid rgba(191,230,216,.9);font-size:15px;line-height:1.55;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s,transform .35s}.pl-bubble.on{opacity:1;transform:none}.pl-bubble b{display:block;font:700 18px var(--font-title);color:var(--lagoon)}.pl-sub{margin:2px 0 6px;min-height:1.5em}.pl-row{display:flex;justify-content:flex-end;gap:6px}.pl-btn{font-size:12px;font-weight:600;border:0;border-radius:999px;padding:4px 10px;background:#e3f4ee;color:var(--lagoon);cursor:pointer}body[data-route=lobby] .guide{height:min(30vh,260px)}.sheet-wrap~.guide-host .guide,body:has(.sheet-wrap) .guide{opacity:0;pointer-events:none}@media(max-width:640px){.guide{height:150px;left:4px;bottom:4px;right:4px}.pl-bubble{max-width:none;flex:1;font-size:13px}}@media(prefers-reduced-motion:reduce){.pl-char,.guide.excited .pl-char,.guide.tender .pl-char{animation:none}}.intro{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:#dff1ea59;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .5s}.intro.out{opacity:0}.intro-card{width:min(760px,100%);background:#ffffffa8;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:clamp(18px,4vw,40px);box-shadow:0 20px 60px #1f7f8033}.intro-card h2{margin:0 0 .4em;font:700 clamp(30px,5vw,50px) var(--font-title);color:var(--lagoon)}.intro-card p{font-size:clamp(14px,1.6vw,18px);line-height:1.7;margin:0 0 .7em;opacity:0;transform:translateY(10px);transition:all .9s}.intro-card p.show{opacity:1;transform:none}.intro-actions{display:flex;justify-content:flex-end;margin-top:.6em}.intro-skip{position:absolute;right:18px;top:18px}.whiteout{position:fixed;inset:0;z-index:110;background:#fffdf4;opacity:0;pointer-events:none;transition:opacity .8s}.whiteout.on{opacity:1}.finale{position:fixed;inset:0;z-index:100;overflow:hidden;opacity:0;transition:opacity 1s}.finale.on{opacity:1}.finale-bg{position:absolute;inset:0;background:#f3faf6 url(/img/tribute.jpg) center/contain no-repeat;transform:scale(1.15);transition:transform 9s ease-out}.finale.on .finale-bg{transform:scale(1)}@media(min-aspect-ratio:16/9){.finale-bg{background-size:cover}}.finale-wishes{position:absolute;inset:0}.finale-wish{position:absolute;margin:0;transform:translate(-50%,-50%);max-width:min(300px,44vw);background:#fffc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:8px 14px;box-shadow:0 6px 18px #1f7f8026;opacity:0;animation:wishIn 1.2s ease-out forwards,drift 7s ease-in-out infinite 2s}.finale-wish blockquote{margin:0;font:600 clamp(14px,1.4vw,20px)/1.3 var(--font-title);color:var(--ink);overflow-wrap:anywhere}.finale-wish figcaption{font-size:11px;color:var(--ink-soft);margin-top:2px}@keyframes wishIn{0%{opacity:0;transform:translate(-50%,calc(-50% + 20px)) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes drift{50%{transform:translate(-50%,calc(-50% - 8px))}}.finale-msg{position:absolute;left:50%;bottom:74px;transform:translate(-50%);width:min(820px,calc(100% - 32px));text-align:center;opacity:0;transition:opacity 1.5s 2.5s}.finale.on .finale-msg{opacity:1}.finale-msg p{display:inline-block;margin:0;font:600 clamp(15px,1.8vw,24px) var(--font-title);color:var(--lagoon);background:#ffffffd1;padding:.4em 1.2em;border-radius:22px}.finale-actions{position:absolute;right:16px;top:14px;display:flex;gap:8px}@media(max-aspect-ratio:1/1){.finale-bg{background-size:cover}.finale-wish{max-width:44vw;padding:6px 10px}.finale-msg{bottom:10px}.finale-msg p{font-size:15px}}