:root{--green:#174f46;--mint:#bfe59a;--lime:#e8ff87;--sky:#66d8f3;--blue:#1767c8;--orange:#ff8a21;--yellow:#ffd84a;--cream:#fff7df;--purple:#7c4fe0;--ink:#193234}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#092f35;color:var(--ink);font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif}button{font:inherit}button:focus-visible{outline:4px solid #fff;outline-offset:3px}[hidden]{display:none!important}
#gameShell{position:relative;width:100%;height:100%;min-height:560px;overflow:hidden;background:#bce7d9}
.title-screen{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:min(7vw,110px);padding:6vh 7vw;background:linear-gradient(90deg,rgba(10,61,58,.88) 0 43%,rgba(20,88,74,.1) 70%),url("assets/jeongseon-world.png") center/cover no-repeat;color:#fff;isolation:isolate}
.title-screen:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,40,44,.65),transparent 45%),radial-gradient(circle at 76% 44%,rgba(255,255,255,.28),transparent 27%)}
.title-copy{width:min(570px,48vw);filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}.eyebrow{display:inline-block;padding:9px 16px;border:1px solid rgba(255,255,255,.48);border-radius:100px;background:rgba(255,255,255,.14);font-weight:900;font-size:clamp(12px,1.1vw,17px);letter-spacing:.04em}.title-copy h1{margin:22px 0 14px;font-size:clamp(48px,6.6vw,104px);line-height:.91;letter-spacing:-.07em;text-shadow:0 7px 0 rgba(0,0,0,.12)}.title-copy h1 span{font-size:.58em;color:#dfff78;letter-spacing:-.04em}.title-copy p{font-size:clamp(16px,1.55vw,25px);font-weight:800;line-height:1.65;color:#f8ffe8}.main-button{border:0;border-radius:22px;padding:18px 27px;background:linear-gradient(180deg,#ffe06b,#ff9e27);box-shadow:0 8px 0 #bd5614,0 14px 30px rgba(0,0,0,.25),inset 0 2px 0 #fff8b7;color:#5b2c08;font-size:clamp(18px,1.65vw,26px);font-weight:1000;cursor:pointer;transition:.18s transform,.18s filter}.main-button:hover{transform:translateY(-3px);filter:brightness(1.07)}.main-button:active{transform:translateY(5px);box-shadow:0 3px 0 #bd5614}.main-button b{margin-left:12px}.key-guide{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.key-guide span{padding:8px 12px;border-radius:12px;background:rgba(0,0,0,.23);font-weight:800;font-size:13px}.title-character-wrap{position:relative;width:min(38vw,540px);align-self:flex-end;filter:drop-shadow(0 25px 25px rgba(0,0,0,.25))}.title-character{display:block;width:100%;max-height:78vh;object-fit:contain;object-position:center bottom;animation:heroFloat 2.8s ease-in-out infinite}.speech{position:absolute;z-index:2;top:4%;left:-12%;padding:18px 24px;border:5px solid #fff;border-radius:28px;background:#fff;color:var(--green);font-size:clamp(16px,1.45vw,23px);font-weight:1000;line-height:1.3;text-align:center;transform:rotate(-4deg);box-shadow:0 10px 20px rgba(0,0,0,.16)}.speech:after{content:"";position:absolute;right:16px;bottom:-24px;border:15px solid transparent;border-top-color:#fff;transform:rotate(-20deg)}.title-glow{position:absolute;border-radius:50%;background:#faff95;filter:blur(4px);box-shadow:0 0 35px #fff98c;animation:twinkle 1.8s infinite alternate}.title-glow.one{width:12px;height:12px;top:14%;right:9%}.title-glow.two{width:8px;height:8px;top:26%;left:47%;animation-delay:.7s}
#gameWorld{position:absolute;inset:0;display:flex;flex-direction:column;background:#082f35}.hud{position:relative;z-index:20;height:82px;flex:0 0 82px;display:grid;grid-template-columns:1fr minmax(180px,420px) auto auto;align-items:center;gap:22px;padding:10px 22px;background:linear-gradient(180deg,#fffdf1,#f4ecd5);border-bottom:4px solid #c6a861;box-shadow:0 7px 22px rgba(10,47,48,.25)}.hud-brand{display:flex;align-items:center;gap:10px}.mini-logo{display:grid;place-items:center;width:51px;height:51px;border-radius:17px;background:linear-gradient(145deg,#49b96e,#18734f);color:#fff;font-size:25px;box-shadow:0 5px 0 #0e4d3e}.hud-brand div{display:flex;flex-direction:column}.hud-brand small{font-weight:800;color:#6a8177}.hud-brand b{font-size:clamp(15px,1.4vw,22px)}.hud-center{width:100%}.progress-label{display:flex;justify-content:space-between;margin-bottom:5px;font-size:13px;font-weight:900;color:#4a685f}.progress-track,.mini-progress{height:15px;border-radius:20px;background:#d9d8c7;box-shadow:inset 0 2px 4px rgba(0,0,0,.18);overflow:hidden}.progress-track i,.mini-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#42c96e,#ffd42d,#ff8a20);transition:width .45s}.star-counter{display:flex;align-items:center;gap:3px;padding:9px 14px;border-radius:18px;background:#fff;border:3px solid #ffd055;box-shadow:0 4px 0 #e59b22}.star-counter span{color:#ffbd17;font-size:28px;text-shadow:0 2px 0 #c77910}.star-counter b{font-size:27px}.star-counter em{font-style:normal;font-weight:900;color:#8c7965}.sound-button{width:48px;height:48px;border:0;border-radius:15px;background:#e8f2e9;box-shadow:0 4px 0 #b4c7b9;cursor:pointer;font-size:22px}
#world{position:relative;flex:1;min-height:0;background:url("assets/jeongseon-world.png") center/cover no-repeat;overflow:hidden;isolation:isolate}.world-shine{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,46,40,.32),transparent 32%),radial-gradient(circle at 50% 60%,transparent 25%,rgba(0,56,56,.08) 85%)}
.player{position:absolute;z-index:8;left:50%;top:79%;width:clamp(72px,7.4vw,125px);transform:translate(-50%,-78%);transition:filter .2s;pointer-events:none}.player img{display:block;width:100%;filter:drop-shadow(0 8px 4px rgba(0,0,0,.28));animation:runBob .44s ease-in-out infinite alternate}.player.idle img{animation:idleBob 1.4s ease-in-out infinite}.player.face-left img{transform:scaleX(-1)}.player-shadow{position:absolute;z-index:-1;left:21%;right:12%;bottom:0;height:15%;border-radius:50%;background:rgba(13,51,43,.35);filter:blur(4px)}.player-name{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);padding:4px 9px;border-radius:10px;background:#fff;color:#175443;border:2px solid #34a16c;font-size:12px;font-weight:1000;white-space:nowrap}
.portal{position:absolute;z-index:5;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 5px 5px rgba(0,0,0,.42))}.portal-ring{position:relative;display:grid;place-items:center;width:clamp(54px,5vw,78px);height:clamp(54px,5vw,78px);border:5px solid #fff;border-radius:50%;background:linear-gradient(145deg,#fff669,#ff911f);box-shadow:0 0 0 7px rgba(255,216,62,.34),0 0 26px #fff97a;animation:portalPulse 1.15s ease-in-out infinite}.portal-ring:after{content:"";position:absolute;inset:-17px;border:2px dashed rgba(255,255,255,.85);border-radius:50%;animation:spin 6s linear infinite}.portal-ring i{font-style:normal;font-size:clamp(25px,2.5vw,40px)}.portal b{margin-top:8px;padding:5px 10px;border-radius:10px;background:rgba(9,68,60,.9);font-size:clamp(12px,1vw,16px);white-space:nowrap;border:2px solid rgba(255,255,255,.85)}.portal small{margin-top:3px;padding:3px 7px;border-radius:8px;background:#fff;color:#174d42;font-weight:900}.portal.near .portal-ring{background:linear-gradient(145deg,#fff,#8affd2);box-shadow:0 0 0 10px rgba(89,255,195,.5),0 0 42px #fff;transform:scale(1.14)}.portal.complete .portal-ring{background:linear-gradient(145deg,#8ae0a1,#238d59);filter:saturate(.75)}.portal.complete .portal-ring i{font-size:0}.portal.complete .portal-ring i:after{content:"✓";font-size:38px;color:#fff}.portal.complete small:before{content:"완료 · "}.spark{position:absolute;color:#fff685;text-shadow:0 0 12px #fff;animation:twinkle 1.2s infinite alternate}.spark.s1{left:28%;top:30%}.spark.s2{left:61%;top:48%;animation-delay:.6s}.spark.s3{left:82%;top:72%;animation-delay:1s}.near-hint{position:absolute;z-index:12;left:50%;bottom:18px;transform:translateX(-50%);padding:9px 16px;border-radius:14px;background:#fff;color:#144d43;border:3px solid #f8c52e;font-weight:1000;box-shadow:0 6px 0 #b87517}
.guide-bubble{position:absolute;z-index:20;left:18px;bottom:18px;display:flex;align-items:center;width:min(370px,38vw);padding:10px 15px 10px 8px;border:4px solid #fff;border-radius:24px;background:rgba(255,251,229,.96);box-shadow:0 8px 22px rgba(0,0,0,.25)}.guide-bubble img{width:65px;height:65px;object-fit:contain;margin-right:7px}.guide-bubble b{color:#19754f}.guide-bubble p{margin:3px 0 0;font-size:13px;font-weight:800;line-height:1.35}.touch-controls{position:absolute;z-index:22;right:132px;bottom:18px;display:grid;grid-template:repeat(3,50px)/repeat(3,50px);gap:4px}.touch-controls button{border:3px solid #fff;border-radius:15px;background:rgba(15,73,68,.82);box-shadow:0 5px 0 rgba(4,37,37,.7);color:#fff;font-size:20px;font-weight:1000;touch-action:none;user-select:none}.touch-controls button:active,.touch-controls button.pressed{transform:translateY(4px);box-shadow:0 1px 0 #062c2b;background:#2ca674}.touch-controls [data-dir=up]{grid-column:2}.touch-controls [data-dir=left]{grid-row:2;grid-column:1}.touch-controls [data-dir=down]{grid-row:2;grid-column:2}.touch-controls [data-dir=right]{grid-row:2;grid-column:3}.action-button{position:absolute;z-index:22;right:22px;bottom:24px;width:94px;height:94px;border:5px solid #fff;border-radius:50%;background:linear-gradient(145deg,#ffe461,#ff8b18);box-shadow:0 8px 0 #a94d0d,0 12px 20px rgba(0,0,0,.3);color:#62300b;cursor:pointer}.action-button span{display:block;font-size:27px;line-height:.8}.action-button b{font-size:13px}.action-button:disabled{filter:grayscale(.8);opacity:.58}.action-button:not(:disabled){animation:actionPulse 1s infinite}
.mission-modal{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(4,31,38,.76);backdrop-filter:blur(7px)}.mission-card{width:min(900px,96vw);max-height:94vh;overflow:auto;border:7px solid #fff;border-radius:34px;background:linear-gradient(180deg,#fff9e6,#ecf7e9);box-shadow:0 22px 0 rgba(5,37,40,.4),0 28px 70px rgba(0,0,0,.42)}.mission-card>header{position:relative;display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px 90px;text-align:center;background:linear-gradient(135deg,#1b8065,#36b16b);color:#fff;border-radius:25px 25px 0 0;border-bottom:5px solid #0e5b4d}.mission-card header small{font-weight:900;color:#e5ff87}.mission-card h2{margin:2px 0 0;font-size:clamp(24px,3vw,38px);letter-spacing:-.04em}.mission-stars{position:absolute;right:25px;top:30px;color:#ffe25b;font-size:25px;text-shadow:0 3px 0 #9c5b16}.close-button{position:absolute;left:22px;top:21px;width:50px;height:50px;border:3px solid #fff;border-radius:16px;background:#ee765a;color:#fff;font-size:32px;line-height:1;cursor:pointer;box-shadow:0 5px 0 #9d493a}.mission-instruction{padding:13px 20px;background:#fff1b6;text-align:center;font-size:clamp(15px,1.5vw,20px);font-weight:900;color:#674511}.mini-game-area{position:relative;min-height:360px;padding:20px;display:grid;place-items:center;overflow:hidden}.mission-footer{display:flex;align-items:center;gap:18px;padding:14px 24px;background:#e1ecd9;font-weight:1000}.mission-footer>span{min-width:135px}.mini-progress{flex:1;height:17px;background:#bdcdb9}
.click-arena{position:relative;width:min(750px,100%);height:360px;overflow:hidden;border:5px solid #fff;border-radius:28px;background:linear-gradient(#6fdbfa 0 40%,#62bd69 41% 100%);box-shadow:0 8px 0 #2d7956}.click-arena:before{content:"";position:absolute;inset:43% 0 0;background:radial-gradient(ellipse at 20% 30%,#9bea63 0 5%,transparent 6%),radial-gradient(ellipse at 80% 70%,#8add55 0 7%,transparent 8%)}.target-star{position:absolute;display:grid;place-items:center;width:78px;height:78px;border:0;border-radius:50%;background:radial-gradient(circle,#fff9a1,#ffb617 58%,#ef7d13 60%);color:#fff;font-size:47px;text-shadow:0 3px 0 #ce7214;box-shadow:0 0 0 7px rgba(255,255,255,.65),0 8px 0 rgba(115,76,7,.25);cursor:pointer;animation:starPop .35s both,portalPulse .9s infinite}.target-star:active{transform:scale(.8)}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(105px,170px));gap:16px;perspective:900px}.memory-card{position:relative;width:100%;aspect-ratio:1.25;border:0;border-radius:20px;background:transparent;cursor:pointer;transform-style:preserve-3d;transition:transform .45s}.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg)}.memory-card>span{position:absolute;inset:0;display:grid;place-items:center;border:5px solid #fff;border-radius:20px;backface-visibility:hidden;box-shadow:0 7px 0 rgba(23,76,65,.25);font-size:48px}.memory-card .back{background:linear-gradient(145deg,#2f9d70,#126454);color:#f7e35d;font-size:41px}.memory-card .front{background:#fff8da;transform:rotateY(180deg)}.memory-card.matched .front{background:#d8ffc5;box-shadow:0 0 22px #80e967}
.cable-wrap{width:min(760px,100%)}#cableCanvas{display:block;width:100%;height:auto;border:5px solid #fff;border-radius:25px;background:#7eddf5;box-shadow:0 8px 0 #307999;touch-action:none}.cable-help{display:flex;justify-content:center;gap:12px;margin-top:12px}.cable-help button{border:0;border-radius:15px;padding:10px 22px;background:#2973c9;color:#fff;font-weight:1000;box-shadow:0 5px 0 #174a8c;cursor:pointer;touch-action:none}
.rhythm-wrap{width:min(720px,100%);text-align:center}.rhythm-stage{display:flex;justify-content:center;gap:12px;margin-bottom:24px;padding:25px 14px;border-radius:26px;background:linear-gradient(135deg,#261c5c,#703690);box-shadow:0 8px 0 #321c58}.beat-light{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#fff;border:6px solid #a78ad3;color:#38235e;font-size:24px;font-weight:1000;transition:.15s}.beat-light.active{transform:scale(1.15);background:#ffe465;border-color:#fff8bd;box-shadow:0 0 25px #fff37b}.beat-light.correct{background:#94ef9d;border-color:#d9ffcf}.rhythm-message{min-height:30px;font-weight:1000;color:#5b3978}.rhythm-buttons{display:flex;justify-content:center;gap:25px;margin-top:12px}.rhythm-buttons button{width:150px;height:105px;border:6px solid #fff;border-radius:25px;color:#fff;font-size:31px;font-weight:1000;cursor:pointer;transition:.1s;box-shadow:0 9px 0 rgba(53,27,71,.4)}.rhythm-buttons button:first-child{background:linear-gradient(#ff8a51,#e64151)}.rhythm-buttons button:last-child{background:linear-gradient(#7278ff,#7140b5)}.rhythm-buttons button:active,.rhythm-buttons button.hit{transform:translateY(7px);box-shadow:0 2px 0 rgba(53,27,71,.4)}
.reward-panel{text-align:center;animation:rewardIn .5s both}.reward-panel .big-stars{font-size:76px;color:#ffbc1b;text-shadow:0 6px 0 #d17213;animation:portalPulse 1s infinite}.reward-panel h3{margin:5px 0;font-size:34px;color:#185a49}.reward-panel p{font-size:18px;font-weight:800}.reward-panel button{margin-top:15px}.completed-panel{text-align:center}.completed-panel .check{font-size:76px}.completed-panel h3{font-size:30px;color:#197552}.completed-panel p{font-weight:800}.completed-panel button{margin:8px}
.ending-screen{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:linear-gradient(rgba(10,77,67,.55),rgba(6,40,48,.88)),url("assets/jeongseon-world.png") center/cover;color:#fff;text-align:center}.ending-card{position:relative;width:min(590px,92vw);padding:32px 25px;border:7px solid #fff;border-radius:40px;background:linear-gradient(160deg,rgba(25,130,101,.97),rgba(35,71,124,.97));box-shadow:0 24px 0 rgba(3,31,38,.45)}.ending-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);display:grid;place-items:center;width:95px;height:95px;border-radius:50%;background:#ffe057;border:7px solid #fff;font-size:47px;box-shadow:0 7px 0 #cf7719}.ending-card>p{margin:27px 0 4px;color:#dfff82;font-size:20px;font-weight:1000}.ending-card h2{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.15}.ending-card h2 span{color:#ffe36c}.ending-card img{width:190px;height:190px;object-fit:contain;margin:-5px 0 -20px;filter:drop-shadow(0 10px 7px rgba(0,0,0,.25))}.ending-stars{margin:10px 0 22px;color:#ffe159;font-size:27px;letter-spacing:5px}.confetti{position:absolute;font-size:40px;color:#ffe453;animation:confetti 2.2s ease-in infinite}.c1{left:15%;animation-delay:.2s}.c2{left:30%;animation-delay:1s;color:#8ff3d0}.c3{right:13%;animation-delay:.7s}.c4{right:31%;animation-delay:1.5s;color:#ff8f9b}.c5{left:48%;animation-delay:1.9s}.toast{position:absolute;z-index:120;left:50%;top:105px;transform:translate(-50%,-30px);padding:13px 21px;border-radius:18px;background:#173f3b;color:#fff;border:3px solid #fff;font-weight:1000;opacity:0;pointer-events:none;transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}
@keyframes heroFloat{to{transform:translateY(-14px) rotate(1deg)}}@keyframes idleBob{to{transform:translateY(-5px)}}@keyframes runBob{to{transform:translateY(-7px) rotate(2deg)}}@keyframes twinkle{to{transform:scale(1.8);opacity:.45}}@keyframes portalPulse{50%{transform:scale(1.08)}}@keyframes actionPulse{50%{transform:scale(1.07);filter:brightness(1.1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes starPop{from{transform:scale(0) rotate(-120deg)}}@keyframes rewardIn{from{transform:scale(.65) rotate(-3deg);opacity:0}}@keyframes confetti{from{top:-10%;transform:rotate(0)}to{top:110%;transform:rotate(480deg)}}
@media(max-width:760px){#gameShell{min-height:480px}.title-screen{justify-content:flex-start;padding:5vh 7vw;background:linear-gradient(0deg,rgba(7,54,53,.88),rgba(7,54,53,.15)),url("assets/jeongseon-world.png") center/cover}.title-copy{position:relative;z-index:3;width:100%;align-self:flex-start;text-align:center}.title-copy h1{font-size:clamp(48px,13vw,76px);margin-top:15px}.title-copy p{font-size:15px}.key-guide{justify-content:center}.title-character-wrap{position:absolute;right:-2%;bottom:-7%;width:63vw;opacity:.95}.speech{display:none}.hud{height:68px;flex-basis:68px;grid-template-columns:1fr 105px 45px;gap:7px;padding:7px 9px}.hud-center{position:absolute;left:10px;right:10px;bottom:-19px;width:auto}.progress-label{display:none}.progress-track{height:8px}.mini-logo{width:39px;height:39px;border-radius:12px;font-size:19px}.hud-brand small{display:none}.hud-brand b{font-size:13px}.star-counter{padding:6px 8px;border-width:2px}.star-counter span{font-size:22px}.star-counter b{font-size:22px}.sound-button{width:40px;height:40px;font-size:18px}.guide-bubble{left:8px;bottom:9px;width:45vw;padding:5px 8px;border-width:3px;border-radius:17px}.guide-bubble img{width:43px;height:43px}.guide-bubble b{font-size:11px}.guide-bubble p{font-size:10px}.touch-controls{right:auto;left:8px;bottom:80px;grid-template:repeat(3,42px)/repeat(3,42px);gap:2px}.touch-controls button{border-width:2px;font-size:15px;border-radius:12px}.action-button{right:12px;bottom:16px;width:79px;height:79px}.near-hint{bottom:104px;font-size:11px}.portal b{font-size:10px}.portal small{display:none}.portal-ring{width:48px;height:48px;border-width:3px}.portal-ring i{font-size:23px}.mission-modal{padding:7px}.mission-card{border-width:4px;border-radius:25px}.mission-card>header{min-height:75px;padding:10px 65px}.mission-card h2{font-size:23px}.close-button{left:12px;top:12px;width:43px;height:43px}.mission-stars{right:12px;top:24px;font-size:18px}.mini-game-area{min-height:320px;padding:13px}.click-arena{height:310px}.memory-grid{grid-template-columns:repeat(3,minmax(82px,130px));gap:10px}.memory-card>span{font-size:38px}.rhythm-stage{gap:6px}.beat-light{width:48px;height:48px;border-width:4px;font-size:15px}.rhythm-buttons button{width:120px;height:86px}.mission-footer{padding:10px 15px}.mission-footer>span{min-width:100px;font-size:12px}}
@media(max-height:650px) and (min-width:761px){.hud{height:66px;flex-basis:66px}.guide-bubble{bottom:8px}.touch-controls{bottom:8px;grid-template:repeat(3,43px)/repeat(3,43px)}.action-button{bottom:14px;width:82px;height:82px}.mini-game-area{min-height:300px}.click-arena{height:300px}}