:root{--pink: #ff6f9c;--pink-d: #e04a7a;--blue: #4aa3ff;--blue-d: #2b7fe0;--ink: #3b2f4a;--cream: #fffaf2;--panel: rgba(255, 255, 255, .92);--shadow: 0 10px 30px rgba(60, 40, 90, .18)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#bfe6ff}body{font-family:Jua,Apple SD Gothic Neo,Malgun Gothic,sans-serif;color:var(--ink);user-select:none;-webkit-tap-highlight-color:transparent}button,input{font-family:inherit;color:inherit}#app,.screen{position:fixed;inset:0}.screen{display:flex;align-items:center;justify-content:center}.bg{position:absolute;inset:0;background:url(/assets/bg.jpg) center / cover no-repeat}.bg.dim:after,.bg.dim2:after{content:"";position:absolute;inset:0;background:#fff5fa59;backdrop-filter:blur(3px)}.bg.dim2:after{background:#28467859;backdrop-filter:blur(5px)}.panel{background:var(--panel);border-radius:22px;box-shadow:var(--shadow);border:3px solid #fff}.btn{border:0;cursor:pointer;border-radius:16px;padding:10px 18px;font-size:18px;color:#fff;position:relative;transition:transform .08s,filter .15s;box-shadow:0 5px #0000002e}.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 2px #0000002e}.btn:disabled{opacity:.6;cursor:default;transform:none}.btn.big{font-size:24px;padding:14px 22px;border-radius:20px}.btn.small{font-size:15px;padding:7px 13px;border-radius:12px}.btn.icon{width:40px;padding:7px 0}.btn-pink{background:linear-gradient(#ff8db3,var(--pink));box-shadow:0 5px 0 var(--pink-d)}.btn-blue{background:linear-gradient(#73bbff,var(--blue));box-shadow:0 5px 0 var(--blue-d)}.btn-white{background:#fff;color:var(--ink);box-shadow:0 4px #d8cfe6}.btn-gray{background:linear-gradient(#b8b2c4,#9a93a8);box-shadow:0 5px #7d768b}.btn.dim{filter:grayscale(.5) brightness(.95)}.corner{position:absolute;right:18px;top:18px}.inp{width:100%;border:3px solid #e9def7;border-radius:14px;padding:10px 14px;font-size:19px;background:#fff;outline:none;transition:border-color .15s}.inp:focus{border-color:var(--pink)}.title-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}.logo{margin:0;text-align:center;line-height:.95;transform:rotate(-3deg);animation:logoBob 3s ease-in-out infinite}.logo span{display:block;font-weight:400;-webkit-text-stroke:9px #2b4fa8;paint-order:stroke fill;text-shadow:0 7px 0 #2b4fa8,0 12px 18px rgba(0,0,0,.25)}.logo .l1{font-size:66px;color:#7fd8ff}.logo .l2{font-size:82px;color:#ffe04d;margin-top:-6px}@keyframes logoBob{50%{transform:rotate(-1deg) translateY(-6px)}}.title-panel{width:min(440px,92vw);padding:22px 24px 18px;display:flex;flex-direction:column;gap:8px}.lbl{font-size:15px;color:#8a7a9e;margin-top:4px}.char-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.char-card{border:3px solid #eee6f7;background:#fff;border-radius:16px;padding:6px 4px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:transform .12s,border-color .12s,background .12s}.char-card img{height:62px;width:62px;object-fit:contain;transition:transform .2s}.char-card span{font-size:15px}.char-card:hover img{transform:translateY(-4px) rotate(-4deg)}.char-card.on{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,white);transform:translateY(-3px);box-shadow:0 6px 14px color-mix(in srgb,var(--cc) 35%,transparent)}.char-card.on img{animation:hop .6s ease-in-out infinite alternate}@keyframes hop{to{transform:translateY(-5px)}}.btn-row{display:flex;margin-top:8px}.btn-row .btn{flex:1}.join-row{display:flex;gap:8px;margin-top:6px}.join-row .code{text-transform:uppercase;letter-spacing:6px;text-align:center;flex:1}.join-row .btn{white-space:nowrap}.invite{background:#fff4c7;border-radius:12px;padding:6px 10px;text-align:center;color:#8a6400}.msg{min-height:20px;text-align:center;color:var(--pink-d);font-size:15px}.keys-help{background:#ffffffbf;padding:8px 16px;border-radius:999px;font-size:15px}.floaties i{position:absolute;width:46px;height:56px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 35% 30%,#fff 0 10%,#8fd6ff 30%,#2e9bf0 90%);opacity:.8;animation:floatUp 12s linear infinite;bottom:-80px}.floaties i:after{content:"";position:absolute;bottom:-6px;left:50%;width:8px;height:8px;margin-left:-4px;background:#2e8fe0;border-radius:2px;transform:rotate(45deg)}.floaties i:nth-child(1){left:8%;animation-delay:0s}.floaties i:nth-child(2){left:22%;animation-delay:-5s;transform:scale(.7)}.floaties i:nth-child(3){left:78%;animation-delay:-2s}.floaties i:nth-child(4){left:90%;animation-delay:-8s}.floaties i:nth-child(5){left:62%;animation-delay:-10s}@keyframes floatUp{to{transform:translateY(-115vh) rotate(15deg)}}.room-wrap{position:relative;width:min(1100px,96vw);height:min(800px,96vh);display:grid;grid-template-rows:auto 1fr 150px;gap:12px}.room-head{display:flex;align-items:center;gap:10px;padding:10px 14px}.room-code{font-size:20px}.room-code b{display:inline-block;background:#2b4fa8;color:#ffe04d;padding:2px 12px;border-radius:10px;letter-spacing:5px;margin-left:6px}.spacer{flex:1}.room-main{display:grid;grid-template-columns:1fr 300px;gap:12px;min-height:0}.slots{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0}.slot{position:relative;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--cc) 12%,white));border-radius:22px;border:4px solid #fff;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 8px 14px;overflow:hidden}.slot.me{border-color:#ffe04d}.slot .stage{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0;background:radial-gradient(ellipse 45% 10% at 50% 92%,rgba(0,0,0,.15),transparent 70%)}.slot .stage img{max-width:92%;max-height:100%;object-fit:contain;animation:idle 1.6s ease-in-out infinite;transform-origin:50% 100%}.slot.is-ready .stage img{animation:cheer .5s ease-in-out infinite alternate}@keyframes idle{50%{transform:scale(1.03,.97)}}@keyframes cheer{to{transform:translateY(-8px)}}.slot .pname{font-size:19px;margin-top:4px;text-align:center}.slot .pname small{font-size:13px;color:#9a8db0}.slot .cname{font-size:14px;color:#9a8db0}.netb{font-size:12px;margin-top:2px;padding:1px 8px;border-radius:999px}.netb.direct{background:#e3f9e9;color:#23894a}.netb.relay{background:#fff1dc;color:#b26a00}.netb.turn{background:#e4f1ff;color:#2160b8}#busytext{white-space:pre-line;text-align:center}.badge{margin-top:4px;padding:3px 12px;border-radius:999px;font-size:13px;color:#fff}.badge.host{background:#ffb020}.badge.ready{background:#2fc265}.badge.wait{background:#b5adc2}.team-ribbon{position:absolute;top:10px;left:10px;background:var(--tc);color:#fff;padding:3px 10px;border-radius:10px;font-size:14px}.slot.empty{background:#ffffff73;border:4px dashed rgba(255,255,255,.9);box-shadow:none;justify-content:center}.empty-in{display:flex;flex-direction:column;align-items:center;color:#7d8aa6;font-size:18px}.empty-in span{font-size:44px;line-height:1}.room-side{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto;padding-bottom:6px}.box{padding:8px 12px}.box-title{font-size:15px;color:#8a7a9e;margin-bottom:6px}.maps{display:grid;grid-template-columns:1fr 1fr;gap:5px}.map-card{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;text-align:left;background:#fff;border:3px solid #eee6f7;border-radius:12px;padding:3px 5px;cursor:pointer;min-height:44px}.map-card:disabled{cursor:default}.map-card img{grid-row:span 2;width:38px;border-radius:6px;image-rendering:pixelated}.map-card .mn{font-size:14px;line-height:1.15;word-break:keep-all}.map-card .md{font-size:12px;color:#9a8db0}.map-card.on{border-color:var(--pink);background:#fff0f5}.seg{display:flex;gap:6px}.seg-btn{flex:1;border:3px solid #eee6f7;background:#fff;border-radius:12px;padding:7px 0;font-size:16px;cursor:pointer}.seg-btn:disabled{cursor:default}.seg-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}.seg-btn.team0.on{background:#ff4f6d;border-color:#ff4f6d}.seg-btn.team1.on{background:#3f86ff;border-color:#3f86ff}.team-seg{margin-top:8px}.mini-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mini-char{background:#fff;border:3px solid #eee6f7;border-radius:12px;padding:3px;cursor:pointer}.mini-char img{width:100%;height:34px;object-fit:contain}.mini-char.on{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 15%,white)}.go{margin-top:auto;flex-shrink:0}.chat{display:flex;flex-direction:column;padding:10px 12px;gap:8px;min-height:0}.chatlog{flex:1;overflow-y:auto;font-size:16px;line-height:1.5;padding-right:6px;user-select:text}.chatlog .line.sys{color:#9a8db0;font-size:14px}.chat-form{display:flex;gap:8px}.chat-form .btn{white-space:nowrap}.chat-form .inp{padding:7px 12px;font-size:16px}.game-wrap{position:relative;display:flex;gap:16px;align-items:center}.board-frame{position:relative;padding:8px;border-radius:22px;background:linear-gradient(#ffd56b,#ffb13b);box-shadow:0 0 0 4px #fff,0 14px 40px #00000059}.theme-ice .board-frame{background:linear-gradient(#9fe0ff,#5cb6f0)}.theme-toy .board-frame{background:linear-gradient(#ffa8c8,#ff7aa8)}.theme-candy .board-frame{background:linear-gradient(#ffc2dc,#ff8cbc)}.theme-beach .board-frame{background:linear-gradient(#7fd8f2,#3fb2d9)}.theme-pool .board-frame{background:linear-gradient(#8fdcff,#4aa8f0)}.map-card .ev-tag{justify-self:start;font-style:normal;font-size:10px;padding:0 6px;border-radius:999px;background:linear-gradient(90deg,#ff7aa8,#ffb321);color:#fff}.map-card.event:not(.on){border-color:#ffd9a8;background:#fffaf0}#modes{flex-wrap:wrap}#modes .seg-btn.shuffle{flex-basis:100%;margin-top:4px;background:#fff7d6;color:#9a6a00}#modes .seg-btn.shuffle:disabled{opacity:.5}#cv{display:block;border-radius:14px}.hud{width:250px;padding:14px;display:flex;flex-direction:column;gap:10px}.hud-top{display:flex;align-items:center;justify-content:space-between}.map-name{font-size:17px;display:flex;flex-direction:column}.map-name small{font-size:13px;color:#9a8db0}.timer{font-size:32px;background:#2b4fa8;color:#fff;padding:2px 12px;border-radius:12px;min-width:92px;text-align:center}.timer.hurry{background:#ff4f6d;animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.06)}}.plist{display:flex;flex-direction:column;gap:6px}.pl{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:4px 8px 4px 4px;border-left:7px solid var(--tc);position:relative}.pl.me{background:#fffbe0}.pl img{width:32px;height:32px;object-fit:contain}.pl-name{flex:1;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl-name .ping{display:block;font-size:11px;color:#2fa866;line-height:1}.pl-name .ping.bad{color:#ff6f6f}.pl.dead{opacity:.5;filter:grayscale(1)}.st{font-size:12px;padding:2px 6px;border-radius:8px;color:#fff}.st.trap{background:#3fa4ff;animation:pulse .3s infinite alternate}.st.dead{background:#8d8699}.kills{font-size:13px;color:#9a8db0}.mystats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.stat{background:#f4f0fb;border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:4px 0}.stat img{width:28px;height:28px;object-fit:contain}.stat b{font-weight:400;font-size:16px}.hud-keys{font-size:14px;color:#6f6385;display:flex;flex-direction:column;gap:3px}kbd{font-family:inherit;background:#fff;border:2px solid #ddd3ea;border-bottom-width:4px;border-radius:6px;padding:0 5px;font-size:12px}.hud-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}.feed{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.feed-line{background:#1e1e3cb8;color:#fff;padding:4px 14px;border-radius:999px;font-size:15px;animation:feedIn .25s ease-out;white-space:nowrap}.feed-line b{color:#ffe04d;font-weight:400}@keyframes feedIn{0%{opacity:0;transform:translateY(-8px)}}.result{position:absolute;inset:8px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#141e4673;animation:fadeIn .3s}.result.hidden{display:none}@keyframes fadeIn{0%{opacity:0}}.result-card{background:#fff;border-radius:26px;padding:22px 40px;text-align:center;box-shadow:0 16px 40px #0000004d;animation:popIn .45s cubic-bezier(.2,1.6,.4,1)}@keyframes popIn{0%{transform:scale(.3);opacity:0}}.result-title{font-size:64px;-webkit-text-stroke:7px #2b4fa8;paint-order:stroke fill;color:#ffe04d;text-shadow:0 5px 0 #2b4fa8}.result.lose .result-title{color:#c9d4ea;-webkit-text-stroke-color:#5a6378;text-shadow:0 5px 0 #5a6378}.result.draw .result-title{color:#bfe6ff}.winners{display:flex;gap:14px;justify-content:center;margin-top:8px}.winner{display:flex;flex-direction:column;align-items:center;font-size:18px}.winner img{height:90px;animation:cheer .45s ease-in-out infinite alternate}.result-sub{font-size:20px;color:#ff6f9c;margin-top:4px}.result-foot{font-size:14px;color:#9a8db0;margin-top:10px}.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,30px);background:#281e46e6;color:#fff;padding:10px 20px;border-radius:999px;font-size:17px;opacity:0;transition:.25s;pointer-events:none;z-index:99}.toast.show{opacity:1;transform:translate(-50%)}.lobby-wrap{position:relative;width:min(1180px,96vw);height:min(820px,96vh);display:grid;grid-template-rows:auto 1fr 150px;gap:12px}.lobby-head{display:flex;align-items:center;gap:12px;padding:8px 14px}.mini-logo{font-size:24px;color:#7fd8ff;-webkit-text-stroke:5px #2b4fa8;paint-order:stroke fill;white-space:nowrap}.mini-logo b{font-weight:400;color:#ffe04d}.lstatus{display:flex;align-items:center;gap:6px;font-size:14px;color:#9a8db0;background:#f4f0fb;padding:4px 10px;border-radius:999px;white-space:nowrap}.lstatus i{width:9px;height:9px;border-radius:50%;background:#ffb020;animation:pulse .6s infinite alternate}.lstatus.on{color:#2a8a4f;background:#e6f8ec}.lstatus.on i{background:#2fc265;animation:none}.me-box{display:flex;align-items:center;gap:8px;background:#fff7fb;border:3px solid #ffe0ec;border-radius:16px;padding:3px 8px}.me-box>img{width:40px;height:40px;object-fit:contain}.me-nick{display:flex;flex-direction:column}.me-nick small{font-size:11px;color:#b39bc4}.nick-inp{width:116px;padding:2px 8px;font-size:17px;border-width:2px;border-radius:10px}.mini-chars.inline{display:flex;gap:4px}.mini-chars.inline{gap:3px}.mini-chars.inline .mini-char{width:34px;padding:1px;border-width:2px;border-radius:9px}.mini-chars.inline .mini-char img{height:28px}.lobby-main{display:grid;grid-template-columns:1fr 300px;gap:12px;min-height:0}.room-list-panel{display:flex;flex-direction:column;padding:12px;min-height:0}.rl-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.rl-title{font-size:21px}.rl-title span{font-size:16px;color:#9a8db0}.room-list{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;align-content:start;padding:2px 4px 6px 2px}.rl-empty{grid-column:1 / -1;text-align:center;color:#9a8db0;font-size:18px;line-height:1.6;padding:70px 0}.room-card{display:flex;gap:10px;text-align:left;background:#fff;border:3px solid #eee6f7;border-radius:18px;padding:8px;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s;box-shadow:0 4px #e6def0}.room-card:hover:not(:disabled){transform:translateY(-3px);border-color:var(--pink);box-shadow:0 7px #ffd0e0}.room-card.closed{opacity:.6;cursor:default}.rc-map{width:66px;height:57px;border-radius:10px;image-rendering:pixelated;flex-shrink:0}.rc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.rc-top{display:flex;align-items:center;gap:5px}.rc-code{font-size:13px;background:#2b4fa8;color:#ffe04d;padding:0 7px;border-radius:6px;letter-spacing:2px}.rs,.rc-mode{font-size:12px;padding:1px 7px;border-radius:999px;color:#fff}.rs.open{background:#2fc265}.rs.playing{background:#ff6f9c}.rs.full{background:#9a93a8}.rc-mode{background:#4aa3ff;margin-left:auto}.rc-mode.team{background:#ff8a3d}.rc-title{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc-meta{font-size:12px;color:#9a8db0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc-count{display:flex;align-items:center;gap:3px}.rc-count i{width:10px;height:10px;border-radius:50%;background:#e9e2f2}.rc-count i.on{background:radial-gradient(circle at 35% 30%,#fff 0 15%,#6cc9ff 40%,#2e9bf0)}.rc-count b{font-weight:400;font-size:13px;margin-left:4px;color:#6f6385}.lobby-side{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto}.create-box{display:flex;flex-direction:column;gap:4px}.create-box .inp{padding:7px 12px;font-size:17px}.create-box .btn{margin-top:8px}.box-title.mt{margin-top:6px;margin-bottom:2px}.room-name{font-size:18px;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#281e4659;z-index:50}.busy.hidden{display:none}.busy-card{background:#fff;border-radius:22px;padding:22px 34px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:18px;box-shadow:var(--shadow)}.spinner{width:42px;height:50px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 35% 30%,#fff 0 10%,#8fd6ff 30%,#2e9bf0 90%);animation:wobble .5s ease-in-out infinite alternate}@keyframes wobble{0%{transform:scale(1.08,.92)}to{transform:scale(.92,1.08) translateY(-6px)}}.curse-box{grid-column:1 / -1;display:flex;align-items:center;gap:6px;background:#f3e6ff;color:#7a2fc0;border-radius:10px;padding:3px 8px;font-size:14px;animation:pulse .4s infinite alternate}.curse-box img{width:24px}.curse-box b{font-weight:400;margin-left:auto}@media(max-width:900px){.lobby-wrap{height:auto;max-height:96vh;overflow-y:auto;grid-template-rows:auto auto 160px}.lobby-head{flex-wrap:wrap}.lobby-main{grid-template-columns:1fr}.room-list{max-height:50vh}}.touch{display:none}@media(pointer:coarse){.touch{display:flex;position:fixed;left:0;right:0;bottom:16px;justify-content:space-between;padding:0 20px;pointer-events:none}.touch button{pointer-events:auto;border:0;background:#fffc;border-radius:50%;font-size:22px;box-shadow:0 4px #0003;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px)}.dpad [data-d="1"]{grid-area:1 / 2}.dpad [data-d="2"]{grid-area:2 / 1}.dpad [data-d="3"]{grid-area:2 / 3}.dpad [data-d="0"]{grid-area:3 / 2}.acts{display:flex;align-items:flex-end;gap:14px}.acts [data-a=bomb]{width:84px;height:84px;font-size:36px}.acts [data-a=use]{width:62px;height:62px;font-size:14px}}@media(max-width:900px){.game-wrap{flex-direction:column;gap:8px}.hud{width:min(96vw,720px);flex-direction:row;flex-wrap:wrap;padding:8px}.hud-keys,.hud .box-title{display:none}.plist{flex-direction:row;flex-wrap:wrap}.room-wrap{height:auto;max-height:96vh;overflow-y:auto;grid-template-rows:auto auto 160px}.room-main{grid-template-columns:1fr}.slots{grid-template-columns:repeat(2,1fr);grid-template-rows:none}.slot{min-height:200px}.logo .l1{font-size:48px}.logo .l2{font-size:60px}}.hub{position:fixed;inset:0;overflow:auto;background:linear-gradient(180deg,#bfe6ff,#ffe3f1 62%,#fff4d6);display:flex;flex-direction:column;align-items:center;padding:26px 18px 18px;gap:18px}.hub-sky,.hub-float{position:fixed;inset:0;pointer-events:none;overflow:hidden}.hub-sky i{position:absolute;background:#fff;border-radius:999px;opacity:.85;filter:blur(.3px);animation:hubCloud 60s linear infinite}.hub-sky i:before,.hub-sky i:after{content:"";position:absolute;background:#fff;border-radius:50%}.hub-sky .c1{width:160px;height:46px;top:12%;left:-10%}.hub-sky .c1:before{width:70px;height:70px;left:24px;top:-34px}.hub-sky .c1:after{width:52px;height:52px;left:82px;top:-22px}.hub-sky .c2{width:120px;height:36px;top:30%;left:40%;animation-duration:80s;animation-delay:-30s}.hub-sky .c2:before{width:54px;height:54px;left:18px;top:-26px}.hub-sky .c2:after{width:40px;height:40px;left:62px;top:-16px}.hub-sky .c3{width:200px;height:54px;top:64%;left:70%;animation-duration:95s;animation-delay:-60s;opacity:.6}.hub-sky .c3:before{width:86px;height:86px;left:30px;top:-42px}.hub-sky .c3:after{width:60px;height:60px;left:104px;top:-26px}@keyframes hubCloud{0%{transform:translate(-30vw)}to{transform:translate(130vw)}}.hub-float i{position:absolute;left:var(--x);bottom:-60px;font-size:30px;font-style:normal;opacity:.75;animation:hubUp var(--t) linear infinite;animation-delay:var(--dl)}@keyframes hubUp{to{transform:translateY(-120vh) rotate(20deg)}}.hub-head{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.hub-logo{line-height:.9;transform:rotate(-3deg);animation:hubBob 3s ease-in-out infinite}.hub-logo span{display:block;-webkit-text-stroke:9px #4a2f7a;paint-order:stroke fill;text-shadow:0 7px 0 #4a2f7a,0 12px 18px rgba(0,0,0,.2)}.hub-logo .l1{font-size:56px;color:#ff9ccb}.hub-logo .l2{font-size:78px;color:#ffe066;margin-top:-4px}@keyframes hubBob{50%{transform:rotate(-1deg) translateY(-6px)}}.hub-tag{margin:6px 0 0;background:#fffc;padding:6px 16px;border-radius:999px;font-size:17px;color:#6a4f9a}.hub-mute{position:fixed;right:18px;top:18px;width:46px;height:46px;border:0;border-radius:16px;background:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px #d8cfe6;z-index:2}.hub-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,360px));justify-content:center;gap:20px;width:min(1180px,100%)}.hub-card{background:#fff;border-radius:28px;border:4px solid #fff;box-shadow:0 14px 34px #50328233;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;animation:hubIn .5s ease-out backwards;animation-delay:var(--d)}.hub-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 22px 40px color-mix(in srgb,var(--ac) 40%,transparent)}.hub-card.soon{cursor:default;opacity:.85}.hub-card.soon:hover{transform:none}@keyframes hubIn{0%{transform:translateY(24px) scale(.96);opacity:0}}.hub-art{position:relative;height:190px;overflow:hidden;background:color-mix(in srgb,var(--ac) 25%,white)}.hub-art img.full{width:100%;height:100%;object-fit:cover;transition:transform .4s}.hub-card:hover .hub-art img.full{transform:scale(1.05)}.hub-art .chars{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center}.hub-art .chars img{height:112px;margin:0 -10px;filter:drop-shadow(0 5px 3px rgba(0,0,0,.25));animation:hubHop .7s ease-in-out infinite alternate}.hub-art .chars img:nth-child(2){animation-delay:.2s}.hub-art .chars img:nth-child(3){animation-delay:.4s}.hub-art .chars img:nth-child(4){animation-delay:.1s}@keyframes hubHop{to{transform:translateY(-8px)}}.hub-art .q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:84px;background:repeating-linear-gradient(45deg,#f4eefc 0 18px,#fbf8ff 18px 36px)}.kart-art{position:absolute;inset:0;background:linear-gradient(#ffe7a8 0 45%,#9fdc7a 45% 100%);overflow:hidden}.kart-art .road{position:absolute;left:-10%;right:-10%;top:58%;height:64px;background:#7d7591;transform:rotate(-6deg);border-top:6px solid #fff;border-bottom:6px solid #fff}.kart-art .road:after{content:"";position:absolute;left:0;right:0;top:26px;height:6px;background:repeating-linear-gradient(90deg,#ffe066 0 34px,transparent 34px 68px);animation:kartRoad .5s linear infinite}@keyframes kartRoad{to{background-position:-68px 0}}.kart-art span{position:absolute;font-size:44px}.kart-art .car{left:38%;top:38%;font-size:76px;transform:scaleX(-1);animation:hubHop .35s ease-in-out infinite alternate}.kart-art .puff{left:20%;top:52%;opacity:.8;animation:kartPuff .6s ease-out infinite}@keyframes kartPuff{to{transform:translate(-30px) scale(1.4);opacity:0}}.kart-art .b1{left:12%;top:8%;animation:hubHop 1.2s ease-in-out infinite alternate}.kart-art .b2{right:10%;top:12%;font-size:52px;animation:hubWiggle 1.4s ease-in-out infinite}.hub-badge{position:absolute;left:12px;top:12px;background:#ff6fa8;color:#fff;padding:4px 12px;border-radius:999px;font-size:15px;box-shadow:0 3px #d94d86;animation:hubWiggle 1.6s ease-in-out infinite}@keyframes hubWiggle{50%{transform:rotate(-6deg) scale(1.06)}}.hub-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}.hub-body h2{margin:0;font-weight:400;font-size:27px;color:#3b2f4a}.hub-sub{margin:0;color:var(--ac);font-size:16px;filter:brightness(.8)}.hub-tags{display:flex;gap:6px;flex-wrap:wrap}.hub-tags span{background:color-mix(in srgb,var(--ac) 18%,white);color:#5a4a6e;border-radius:999px;padding:3px 10px;font-size:13px}.hub-desc{margin:2px 0 6px;color:#6a5a7e;font-size:15px;line-height:1.45;flex:1}.hub-play{border:0;cursor:pointer;font-family:inherit;font-size:21px;color:#fff;border-radius:16px;padding:11px 0;background:linear-gradient(color-mix(in srgb,var(--ac) 75%,white),var(--ac));box-shadow:0 5px color-mix(in srgb,var(--ac) 70%,#3b2f4a);transition:transform .08s}.hub-play:hover{transform:translateY(-1px)}.hub-play:active{transform:translateY(3px);box-shadow:0 2px color-mix(in srgb,var(--ac) 70%,#3b2f4a)}.hub-play:disabled{background:#d6cfe2;box-shadow:0 5px #b8b0c8;cursor:default}.hub-foot{position:relative;color:#8a7a9e;font-size:14px;background:#fff9;padding:5px 14px;border-radius:999px}.hub-loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:linear-gradient(#e9dcff,#ffe3f1);font-size:22px;color:#4a2f7a}.hub-loading i{font-size:54px;font-style:normal;animation:hubHop .5s ease-in-out infinite alternate}.corner-left{position:absolute;left:18px;top:18px}@media(max-width:600px){.hub{padding-top:18px}.hub-logo .l1{font-size:40px}.hub-logo .l2{font-size:56px}.hub-art{height:160px}}.hub-me{display:flex;align-items:center;gap:8px;margin-top:10px;background:#fff;padding:8px 10px 8px 16px;border-radius:999px;box-shadow:0 6px 18px #50328226;flex-wrap:wrap;justify-content:center}.hub-me label{color:#6a4f9a;font-size:15px}.hub-me input{width:170px;border:3px solid #eadff7;border-radius:999px;padding:6px 14px;font:inherit;font-size:17px;outline:none;color:#4a2f7a}.hub-me input:focus{border-color:#ff9ccb}.hub-me.empty input{border-color:#ffb3d1;animation:hubNudge 1.6s ease-in-out infinite}@keyframes hubNudge{50%{box-shadow:0 0 0 5px #ff9ccb59}}.hub-nick-save{border:0;border-radius:999px;padding:7px 16px;font:inherit;font-size:16px;color:#fff;background:linear-gradient(#ff9ccb,#ff6fa8);box-shadow:0 3px #d94f8a;cursor:pointer}.hub-nick-save:active{transform:translateY(2px);box-shadow:0 1px #d94f8a}.hub-nick-msg{font-size:14px;color:#2e9a5c;min-width:0}.hub-me.empty .hub-nick-msg:empty:after{content:"정하면 모든 게임에서 같은 이름을 써요";color:#b07aa0}.hub-online{margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(900px,94vw)}.hub-online-head{display:flex;align-items:center;gap:8px;background:#ffffffd9;padding:5px 14px;border-radius:999px;color:#5a4a6e;font-size:15px}.hub-online-head b{color:#e0478a;font-weight:400}.hub-online-head .dot{width:10px;height:10px;border-radius:50%;background:#3cc46b;box-shadow:0 0 #3cc46b99;animation:hubPulse 1.8s infinite}@keyframes hubPulse{70%{box-shadow:0 0 0 8px #3cc46b00}}.hub-people{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.hub-person{background:#fff;border-radius:999px;padding:3px 10px;font-size:14px;color:#4a2f7a;box-shadow:0 2px 6px #5032821f;display:inline-flex;gap:6px;align-items:baseline}.hub-person small{color:#8a7a9e;font-size:12px}.hub-person.idle{opacity:.7}.hub-person.more{color:#8a7a9e}.hub-live{position:absolute;right:10px;top:10px;background:#ffffffeb;color:#2e7a4c;padding:3px 10px;border-radius:999px;font-size:13px;box-shadow:0 3px 8px #00000026;display:none}.hub-live.on{display:block}