@font-face{font-family:LocalJua;src:url('assets/fonts/Jua-Regular.ttf') format('truetype');font-display:swap}@font-face{font-family:LocalGaegu;src:url('assets/fonts/Gaegu-Regular.ttf') format('truetype');font-display:swap}
:root{font-family:LocalGaegu,system-ui,sans-serif;color:#665644;background:#dce9c8;color-scheme:light;--ink:#665644;--cream:#fffbee;--green:#8ca575;--line:#c3bd99}*{box-sizing:border-box}body{margin:0;min-height:100svh}button,select,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #6b9fa2;outline-offset:4px}[hidden]{display:none!important}.forestScene{position:fixed;inset:0;background:#e0f0ec url('assets/picnic-forest.svg') center bottom/cover no-repeat;pointer-events:none}.shade{position:fixed;inset:0;pointer-events:none;background:#fffdf016}#bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.15;pointer-events:none;display:none}header{position:relative;z-index:5;padding:19px 4vw;display:flex;align-items:center;justify-content:space-between;max-width:1500px;margin:auto}.brand{display:flex;gap:9px;align-items:center;text-decoration:none;color:#6c7454}.brandLeaf{font-size:40px;transform:rotate(-18deg);color:#849e6c}.brand>span:last-child{font-family:LocalJua,sans-serif;font-size:22px;line-height:1.15;letter-spacing:2px}.brand small{font-family:LocalGaegu,sans-serif;display:block;text-align:center;font-size:14px;letter-spacing:2px}.headerRight{display:flex;align-items:center;gap:14px}.connectionPill{font-size:15px;background:#fffbeeeb;border:2px solid #d7d6b5;padding:7px 17px;border-radius:25px;box-shadow:0 3px #aabb8b33}.connectionPill.connected:before{content:'● ';color:#83a76a}#pause{font-family:LocalJua,sans-serif;border:2px solid #c9c1a8;background:#fffaf0;padding:10px 15px;border-radius:25px;box-shadow:0 3px #9c997c25}main{position:relative;max-width:1230px;margin:13px auto 35px;padding:0 35px;display:grid;grid-template-columns:1.06fr 1fr;gap:75px;align-items:start}.intro{position:relative;padding-top:12px}.villageSign{position:relative;text-align:center;max-width:490px;margin:0 auto;background:#fffdf1;border:3px solid #8c9870;border-radius:48% 48% 24% 24% / 29% 29% 17% 17%;padding:31px 16px 25px;box-shadow:0 9px 0 #8e9270,0 12px 0 #fffdf3,0 16px 0 #9aa67b22}.villageSign:before,.villageSign:after{content:'✿';position:absolute;font-size:30px;color:#d4a2a4;top:33px;left:20px;transform:rotate(-15deg)}.villageSign:after{left:auto;right:22px;color:#a6c6ca;transform:rotate(20deg)}.signTop{font-size:17px;letter-spacing:3px;color:#b18c78}h1{margin:12px 0 8px;font-weight:400}.logoLetters{display:flex;justify-content:center;gap:9px}.logoLetters i{font:400 clamp(38px,4vw,54px)/1.3 LocalJua,sans-serif;color:#fffdf2;font-style:normal;display:grid;place-items:center;width:65px;height:70px;border-radius:47% 47% 49% 51%;background:#eab5bd;border:2px solid #c19c95;-webkit-text-stroke:1.2px #6f6250;paint-order:stroke fill;text-shadow:2px 3px #7f705b;transform:rotate(-7deg);box-shadow:inset 0 0 0 4px #ffffff60;background-image:repeating-linear-gradient(90deg,#fff2 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,#fff2 0 6px,transparent 6px 12px)}.logoLetters i:nth-child(2){background-color:#a8cbd7;transform:rotate(5deg);border-color:#8ea9b6}.logoLetters i:nth-child(3){background-color:#ead184;transform:rotate(-5deg);border-color:#bfaf7d}.logoLetters i:nth-child(4){background-color:#c5b0d8;transform:rotate(7deg);border-color:#a99abd}.logoSubtitle{font:24px LocalJua,sans-serif;letter-spacing:5px;display:block;margin-top:13px;color:#71805a}.signBottom{font-size:16px;color:#9e9277}.welcomeFriends{display:flex;justify-content:center;align-items:end;gap:9px;height:185px;position:relative;margin:32px 0 0}.welcomeFriends:before{content:'';position:absolute;bottom:0;width:95%;height:39px;background:#95b27b44;filter:blur(2px);border-radius:50%}.welcomeFriends figure{position:relative;margin:0;text-align:center;width:100px;transition:transform .15s}.welcomeFriends figure:nth-child(2){transform:translateY(-7px) rotate(4deg)}.welcomeFriends figure:nth-child(3){transform:rotate(-4deg)}.welcomeFriends img{height:130px;width:100%;object-fit:contain}.welcomeFriends figure:nth-child(3) img{height:155px}.welcomeFriends figure:nth-child(4) img{height:115px}.welcomeFriends figcaption{display:none}.picnicNote{text-align:center;margin:16px auto 20px}.picnicNote b{font:25px LocalJua,sans-serif;color:#7a8b5c}.picnicNote p{font-size:21px;line-height:1.4;margin:7px 0}.controller{max-width:485px;margin:auto;background:#fffbedec;border:2px dashed #b4bf93;border-radius:23px;padding:17px 18px;box-shadow:0 5px 0 #9bac7b22}.controllerHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.controllerHead b{font:17px LocalJua,sans-serif}.controllerHead span{font-size:14px;color:#9a9375}.padGuide{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 8px}.padGuide>span{display:flex;flex-direction:column;align-items:center;background:#f8e7e9;border:2px solid #e8cdd0;border-radius:15px;padding:7px 2px;font-size:13px;transition:.1s}.padGuide>span:nth-child(2){background:#e3eff1;border-color:#c6dbde}.padGuide>span:nth-child(3){background:#f7efd2;border-color:#e9dcad}.padGuide>span:nth-child(4){background:#eee5f3;border-color:#d8cce3}.padGuide img{height:36px;width:40px;object-fit:contain;margin-bottom:4px}.padGuide small{font-family:LocalJua,sans-serif;opacity:.6;font-size:11px;margin-top:3px}.padGuide .down{background:#d4e6b9!important;transform:translateY(3px);border-color:#7fa064!important;box-shadow:0 0 0 2px #fff9}.controller p{font-size:15px;line-height:1.4;margin:10px 0 5px}.controller #touchFeedback{display:block;font-size:14px;color:#7d925f;text-align:center}.library{position:relative;background:#fffbeeef;border:3px solid #b7b791;border-radius:28px;padding:28px 25px 20px;box-shadow:0 7px 0 #8b9c6c55,0 10px 30px #60764812;margin-top:25px}.library:before{content:'';position:absolute;inset:7px;border:1px dashed #dad4b8;border-radius:20px;pointer-events:none}.paperTab{position:absolute;top:-17px;left:26px;background:#9cb67c;color:#fffdf2;font-family:LocalJua,sans-serif;padding:8px 23px;border-radius:5px 7px 10px 10px;box-shadow:0 3px #6d855348;transform:rotate(-3deg);border:2px solid #f9ffdf}.libraryHeading{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 17px;gap:6px}.libraryHeading h2{font:24px LocalJua,sans-serif;font-weight:400;margin:11px 0 0}.libraryHeading>span{font-size:14px;color:#a09779}.song{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:13px;background:#f9f3e6;border:2px solid #d8cdb4;border-radius:20px;margin-bottom:14px;text-align:left;box-shadow:0 4px 0 #d8cdb44d;transition:.18s}.song:hover{transform:translateY(-2px);background:#fff8e9}.song.selected{background:#fff2e3;border:2px solid #ceac8d;box-shadow:0 4px 0 #ceac8d66}.cover{width:83px;height:91px;flex-shrink:0;border-radius:16px;border:3px solid #fffbee;background-color:#f3e3a0;background-image:repeating-linear-gradient(90deg,#fff5 0 7px,transparent 7px 14px),repeating-linear-gradient(0deg,#fff4 0 7px,transparent 7px 14px);display:grid;place-items:center;transform:rotate(-4deg)}.cover img{width:61px;height:81px;object-fit:contain}.cover.pink{background-color:#e8b8bd;transform:rotate(3deg)}.songInfo h2{font:24px LocalJua,sans-serif;margin:4px 0 3px}.songInfo small{font-size:13px;color:#ac9477}.songInfo p{font-size:15px;margin:0 0 7px}.tag{font-size:12px;background:#fffbeeaa;padding:2px 8px;border-radius:9px;color:#9f9276}.songCheck{margin-left:auto;align-self:start;color:#faf8ef;background:#b8c69c;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-family:LocalJua,sans-serif;opacity:0}.selected .songCheck{opacity:1}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.options label{display:flex;flex-direction:column;gap:6px;font-size:16px;color:#9a8b70}select{font-family:LocalJua,sans-serif;background:#fdf9ed;border:2px solid #ddd4bc;padding:9px 10px;color:#736548;border-radius:13px;font-size:14px;width:100%}.assistRow{display:flex;align-items:center;justify-content:space-between;margin:16px 0;font-size:16px;gap:5px}.autoLabel{display:flex;align-items:center;gap:7px}.autoLabel small{font-size:13px;color:#a69b7e}input[type=checkbox]{accent-color:#96ad77;width:18px;height:18px}.helpTag{font-size:14px;color:#b3947f}.start{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 23px;font:22px LocalJua,sans-serif;background:#ecc66d;color:#fffdf0;border:3px solid #fff9df;border-radius:23px;box-shadow:0 5px 0 #b69456,0 0 0 2px #ceb372;text-shadow:0 2px #b18c4d;transition:.1s}.start:hover{background:#f3ce7e;transform:translateY(-1px)}.start:active{transform:translateY(3px);box-shadow:0 2px 0 #b69456}.hint{text-align:center;font-size:14px;color:#a29376;line-height:1.5;margin:14px 0 4px}details{position:relative;margin-top:13px;border-top:1px dashed #d7cfb6;padding-top:12px;font-size:15px;color:#a18f73}summary{cursor:pointer}details label{display:flex;align-items:center;gap:9px;margin:14px 0}details select{width:190px}details p{font-size:14px;line-height:1.5}input[type=range]{accent-color:#8ca574;max-width:45%}footer{position:relative;display:flex;justify-content:space-between;max-width:1250px;margin:20px auto;padding:0 35px 35px;font-size:14px;color:#859169}footer a{color:#859169;text-decoration:none}
/* A quiet, readable stage, with four clearly separated playing lanes. */
body:has(#game:not([hidden])) #bg{display:block}body:has(#game:not([hidden])) .forestScene{filter:brightness(.8) saturate(.6)}body:has(#game:not([hidden])) .shade{background:linear-gradient(#fff9e9e6 0%,#f4f1dae0 27%,#e0e8c2db 100%)}#game{position:fixed;inset:85px 0 0}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:2}.hud{position:absolute;left:5%;right:5%;top:7px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:20px;z-index:4;pointer-events:none}.scoreCard,.lifeCard{border:2px solid #c7c6a7;background:#fffcf0e8;border-radius:20px;padding:9px 20px;width:fit-content;box-shadow:0 3px #a0ae7c22}.lifeCard{justify-self:end}.hud small{display:block;font-size:15px;color:#9d9478}.hud strong{font:29px LocalJua,sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums}.track{text-align:center;display:flex;flex-direction:column;gap:3px}.track b{font:23px LocalJua,sans-serif}.track>span{font-size:13px;color:#8b9f73}.life{width:150px;height:9px;border-radius:9px;background:#e3dfc9;border:1px solid #cdc9b0;margin-top:6px;overflow:hidden}.life i{height:100%;width:100%;display:block;background:linear-gradient(90deg,#bed492,#94b77a);border-radius:9px}.combo{position:absolute;right:6%;top:24%;display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none;color:#a48e6b}.combo small{font-size:17px}.combo strong{font:55px LocalJua,sans-serif;color:#c2959c;line-height:1}.combo>span{font:11px LocalJua,sans-serif;letter-spacing:2px;margin-top:3px}#judge{position:absolute;left:0;right:0;top:47%;text-align:center;font:26px LocalJua,sans-serif;z-index:3;color:#759871;text-shadow:0 2px #fffbe8,1px 0 #fffbe8,-1px 0 #fffbe8;pointer-events:none}.stageCaption{position:absolute;top:88px;left:0;right:0;text-align:center;font-size:14px;color:#a0977a;pointer-events:none;z-index:3}.cheer{position:absolute;z-index:1;top:31%;width:110px;text-align:center;pointer-events:none}.cheer.left{left:1.8%}.cheer.right{right:1.8%;top:42%}.cheer img{width:92px;max-height:150px;object-fit:contain}.cheer span{display:block;background:#fffaeae8;border:2px solid #c7c8a9;border-radius:18px;font-size:15px;padding:6px;margin-bottom:7px}.cheer.hop{animation:hop .28s ease}@keyframes hop{50%{transform:translateY(-13px) rotate(6deg)}}.trackpadZones{position:absolute;z-index:4;left:12%;width:76%;bottom:8%;height:105px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.padZone{border:2px solid #d9b7bd;background:#f7e6e6e8;border-radius:25px 25px 18px 18px;box-shadow:0 5px #b99e9960;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font:16px LocalJua,sans-serif;touch-action:none;user-select:none;transition:transform .06s,background .06s}.padZone:nth-child(2){border-color:#a6c5cb;background:#e5eff1ee;box-shadow:0 5px #8faeb660}.padZone:nth-child(3){border-color:#d3bd82;background:#faf0d3ee;box-shadow:0 5px #b7a37060}.padZone:nth-child(4){border-color:#c2afd5;background:#f0e8f5ee;box-shadow:0 5px #a493b760}.padZone img{width:44px;height:47px;object-fit:contain;pointer-events:none}.padZone small{font:13px LocalGaegu,sans-serif;opacity:.7}.padZone.down{transform:translateY(4px);background:#e5f1c5;box-shadow:0 1px #8aa66e;outline:3px solid #fff9d9}.padZone.hover{filter:brightness(1.04)}.progress{position:absolute;left:5%;right:5%;bottom:36px;height:5px;background:#c7cfad;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#8dA476}.gamefoot{position:absolute;left:5%;right:5%;bottom:13px;display:flex;justify-content:space-between;font-size:13px;color:#8e9373}#overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#e0e9c4c9;backdrop-filter:blur(7px)}#overlay section{position:relative;width:min(440px,90vw);background:#fffbed;border:3px solid #aeb48c;border-radius:36px;padding:28px 35px 30px;text-align:center;box-shadow:0 8px #8c9f6b66}#overlay section:before{content:'✿';display:block;color:#d8b1b1;font-size:35px}.eyebrow{font-size:15px;color:#a49877;margin:6px}#overlay h2{font:29px LocalJua,sans-serif;font-weight:400;margin:15px 0 18px}#stats{font-size:20px;line-height:1.7;margin-bottom:18px;color:#9b8b6f}.overlayActions{display:flex;gap:12px;margin-top:20px}.overlayActions button{flex:1;padding:10px;border:2px solid #d9d0b5;border-radius:18px;background:#faf4e2;font:16px LocalJua,sans-serif}#nativeStatus{font-size:14px!important;background:#f4f6e6f5!important;color:#829163!important;padding:5px!important;border-top:1px solid #d1d9b8;max-height:32px}body:has(#nativeStatus) footer{padding-bottom:50px}body:has(#nativeStatus) .progress{bottom:52px}body:has(#nativeStatus) .gamefoot{bottom:29px}
@media(min-width:1500px){main{margin-top:35px;gap:100px}.welcomeFriends{height:205px}.villageSign{padding-top:35px;padding-bottom:30px}}
@media(max-width:900px){main{gap:25px;padding:0 20px}.library{padding:25px 18px 18px}.welcomeFriends figure{width:75px}.welcomeFriends img{height:110px}.welcomeFriends figure:nth-child(3) img{height:130px}.welcomeFriends figure:nth-child(4) img{height:100px}.villageSign{padding:26px 12px 22px}.logoLetters{gap:5px}.logoLetters i{width:54px;height:61px;font-size:42px}.libraryHeading h2{font-size:22px}.libraryHeading>span{display:none}.cover{width:65px;height:82px}.song{gap:10px}.songInfo h2{font-size:22px}.songInfo p{font-size:14px}.helpTag{display:none}.options{gap:7px}.options select{font-size:13px}.scoreCard,.lifeCard{padding:7px 12px}.life{width:100px}.trackpadZones{left:5%;width:90%;gap:7px}.cheer{width:75px}.cheer img{width:65px}.combo{right:5%}}
@media(max-width:650px){header{padding:15px 20px}.brand>span:last-child{font-size:18px}.brand small{font-size:12px}.brandLeaf{font-size:30px}.connectionPill{font-size:12px;padding:6px 10px}main{grid-template-columns:1fr;margin-top:5px;gap:20px;max-width:530px}.villageSign{max-width:360px;padding-top:22px;padding-bottom:19px}.signTop{font-size:14px}.signBottom{font-size:14px}.logoSubtitle{font-size:21px;margin-top:11px}.logoLetters i{font-size:42px;width:55px;height:60px}.welcomeFriends{height:130px;margin-top:26px}.welcomeFriends figure{width:73px}.welcomeFriends img{height:96px}.welcomeFriends figure:nth-child(3) img{height:120px}.welcomeFriends figure:nth-child(4) img{height:88px}.picnicNote{margin:13px 0}.picnicNote b{font-size:22px}.picnicNote p{font-size:18px;display:none}.controller{padding:12px 15px}.controllerHead b{font-size:16px}.controller p{font-size:14px}.padGuide{margin-top:10px}.padGuide img{height:29px}.padGuide small{display:none}.library{margin-top:10px}.songInfo h2{font-size:24px}.cover{width:76px;height:83px}.song{gap:15px}.libraryHeading h2{font-size:24px}.helpTag{display:inline;font-size:12px}footer{font-size:11px;padding:10px 20px 35px;gap:10px}.hud{left:3%;right:3%;gap:5px;grid-template-columns:1fr 1fr 1fr}.hud small{font-size:11px}.hud strong{font-size:19px;letter-spacing:0}.scoreCard,.lifeCard{padding:7px 9px;border-radius:15px}.life{width:73px;height:7px}.track b{font-size:16px}.track small{font-size:10px}.track>span{font-size:10px}.stageCaption{top:73px;font-size:12px}#game{top:75px}.combo{top:19%;right:3%}.combo strong{font-size:36px}.combo small{font-size:13px}.cheer{opacity:.75;width:55px}.cheer img{width:50px}.cheer span{font-size:10px;padding:4px}.cheer.left{left:0;top:25%}.cheer.right{right:0;top:38%}.trackpadZones{left:2%;width:96%;height:92px;gap:5px;bottom:10%}.padZone{font-size:12px;border-radius:20px}.padZone img{height:39px;width:36px}.padZone small{font-size:11px}#judge{font-size:23px;top:48%}.gamefoot{font-size:11px}.controllerHead span{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

kbd{font:16px LocalJua,sans-serif;display:inline-grid;place-items:center;min-width:28px;height:26px;background:#fffdf1;border:2px solid #c6bda1;border-radius:7px;box-shadow:0 2px #b1a78c;color:#77644c;margin-top:5px}.padZone img{height:37px}.padZone kbd{height:23px;font-size:15px;margin-top:3px}.padGuide kbd{font-size:13px;min-width:23px;height:22px}.controllerHead{flex-wrap:wrap}.controllerHead b{font-size:16px}.controllerHead span{font-size:13px}.feedbackOptions{display:flex;flex-wrap:wrap;gap:12px}.feedbackOptions label{gap:6px;margin:9px 0}.feedbackOptions small{font-size:12px;color:#a79c80}#judge{top:42%;pointer-events:none;line-height:1.1;min-height:64px}#judge b{display:block;font-size:clamp(30px,4vw,51px);letter-spacing:1px;paint-order:stroke fill;-webkit-text-stroke:4px #fffdf0;text-shadow:0 4px 0 #9f9b7044}#judge small{display:block;font:18px LocalJua,sans-serif;margin-top:9px;color:#6f7659;text-shadow:0 2px #fffdf4,1px 0 #fffdf4,-1px 0 #fffdf4}.verdict.perfect b{color:#c49729}.verdict.great b{color:#69a180}.verdict.good b{color:#6e9eae}.verdict.miss b{color:#be858d}.verdict.miss small{color:#a17b77}.padZone{position:relative}.padZone[data-result]:after{content:attr(data-result);position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:13px LocalJua,sans-serif;color:#fff;background:#8fae6e;padding:5px 12px;border:2px solid #fffdf0;border-radius:15px;white-space:nowrap;box-shadow:0 2px #a2a47e44}.padZone[data-result=MISS]:after{background:#c2979f}.padZone[data-result=PERFECT]:after{background:#c9a248}.padZone.verdictHit{animation:hitSuccess .38s ease-out}.padZone.verdictMiss{animation:hitMiss .3s ease-out}#inputHint{position:absolute;top:55%;left:0;right:0;text-align:center;z-index:3;font:15px LocalGaegu,sans-serif;color:#9e8876;pointer-events:none;text-shadow:0 1px #fff}.padGuide .down kbd{background:#d4e8b8}.padZone.down kbd{background:#d4e8b8;box-shadow:none;transform:translateY(2px)}@keyframes hitSuccess{0%{filter:brightness(1.1);box-shadow:0 0 0 0 #fff3b2}30%{transform:translateY(-4px);filter:brightness(1.15);box-shadow:0 0 0 7px #fff4bdcc,0 0 22px #e6d779}100%{filter:brightness(1);box-shadow:0 5px #b99e9960}}@keyframes hitMiss{25%{transform:translateX(-3px);filter:saturate(.4)}75%{transform:translateX(3px)}}@media(max-width:650px){#judge b{font-size:33px}#judge small{font-size:14px}.padZone img{height:28px}.padZone kbd{height:20px;font-size:12px;min-width:23px}.controllerHead b{font-size:15px}#inputHint{font-size:13px}.padZone[data-result]:after{font-size:11px;padding:4px 7px}}

/* Public browser touch controls */
#canvas,.padZone{touch-action:none;user-select:none;-webkit-user-select:none}

footer{flex-wrap:wrap;align-items:center;line-height:1.6}footer small{font-size:.85em}footer a{overflow-wrap:anywhere}