*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;overflow:hidden;background:#87b5e0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{position:fixed;inset:0}.hud{position:absolute;top:16px;left:16px;z-index:10;width:max-content;color:#fff;font-family:system-ui,sans-serif;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hud-head{pointer-events:auto;cursor:pointer;width:100%;box-sizing:border-box;display:flex;align-items:baseline;gap:8px;padding:8px 12px;border:none;border-radius:12px;background:rgba(12,22,36,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:inherit;font:inherit;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.25)}.hud.is-open .hud-head{border-radius:12px 12px 0 0}.hud-brand{font-size:18px;font-weight:800;letter-spacing:.3px}.hud-sub{font-size:12px;opacity:.7}.hud-chevron{margin-left:auto;font-size:11px;opacity:.7}.hud-controls{pointer-events:auto;width:100%;box-sizing:border-box;margin:0;padding:9px 12px 11px;list-style:none;display:flex;flex-direction:column;gap:6px;border-radius:0 0 12px 12px;background:rgba(12,22,36,.52);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 8px 16px rgba(0,0,0,.22)}.hud-controls li{display:flex;align-items:center;gap:10px;font-size:12.5px}.hud-keys{display:inline-flex;gap:3px;flex:0 0 auto;min-width:96px}.hud-label{opacity:.85}.hud kbd{display:inline-block;min-width:15px;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.14);border:solid rgba(255,255,255,.22);border-width:1px 1px 2px;font:600 11px system-ui,sans-serif;line-height:1.4;text-align:center;color:#fff}.lobby-switch{position:absolute;top:16px;right:16px;z-index:12;width:max-content;font-family:system-ui,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lobby-switch-head{display:flex;align-items:center;gap:7px;width:100%;padding:8px 12px;border:none;border-radius:12px;background:rgba(12,22,36,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font:600 13px system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}.lobby-switch.is-open .lobby-switch-head{border-radius:12px 12px 0 0}.lobby-switch-head:disabled{opacity:.6;cursor:default}.lobby-switch-name{font-weight:700}.lobby-switch-chevron{margin-left:auto;font-size:11px;opacity:.7}.lobby-switch-menu{display:flex;flex-direction:column;gap:3px;padding:7px;border-radius:0 0 12px 12px;background:rgba(12,22,36,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 10px 20px rgba(0,0,0,.28)}.lobby-switch-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;opacity:.6;color:#fff;padding:2px 6px 4px}.lobby-switch-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 10px;border:none;border-radius:8px;background:transparent;color:#fff;font:inherit;cursor:pointer;transition:background .12s}.lobby-switch-item:hover:not(:disabled){background:rgba(255,255,255,.1)}.lobby-switch-item.is-current{background:rgba(143,212,94,.16)}.lobby-switch-item:disabled:not(.is-current){opacity:.4;cursor:default}.lobby-switch-item.is-current{cursor:default}.lobby-switch-item-name{font-size:13px;font-weight:600}.lobby-switch-count{font-size:11px;opacity:.7;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.chat{position:absolute;left:16px;bottom:16px;z-index:12;width:320px;gap:6px;font-family:system-ui,sans-serif}.chat,.chat-log{display:flex;flex-direction:column}.chat-log{gap:3px;max-height:190px;overflow:hidden}.chat-msg{background:rgba(15,20,28,.55);color:#fff;padding:4px 10px;border-radius:8px;font-size:13px;line-height:1.35;width:-moz-fit-content;width:fit-content;max-width:100%;word-break:break-word}.chat-msg--system{background:rgba(143,212,94,.16);color:#d8f0c2;font-style:italic}.chat-user{font-weight:700;color:#ffd97a}.chat-user:after{content:":";color:#fff}.chat-form{pointer-events:auto}.chat-input{width:100%;padding:7px 12px;border-radius:8px;border:1.5px solid rgba(255,255,255,.5);background:rgba(10,14,20,.75);color:#fff;font-size:14px;outline:none}.chat-hint{color:rgba(255,255,255,.75);font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.5);-webkit-user-select:none;-moz-user-select:none;user-select:none}.chat-bubble{background:#fff;color:#1c2430;border:1.5px solid #b9c4d4;padding:4px 11px;border-radius:12px;font-size:14px;font-family:system-ui,sans-serif;max-width:220px;width:max-content;text-align:center;line-height:1.3;box-shadow:0 2px 6px rgba(0,0,0,.25)}.chat-bubble,.scoop-poof{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.scoop-poof{font-size:26px;animation:poof .85s ease-out forwards}@keyframes poof{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(1.7) translateY(-18px)}}.pet-hearts{display:flex;gap:6px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pet-hearts span{color:#ff5f7a;font-size:18px;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:heart-float 1.6s ease-out forwards}.pet-hearts span:nth-child(2){animation-delay:.25s;font-size:22px}.pet-hearts span:nth-child(3){animation-delay:.5s}@keyframes heart-float{0%{opacity:0;transform:translateY(6px) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.1)}to{opacity:0;transform:translateY(-34px) scale(.9)}}.prompt{bottom:76px;padding:6px 16px;border-radius:8px;background:rgba(0,0,0,.4);color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}.powerbar,.prompt{position:absolute;left:50%;transform:translateX(-50%);z-index:10;opacity:0;transition:opacity .15s;pointer-events:none}.powerbar{bottom:48px;width:220px;height:14px;border-radius:7px;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.7);overflow:hidden}.powerbar>div{height:100%;width:0;background:linear-gradient(90deg,#7ec850,#f2c14e,#e2574c)}.loading{position:absolute;color:#fff;font-size:18px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}.game-loading,.loading{inset:0;display:flex;align-items:center;justify-content:center}.game-loading{position:fixed;z-index:40;overflow:hidden;background:linear-gradient(180deg,#4f9fe0,#74bced 30%,#b3ddf1 50%,#c7e6b0 59%,#82c257 74%,#67aa45);opacity:1;transition:opacity .5s ease}.game-loading.is-hidden{opacity:0;pointer-events:none}.game-loading-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;color:#fff;text-align:center;padding:28px 40px 30px;border-radius:20px;background:rgba(16,28,44,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 55px rgba(8,18,32,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.game-loading-paw{font-size:46px;animation:game-loading-bob 1.1s ease-in-out infinite}@keyframes game-loading-bob{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}.game-loading-card h2{font-size:22px;font-weight:800;letter-spacing:.3px;text-shadow:0 1px 4px rgba(0,0,0,.4)}.game-loading-track{width:min(320px,70vw);height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.game-loading-fill{height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,#6dab43,#8fd45e);animation:game-loading-sweep 1.15s ease-in-out infinite}@keyframes game-loading-sweep{0%{transform:translateX(-110%)}to{transform:translateX(320%)}}.game-loading-sub{font-size:13px;opacity:.75}.join-backdrop{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#4f9fe0,#74bced 30%,#b3ddf1 50%,#c7e6b0 59%,#82c257 74%,#67aa45)}.park-scene{position:absolute;inset:0;pointer-events:none}.park-sun{top:-6%;width:520px;height:520px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,249,214,.85),rgba(255,249,214,0) 62%)}.park-hill,.park-sun{position:absolute;left:50%}.park-hill{bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}.park-hill--back{width:170%;height:48%;transform:translateX(-60%);background:#8ac95d}.park-hill--front{width:160%;height:40%;transform:translateX(-38%);background:#72b64a}.park-cloud{position:absolute;height:26px;background:rgba(255,255,255,.92);border-radius:999px;box-shadow:20px 5px 0 -3px rgba(255,255,255,.92),-22px 7px 0 -5px rgba(255,255,255,.92),2px -11px 0 -5px rgba(255,255,255,.92);animation:park-drift linear infinite}.park-cloud--a{width:86px;top:15%;animation-duration:48s}.park-cloud--b{width:60px;top:27%;opacity:.8;animation-duration:64s;animation-delay:-22s}.park-cloud--c{width:104px;top:8%;animation-duration:56s;animation-delay:-38s}@keyframes park-drift{0%{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 160px))}}.join-brand{display:flex;align-items:center;justify-content:center;gap:12px}.join-brand-paw{font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.join-brand-word{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.5px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.35)}.join-panel{position:relative;width:min(700px,calc(100vw - 32px));padding:26px 28px 24px;border-radius:20px;background:rgba(16,28,44,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 55px rgba(8,18,32,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;flex-direction:column;gap:14px}.join-blocker{width:min(420px,calc(100vw - 32px))}.join-blocker p{font-size:14px;line-height:1.55;opacity:.9}.join-panel h2{font-size:20px;font-weight:800;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.4)}.join-sub{font-size:14px;font-weight:500;opacity:.82;letter-spacing:.3px;margin-top:-8px;text-align:center}.join-preview{height:150px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(120% 90% at 50% 100%,rgba(143,212,94,.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));overflow:hidden;cursor:-webkit-grab;cursor:grab}.join-preview:active{cursor:-webkit-grabbing;cursor:grabbing}.join-preview-loading{height:100%;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:.7;white-space:nowrap}.join-row{display:flex;gap:10px}.join-row .join-field{flex:1 1;min-width:0}.join-row .join-narrow{flex:0.45 1}.join-columns{display:flex;gap:14px;align-items:stretch}.join-col{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}.join-col-head{display:flex;align-items:center;gap:8px;margin:-14px -14px 0;padding:10px 14px;background:rgba(0,0,0,.28);border-bottom:1px solid rgba(255,255,255,.08);border-radius:13px 13px 0 0;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.85)}.join-col-emoji{font-size:15px}.join-col .join-preview{flex:1 1;height:auto;min-height:150px}@media (max-width:560px){.join-columns{flex-direction:column}.join-col .join-preview{min-height:130px}}.join-sentence{display:flex;align-items:center;gap:8px}.join-sentence select{flex:1 1;min-width:0}.join-sentence .join-the{font-size:14px;font-weight:600;opacity:.75;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}.join-field{display:flex;flex-direction:column;gap:5px}.join-field span{font-size:12px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.6px}.join-field input,.join-field select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,background .15s}.join-field input::placeholder{color:rgba(255,255,255,.45)}.join-field input:focus,.join-field select:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16)}.join-field select option{background:#1c2a3a;color:#fff}.join-error{padding:8px 12px;border-radius:8px;background:rgba(226,87,76,.25);border:1px solid rgba(226,87,76,.6);font-size:13px}.join-submit{padding:10px 16px;border-radius:10px;border:none;background:linear-gradient(180deg,#8fd45e,#6dab43);color:#163308;font-size:15px;font-weight:800;letter-spacing:.3px;cursor:pointer;transition:filter .15s,transform .05s}.join-submit:hover:not(:disabled){filter:brightness(1.08)}.join-submit:active:not(:disabled){transform:translateY(1px)}.join-submit:disabled{opacity:.6;cursor:default}