@import "https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap";:root{color:#283b38;font-synthesis:none;background:#f5f0df;font-family:Noto Sans KR,sans-serif;font-weight:500}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline-offset:4px;outline:3px solid #ef795c}button:not(:disabled){transition:transform .15s,background .15s}button:not(:disabled):active{transform:translateY(3px)}a{color:inherit;text-decoration:none}.shell{max-width:1440px;margin:auto;padding:30px 6% 0}header{border-bottom:1px solid #283b3826;justify-content:space-between;align-items:center;padding-bottom:27px;display:flex}.wordmark{letter-spacing:-1px;align-items:center;gap:15px;font-size:23px;font-weight:900;display:flex}.wordmark span{letter-spacing:-.3px;border-left:1px solid #283b3840;padding-left:15px;font-size:12px;font-weight:600}.pill{border:1px solid #283b3840;border-radius:30px;padding:9px 15px;font-size:12px}.home{grid-template-columns:1.1fr 1fr;gap:8%;padding:52px 0 40px;display:grid}.eyebrow{letter-spacing:1px;align-items:center;gap:8px;font-size:13px;font-weight:800;display:flex}.eyebrow i{background:#ef795c;border-radius:100%;width:8px;height:8px}h1{letter-spacing:-2px;margin:23px 0;font-family:Jua,sans-serif;font-size:clamp(44px,4.5vw,68px);font-weight:400;line-height:1.18}h1 em{color:#df6d52;font-style:normal}.hero>p{color:#71776a;font-size:15px;line-height:1.9}.hero-art{background:radial-gradient(at 50% 80%,#e3e2c7 0,#0000 64%);height:240px;margin-top:10px;position:relative}.hero-art img{filter:drop-shadow(0 12px #283b3805);width:61%;position:absolute;bottom:14px}.hero-one{animation:4s ease-in-out infinite bob;left:-14px;transform:rotate(-9deg)}.hero-two{animation:4s ease-in-out infinite bob2;right:-16px;transform:rotate(8deg)scaleX(-1)}.scribble{color:#798271;font-family:Jua;font-size:16px;position:absolute;top:6px;left:70px;transform:rotate(-7deg)}.star{color:#d8a937;font-size:42px;position:absolute;top:5px;right:12px}.art-caption{text-align:center;color:#828574;width:100%;font-size:11px;position:absolute;bottom:0;left:0}.features{justify-content:center;gap:20px;margin-top:27px;font-size:12px;font-weight:700;display:flex}.join-card{background:#fffdf3;border:1px solid #283b382b;border-radius:22px;align-self:start;padding:28px 30px 22px;box-shadow:0 9px #e4e1d0}.card-kicker{color:#8a8b77;letter-spacing:1.5px;font-size:11px;font-weight:800}h2{letter-spacing:-.6px;margin:9px 0 23px;font-family:Jua,sans-serif;font-size:29px;font-weight:400}label,.choice-label{margin-bottom:8px;font-size:12px;font-weight:800;display:block}input{color:#283b38;background:#f5f2e6;border:1px solid #283b3833;border-radius:9px;width:100%;padding:13px 14px;font-size:13px}input::placeholder{color:#929783}.choice-label{justify-content:space-between;margin:20px 0 8px;display:flex}.choice-label span{color:#8b8e7c;font-size:10px;font-weight:400}.characters{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px;display:grid}.character{background:#f5f2e6;border:2px solid #0000;border-radius:11px;padding:0 3px 9px;position:relative}.character.selected{background:#fce8db;border-color:#df6d52}.character.selected:after{content:"✓";color:#fff;background:#df6d52;border-radius:50%;width:15px;height:15px;font-size:10px;position:absolute;top:5px;right:6px}.character img{object-fit:contain;width:100%;height:64px;display:block}.character b{font-size:12px;display:block}.character span{color:#848875;white-space:nowrap;margin-top:3px;font-size:8px;display:block}.primary,.secondary{border-radius:10px;padding:14px 19px;font-size:13px;font-weight:800}.primary{color:#fffaf0;background:#df7358;border:1px solid #a9503b;justify-content:space-between;align-items:center;gap:25px;display:flex;box-shadow:0 3px #a9503b}.join-card>.primary{width:100%;font-size:15px}.secondary{white-space:nowrap;background:#e3ebda;border:1px solid #b7c4ac}.primary:hover{background:#cf654b}.secondary:hover{background:#d3e1c6}.divider{color:#a0a08c;align-items:center;gap:10px;margin:19px 0 12px;font-size:10px;display:flex}.divider:before,.divider:after{content:"";background:#e7e5d8;flex:1;height:1px}#join{gap:8px;display:flex}#code{text-transform:uppercase;letter-spacing:2px;min-width:0}.join-card>small{text-align:center;color:#8b8e7c;margin-top:13px;font-size:10px;display:block}#error{color:#b55440;overflow-wrap:anywhere;margin:10px 0 0;font-size:12px;line-height:1.5}footer{color:#858876;border-top:1px solid #283b3826;justify-content:space-between;padding:19px 0;font-size:10px;display:flex}.small-button{background:#e7e6d7;border:1px solid #c7cbbb;border-radius:9px;padding:8px 13px;font-size:12px}.lobby{text-align:center;padding:38px 0}.lobby .eyebrow{justify-content:center}.lobby h1{margin:18px 0;font-size:43px}.invite{background:#fffdf3;border:1px dashed #8b9e8f;border-radius:15px;justify-content:center;align-items:center;gap:17px;width:max-content;margin:24px auto;padding:14px 20px;display:flex}.invite>span{color:#7b8475;font-size:12px}.invite strong{letter-spacing:5px;font-size:24px}.lobby-players{grid-template-columns:repeat(6,1fr);gap:12px;margin:30px 0;display:grid}.player-card{background:#fffdf3;border:1px solid #cfd2c0;border-radius:18px;padding:15px 5px 16px}.player-card.ready{background:#e6eedc;border-color:#98b99e}.player-status{color:#73866e;font-size:10px}.player-card img{width:100%;height:116px}.player-card h3{margin:0;font-size:14px}.player-card p{color:#858976;margin:5px 0;font-size:10px}.player-card.empty{background:0 0;border:1px dashed #c3c8b3;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty>span{color:#bdc4af;font-size:45px}.lobby-actions{justify-content:flex-end;align-items:center;gap:12px;display:flex}.lobby-actions p{text-align:left;margin-right:auto;font-size:13px;line-height:1.8}.lobby-actions small{color:#858976;font-size:11px}.game-shell{flex-direction:column;max-width:1600px;height:100dvh;margin:auto;padding:0 22px;display:flex}.game-top{align-items:center;gap:24px;min-height:67px;display:flex}.game-top .wordmark{font-size:18px}#mode{align-items:center;gap:12px;margin:auto;display:flex}.round-label{color:#7f8777;letter-spacing:1px;font-size:10px}#mode b{font-family:Jua;font-size:22px;font-weight:400}.mode-badge{background:#e0e8d6;border-radius:20px;padding:4px 9px;font-size:10px}#clock{font-variant-numeric:tabular-nums;font-size:24px;font-weight:900}#stage-wrap{background:#f8f2df;border:2px solid #283b38;border-radius:15px;flex:1;min-height:0;position:relative;overflow:hidden}#stage{width:100%;height:100%}#stage canvas{touch-action:none;display:block}.game-bottom{justify-content:space-between;align-items:center;gap:20px;min-height:72px;display:flex}#hint{color:#72826f;max-width:300px;font-size:11px}#scores{gap:5px;display:flex}.score{border:1px solid #0000;border-radius:12px;align-items:center;gap:4px;padding:3px 8px 3px 0;font-size:13px;display:flex}.score.me{background:#e7ecd9;border-color:#b6c6a9}.score img{object-fit:cover;width:42px;height:34px}.score b{text-overflow:ellipsis;white-space:nowrap;max-width:70px;font-size:10px;overflow:hidden}.score small{color:#b76648;font-size:9px}#round-overlay.shown{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:30;background:#f7f2dfb8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.round-card{text-align:center;background:#fffdf3;border:2px solid #283b38;border-radius:24px;min-width:350px;max-height:95%;padding:25px 35px;overflow:auto;box-shadow:0 8px #283b3818}.round-card .eyebrow{justify-content:center;font-size:11px}.round-card h2{margin:12px 0;font-size:35px}.round-card p{color:#7c8472;font-size:12px}.countdown{color:#df7358;font-family:Jua;font-size:85px;display:block}.round-card>small{color:#88907c;font-size:10px}.result-list{margin:10px 0}.result-list>div{border-bottom:1px solid #e6e7da;align-items:center;gap:15px;padding:2px 0;display:flex}.result-list img{width:62px;height:44px}.result-list b{font-size:13px}.result-list strong{margin-left:auto}.result-list small{margin-left:4px;font-size:10px}.round-card .primary{width:100%;margin-top:15px}.touch-controls{pointer-events:none;z-index:20;justify-content:space-between;display:none;position:absolute;inset:auto 16px 15px}.touch-controls button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#fff9e5d9;border:2px solid #283b3899;border-radius:18px;width:62px;height:60px;font-size:23px;box-shadow:0 4px #283b3840}.move-buttons,.action-buttons{align-items:flex-end;gap:8px;display:flex}.action-buttons button{width:67px;font-size:9px}.action-buttons b{font-size:25px;display:block}.action-buttons [data-control=jump]{color:#fff;background:#ef795ce0;width:72px;height:72px}.touch-controls button.pressed{box-shadow:none;background:#b6d7b2;transform:translateY(3px)}#connection{z-index:50;color:#fff;background:#283b38;border-radius:12px;padding:12px 20px;font-size:12px;display:none;position:absolute;top:15px;left:50%;transform:translate(-50%)}#connection.visible{display:block}.portrait-notice{display:none}@keyframes bob{50%{transform:translateY(-7px)rotate(-5deg)}}@keyframes bob2{50%{transform:translateY(-9px)rotate(5deg)scaleX(-1)}}@media (pointer:coarse){.touch-controls{display:flex}}@media (max-width:1000px){.shell{padding:22px 4% 0}.home{gap:4%;padding-top:34px}.join-card{padding:22px}.hero-art{height:220px}.features{gap:10px;font-size:10px}.game-bottom{min-height:49px}#hint{font-size:9px}.game-top{min-height:49px}.score b{max-width:40px}.score img{width:28px}.score{gap:2px;padding-right:4px}.lobby-players{gap:7px}.player-card img{height:90px}}@media (max-width:700px){.home{grid-template-columns:1fr;gap:28px}.hero h1{font-size:46px}.hero>p{font-size:13px}.hero-art{max-width:430px;height:220px;margin:auto}.hero .eyebrow{margin-top:0}.features{margin-top:17px}.wordmark{font-size:19px}.wordmark span{display:none}.pill{font-size:9px}.join-card{width:100%;max-width:470px;margin:auto}.character img{height:75px}.character span{font-size:9px}footer{gap:20px;font-size:9px}.lobby-players{grid-template-columns:repeat(3,1fr)}.invite{gap:9px;width:100%;padding:10px}.invite>span{display:none}.invite strong{font-size:20px}.lobby-actions{flex-wrap:wrap;justify-content:center}.lobby-actions p{text-align:center;width:100%}.game-shell{padding:0 5px}.game-top{gap:7px}.game-top .wordmark{font-size:11px}#mode{gap:5px}#mode b{font-size:15px}.round-label{font-size:8px}#clock{font-size:19px}.game-bottom{flex-wrap:wrap;justify-content:center;gap:0;padding:4px}.game-bottom #hint{display:none}#scores{gap:1px}.score b{display:none}.round-card{min-width:280px;padding:18px}.round-card h2{font-size:28px}}@media (max-height:540px) and (orientation:landscape){.game-top{min-height:38px}.game-shell{padding:0 9px}.game-bottom{min-height:33px}.game-bottom #hint{display:none}.game-bottom{justify-content:center}.touch-controls{bottom:10px;left:10px;right:10px}.touch-controls button{border-radius:14px;width:52px;height:47px}.action-buttons button{width:61px;font-size:8px}.action-buttons [data-control=jump]{width:61px;height:58px}.round-card{min-width:340px;padding:14px 24px}.round-card h2{margin:8px 0;font-size:25px}.countdown{font-size:55px}.result-list img{width:40px;height:24px}.round-card .primary{padding:10px}.lobby{padding:15px 0}.lobby h1{font-size:26px}.lobby-players{grid-template-columns:repeat(6,1fr);margin:12px 0}.lobby .eyebrow{display:none}.player-card img{height:60px}.invite{margin:12px auto}.home{padding:20px 0}header{padding-bottom:13px}.hero-art{height:170px}.hero h1{font-size:42px}}@media (max-width:650px) and (orientation:portrait){.game-shell .portrait-notice{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f5f0dff2;flex-direction:column;justify-content:center;align-items:center;gap:20px;font-size:64px;display:flex;position:fixed;inset:0}.portrait-notice b{font-size:20px}.portrait-notice span{font-size:13px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.lobby-character-picker{justify-content:center;gap:8px;margin:12px 0;display:flex}.lobby-character-picker button{background:#eee9d8;border:1px solid #0000;border-radius:10px;align-items:center;gap:3px;padding:3px 9px;font-size:10px;display:flex}.lobby-character-picker button.selected{background:#fae4d8;border-color:#df7358}.lobby-character-picker img{width:40px;height:30px}@media (max-width:700px){.lobby-character-picker{gap:3px}.lobby-character-picker button{padding:3px}.lobby-character-picker img{width:30px}.lobby-character-picker span{font-size:9px}}
