@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');
:root{--ink:#2c3e33;--muted:#778575;--mint:#e9f3dc;--yellow:#ffd76b;--lime:#cdeab5;--white:#fffdfa;--border:#d9e7cb;--shadow:0 16px 38px rgba(67,97,60,.10)}
*{box-sizing:border-box}html{min-height:100%;background:#eaf3de}body{margin:0;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;background:radial-gradient(ellipse 400px 250px at 8% 4%,#f5f7d9 0%,transparent 100%),radial-gradient(ellipse 550px 350px at 97% 89%,#d6efca 0%,transparent 100%),#eaf3de;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #437d78;outline-offset:3px}.hidden{display:none!important}
.page-shell{width:min(1060px,calc(100% - 44px));margin:0 auto;padding:24px 0 26px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 3px 22px;border-bottom:1px solid #d3e4c5}.identity{display:flex;align-items:center;gap:11px}.mark{display:grid;place-items:center;width:49px;height:49px;border:2px solid #33453b;border-radius:12px;background:#faf7e7;box-shadow:3px 3px 0 #9cba87}.wordmark{display:flex;flex-direction:column;line-height:1}.wordmark .tiny-label{font-size:8px;font-weight:800;letter-spacing:2.2px;color:#7d9174;margin-bottom:4px}.wordmark strong{font:700 31px/.94 'Fredoka',system-ui,sans-serif;letter-spacing:-1px}.wordmark strong span{color:#e8b547}.wordmark-dot{color:#77af9a}.topright{font-size:10px;font-weight:800;letter-spacing:2.2px;color:#6f846f;display:flex;align-items:center;gap:11px}.live-spark{height:9px;width:9px;display:inline-block;border-radius:50%;background:#9ad08c;box-shadow:0 0 0 4px #d5eac8}.topright-flower{font-size:24px;color:#e6c267;margin-left:15px}
.intro-row{display:flex;justify-content:space-between;align-items:center;padding:23px 14px 22px 10px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:900;color:#77a46a;margin-bottom:5px}.intro-row h1{margin:0;font:600 clamp(34px,4.7vw,50px)/1.07 'Fredoka',system-ui,sans-serif;letter-spacing:-1.6px}.intro-row h1 em{font-style:normal;color:#e4ab4a}.intro-row p{font-size:13px;color:#70846f;margin:8px 0 0}.intro-row p strong{color:#4b6651}.intro-sticker{width:97px;height:83px;border:2px dashed #a9c79c;border-radius:49%;transform:rotate(13deg);display:grid;place-items:center;align-content:center;font-weight:900;text-align:center;letter-spacing:1px;color:#648967;font-size:11px;line-height:1.2}.intro-sticker>span:first-child{font-size:25px;color:#e5af49;line-height:.9;margin-bottom:4px}
.game-wrap{background:#fbfcf6;border:2px solid #405c49;border-radius:17px;box-shadow:6px 7px 0 #b9d1a9,0 19px 40px rgba(46,69,46,.11);overflow:hidden}.game-top{height:88px;display:grid;grid-template-columns:1fr 150px 1fr;align-items:stretch;padding:9px 18px;gap:10px}.score-box{display:flex;align-items:center;gap:12px}.score-blue{justify-content:flex-end;text-align:right}.score-avatar{font-size:30px;width:44px;height:44px;border-radius:12px;background:#fff0b6;display:grid;place-items:center;border:1px solid #e4cb84;transform:rotate(-5deg)}.avatar-blue{background:#d4eff0;border-color:#8ab9c0;transform:rotate(5deg);filter:hue-rotate(130deg)}.score-info{display:flex;flex-direction:column;gap:0;min-width:58px}.score-name{font-size:10px;font-weight:900;letter-spacing:1.55px;color:#80917a}.score-value{font:700 36px/.9 'Fredoka',system-ui,sans-serif;color:#455d47}.score-unit{font-size:9px;font-weight:900;letter-spacing:1.6px;color:#9aaa94;margin-top:20px}.timer-wrap{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:2px;border-left:1px dashed #dce7d2;border-right:1px dashed #dce7d2}.clock-label{font-weight:900;font-size:9px;letter-spacing:2px;color:#8c9b86}.clock-main{display:flex;align-items:center;gap:7px;font:600 32px/1 'Fredoka',system-ui,sans-serif}.clock-main small{font-size:16px;color:#e7b952}.clock-main.danger{color:#ca6557}
.game-stage{position:relative;background:#9dce8e;overflow:hidden;border-top:2px solid #5c8f67;border-bottom:2px solid #5c8f67;isolation:isolate}.game-stage canvas{display:block;width:100%;height:auto;aspect-ratio:16 / 9;image-rendering:pixelated;image-rendering:crisp-edges}.stage-corner{position:absolute;color:#dff5c6;font-size:8px;font-weight:900;letter-spacing:2px;text-shadow:1px 1px 0 #548055;z-index:1;pointer-events:none}.stage-corner-top{top:12px;left:15px}.stage-corner-top span{color:#fbee98;font-size:13px}.stage-corner-bottom{bottom:12px;right:13px}.overlay{position:absolute;z-index:3;inset:0;background:rgba(34,60,44,.31);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}.overlay-game{background:rgba(31,54,43,.32)}.panel{width:min(380px,98%);background:rgba(255,253,245,.98);border:2px solid #3a5240;border-radius:14px;box-shadow:6px 6px 0 rgba(34,61,42,.2),inset 0 0 0 4px #f7f7e8;text-align:center;padding:23px 26px 20px;max-height:100%;overflow:auto}.panel-kicker{font-size:9px;font-weight:900;letter-spacing:2px;color:#8da77f}.panel h2{font:700 clamp(28px,3.8vw,40px)/.99 'Fredoka',system-ui,sans-serif;letter-spacing:-1.1px;margin:10px 0 9px}.panel h2 span{color:#e2ac52}.panel p{color:#748274;font-size:12px;line-height:1.5;max-width:285px;margin:0 auto 14px}.panel p b{color:#ba9038}.action-stack{display:grid;gap:8px}.btn{border-radius:8px;min-height:40px;padding:10px 13px;border:2px solid #425f48;font-size:11px;letter-spacing:1.2px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s ease,box-shadow .12s ease}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:#f6cd67;color:#43513b;box-shadow:0 4px 0 #c7a04d}.btn-white{background:#f7fcf1;color:#526853;box-shadow:0 3px 0 #b7cbaa}.btn-quiet{border-color:transparent;background:transparent;color:#779173;min-height:30px;font-size:10px}.text-button{border:0;background:none;font-weight:900;font-size:10px;letter-spacing:1.2px;color:#779375;padding:9px}.text-button:hover{text-decoration:underline}.join-form{display:grid;gap:9px;max-width:270px;margin:auto}.join-form label{font-size:9px;font-weight:900;letter-spacing:1.7px;text-align:left;color:#788d75}.join-form input{background:#f9fcf5;border:2px solid #bed1af;border-radius:8px;padding:10px 12px;text-align:center;letter-spacing:3px;font-weight:900;font-size:19px;color:#455b49;min-width:0}.join-form .btn{margin-top:3px}.join-panel .text-button{margin-top:8px}.invite-code{border:2px dashed #abc99c;background:#f3f9e9;border-radius:10px;padding:10px 12px;margin-bottom:10px;display:grid;gap:3px}.invite-code span{font-size:9px;letter-spacing:1.5px;color:#8ca583;font-weight:900}.invite-code strong{font:700 25px 'Fredoka',system-ui,sans-serif;letter-spacing:3px}.waiting-panel .btn-white{width:100%;margin-bottom:12px}.waiting-message:before{content:'●';font-size:9px;color:#8dc18b;margin-right:7px;animation:pulse 1.2s infinite}.waiting-panel #startBtn{width:100%;margin-bottom:7px}.waiting-panel .text-button{margin-top:4px}.result-crown{font-size:32px;margin-top:6px}.result-scores{font:700 25px 'Fredoka',system-ui,sans-serif;color:#526d55;display:flex;justify-content:center;align-items:center;gap:23px;margin:9px auto 13px}.result-scores small{font-size:14px;color:#aabd9d}.result-panel .btn{width:100%}.countdown-number{font:700 clamp(70px,13vw,130px)/1 'Fredoka',system-ui,sans-serif;color:#fff8d3;text-shadow:6px 7px 0 #446d50,-3px -2px 0 #3d6047;animation:pop .35s ease-out}.toast{position:absolute;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);background:#fff9e2;border:2px solid #506b50;border-radius:6px;color:#4e644e;font-size:11px;padding:9px 14px;font-weight:800;white-space:nowrap;box-shadow:3px 4px 0 #4a76568a;max-width:94%;text-align:center}
.bottom-bar{height:45px;padding:0 19px;display:flex;align-items:center;justify-content:space-between}.room-status{display:flex;align-items:center;gap:9px;font-size:9px;font-weight:900;letter-spacing:1.25px;color:#81957c}.status-light{width:7px;height:7px;background:#b6c5ae;border-radius:50%}.status-light.connected{background:#68bb86;box-shadow:0 0 0 3px #e2f3dc}.sound-button{background:none;border:0;color:#81947e;font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px}.sound-button span{font-size:9px;letter-spacing:1px}.play-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:25px 8px 10px}.guide-block{display:flex;gap:11px;align-items:center}.guide-icon{flex:0 0 31px;width:31px;height:31px;background:#f7f7df;border:1px solid #d7e5ba;border-radius:10px;color:#d5b45a;font-size:19px;display:grid;place-items:center}.guide-block div{display:flex;flex-direction:column;gap:2px}.guide-block strong{font-size:9px;font-weight:900;letter-spacing:1.1px}.guide-block div span{font-size:10px;color:#7c9078}footer{display:flex;justify-content:space-between;margin-top:27px;padding-top:17px;border-top:1px solid #d5e5c8;color:#9aad91;letter-spacing:1.8px;font-size:9px;font-weight:900}.foot-heart{color:#d2ab6b}
.touch-controls{display:none}.touch-key,.dash-button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
@keyframes pulse{50%{opacity:.28}}@keyframes pop{0%{transform:scale(.5);opacity:.4}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@media(max-width:690px){.page-shell{width:calc(100% - 20px);padding-top:10px}.topbar{padding-bottom:13px}.topright{font-size:8px;letter-spacing:.75px;gap:5px}.topright-flower{display:none}.wordmark strong{font-size:27px}.mark{height:42px;width:42px}.intro-row{padding:20px 8px 17px}.intro-row h1{font-size:34px}.intro-row p{font-size:12px;line-height:1.4;max-width:250px}.intro-sticker{height:62px;width:76px;font-size:8px}.intro-sticker>span:first-child{font-size:17px}.game-top{height:64px;grid-template-columns:1fr 88px 1fr;padding:7px;gap:3px}.score-box{gap:5px}.score-avatar{font-size:19px;width:31px;height:31px;border-radius:7px}.score-name{font-size:8px;letter-spacing:.55px}.score-value{font-size:28px}.score-unit{display:none}.timer-wrap{gap:0}.clock-label{font-size:8px;letter-spacing:.7px}.clock-main{font-size:25px;gap:3px}.clock-main small{font-size:11px}.panel{padding:13px 14px 12px;max-width:275px}.panel h2{font-size:27px;margin:5px 0}.panel p{font-size:10px;margin-bottom:8px;line-height:1.38}.panel-kicker{font-size:8px;letter-spacing:1.2px}.btn{font-size:9px;letter-spacing:.55px;min-height:31px;padding:6px 9px;border-width:1px}.action-stack{gap:6px}.btn-quiet{font-size:8px;min-height:20px}.invite-code{padding:5px;margin-bottom:6px}.invite-code strong{font-size:19px}.invite-code span{font-size:8px}.waiting-panel .btn-white{margin-bottom:6px}.text-button{font-size:8px;padding:5px}.result-crown{font-size:22px;margin-top:0}.result-scores{margin:4px auto 6px}.bottom-bar{height:36px;padding:0 10px}.room-status,.sound-button span{font-size:8px;letter-spacing:.4px}.stage-corner{font-size:6px}.play-guide{grid-template-columns:repeat(2,1fr);gap:13px 8px;padding:20px 3px 0}.guide-block{gap:7px}.guide-block strong{font-size:8px}.guide-block div span{font-size:9px}footer{font-size:8px;letter-spacing:.4px;gap:20px}.game-wrap{box-shadow:3px 4px 0 #b9d1a9}}
@media(any-pointer:coarse){.touch-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:500px;margin:19px auto 0;padding:0 10px}.dpad{display:grid;grid-template-columns:45px 45px 45px;grid-template-rows:43px 43px 43px;gap:3px}.touch-key{border:2px solid #80a583;border-radius:9px;background:#f5fae6;color:#4d7458;font-size:18px;box-shadow:0 3px 0 #acc8a2}.touch-key:active,.touch-key.is-pressed{background:#e8d18f;transform:translateY(2px);box-shadow:none}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}.dpad-center{grid-column:2;grid-row:2;display:grid;place-items:center;color:#bdba86;font-size:24px}.dash-button{margin-right:15px;width:98px;height:98px;border:3px solid #be9b5f;border-radius:50%;background:#f8d683;color:#7b5e2e;font-weight:900;letter-spacing:1px;box-shadow:0 6px 0 #d4bd7d;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:0}.dash-button span{font-size:32px}.dash-button:active,.dash-button.is-pressed{transform:translateY(4px);box-shadow:none;background:#eebc59}}
@media(max-width:390px){.intro-sticker{display:none}.intro-row{padding-top:15px}.topright{max-width:110px;line-height:1.6}.panel{max-width:263px;padding:9px 11px}.panel h2{font-size:24px}.game-top{grid-template-columns:1fr 74px 1fr}.score-avatar{display:none}.score-blue .score-info{margin-left:auto}.touch-controls{padding:0}.dash-button{height:78px;width:78px;margin-right:4px}}
@media(max-width:690px){.game-stage{height:300px}.game-stage canvas{height:100%;width:100%;aspect-ratio:auto;object-fit:contain}}