@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--blue:#0878bb;--deep:#075184;--sky:#c8edff;--cream:#fff2d2;--paper:#fff8e9;--wood:#9a4d1c;--green:#32964b;--ink:#243548;--muted:#64748b;--gold:#ffbf3f;--line:#ead5ac;--shadow:0 12px 30px rgba(26,71,95,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#dff5ff 0,#f5fbff 320px,#f4f8fa 100%);font-family:'Nunito',sans-serif;color:var(--ink);min-height:100vh}.page-shell{max-width:1180px;margin:auto;padding:0 22px}.topbar{height:82px;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(7,81,132,.13);margin-bottom:26px}.brand-mark{height:48px;width:48px;display:grid;place-items:center;background:#fff;border:3px solid #c2eaff;border-radius:16px;font-size:27px;box-shadow:0 5px 0 #a7d9f1}.topbar strong{display:block;font-family:'Baloo 2',sans-serif;font-size:19px;color:var(--deep);line-height:1.1;letter-spacing:.3px}.topbar small{display:block;font-size:10px;font-weight:900;letter-spacing:1.3px;color:#5e7b8e;margin-top:4px}.top-spacer{flex:1}.mini-pill,.progress-badge{background:white;border:1px solid #c7e7f7;border-radius:999px;padding:9px 15px;font-weight:900;color:var(--deep);box-shadow:0 4px 0 rgba(7,81,132,.08)}main{min-height:540px}.screen{display:none;animation:arrive .35s ease}.screen.active{display:block}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Baloo 2',sans-serif}h2{font-size:clamp(27px,4vw,38px);line-height:1.12;margin-bottom:8px;color:#53321d}p{line-height:1.6}.muted{color:var(--muted)}.hero{min-height:440px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;border:5px solid white;border-radius:28px;background:linear-gradient(125deg,#fff0c8 0%,#ffe0a2 51%,#c4edff 51%,#79d1f3 100%);box-shadow:var(--shadow);position:relative}.hero-copy{position:relative;z-index:2;padding:37px 34px 35px 42px;align-self:center}.eyebrow,.section-kicker{display:inline-block;font-weight:900;letter-spacing:1.3px;font-size:11px;color:#a65b15;background:#fff9e9;border:1px solid #efd29a;border-radius:999px;padding:7px 12px;margin-bottom:10px}.hero h1{font-size:clamp(44px,6vw,72px);line-height:.87;color:#633616;text-shadow:2px 3px 0 #f5c86d;margin:10px 0 14px}.hero h1 span{color:#0878bb;text-shadow:2px 3px 0 #a9e4ff}.ribbon{display:inline-block;background:#075b94;color:white;padding:7px 19px;font-weight:900;letter-spacing:1px;transform:rotate(-2deg);border-radius:6px;box-shadow:0 4px 0 #063f69;margin-bottom:17px}.hero-copy p{max-width:390px;color:#684c2c;font-weight:700;margin-bottom:23px}.btn{font-family:'Nunito',sans-serif;border:0;border-radius:15px;padding:13px 20px;font-size:15px;font-weight:900;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .16s;box-shadow:0 5px 0 rgba(0,0,0,.15);display:inline-flex;align-items:center;justify-content:center;gap:15px;color:white}.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-large{font-size:18px;padding:15px 24px}.btn-wood{background:linear-gradient(#c77a35,#984516);border:2px solid #7c3710;box-shadow:0 5px 0 #6e300d;color:#fff9eb}.btn-blue{background:linear-gradient(#159bdf,#0874b5);box-shadow:0 5px 0 #07558a}.btn-green{background:linear-gradient(#55c86a,#2e9348);box-shadow:0 5px 0 #23743a}.btn-block{width:100%;margin-top:20px}.hero-art{position:relative;min-height:380px;background:linear-gradient(#6fd0f6 0%,#c6f1ff 55%,#88c75d 55%,#418f44 100%);overflow:hidden}.sun{position:absolute;right:15%;top:9%;font-size:38px}.cloud{position:absolute;background:white;border-radius:50px;width:100px;height:30px;opacity:.8}.cloud:before,.cloud:after{content:"";position:absolute;background:white;border-radius:50%;width:42px;height:42px;top:-18px;left:18px}.cloud:after{left:48px;top:-10px;width:34px;height:34px}.cloud-one{left:10%;top:22%}.cloud-two{right:3%;top:38%;transform:scale(.7)}.mountain{position:absolute;bottom:28%;left:-4%;width:110%;height:42%;background:#61a85b;clip-path:polygon(0 100%,20% 18%,32% 65%,52% 0,73% 65%,89% 15%,100% 100%)}.palm{position:absolute;font-size:72px;z-index:2}.palm-left{left:0;top:36%;transform:rotate(-12deg)}.explorer{position:absolute;z-index:3;font-size:130px;bottom:12%;left:21%;filter:drop-shadow(0 9px 2px #276b39);transform:rotate(-4deg)}.treasure{position:absolute;z-index:4;font-size:112px;bottom:9%;right:8%;filter:drop-shadow(0 9px 2px #276b39)}.treasure span{position:absolute;top:-19px;right:3px;font-size:34px}.compass{position:absolute;z-index:5;right:9%;top:8%;font-size:54px;background:#fff3d0;border:4px solid #b97b3e;border-radius:50%;width:74px;height:74px;display:grid;place-items:center;box-shadow:0 5px 0 #82431b}.map-art{position:absolute;z-index:5;bottom:4%;left:6%;font-size:63px;transform:rotate(-10deg)}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0 38px}.feature{background:#fff;border:1px solid #d8eaf4;border-radius:17px;padding:16px;display:grid;grid-template-columns:44px 1fr;column-gap:9px;align-items:center;box-shadow:0 5px 16px rgba(20,83,117,.06)}.feature>span{grid-row:span 2;font-size:28px;background:#edf8ff;border-radius:13px;height:44px;width:44px;display:grid;place-items:center}.feature b{font-size:14px}.feature small{color:var(--muted);font-size:12px}.back-btn{border:0;background:white;border-radius:999px;padding:10px 15px;font-weight:900;color:var(--deep);cursor:pointer;margin-bottom:15px;box-shadow:0 3px 10px #c7e7f5}.parchment{background:linear-gradient(135deg,#fff7df,#ffedc2);border:5px solid #fff;border-radius:26px;padding:clamp(23px,4vw,42px);box-shadow:var(--shadow);position:relative}.parchment:before{content:"";position:absolute;inset:8px;border:1px dashed #e4c58b;border-radius:17px;pointer-events:none}.narrow{max-width:700px;margin:0 auto 35px}.narrow>*{position:relative}.narrow h2{text-align:center}.narrow>.muted{text-align:center;margin-bottom:26px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:22px}.mode-card{position:relative;border:3px solid #d2e8f5;border-radius:20px;padding:24px 17px 22px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;background:linear-gradient(#eaf8ff,#bfe9ff);color:var(--deep);transition:.2s}.mode-card.group{background:linear-gradient(#fff4cb,#ffda83);border-color:#f0cb70;color:#8a4c13}.mode-card.selected{outline:4px solid #38a4e3;transform:translateY(-3px);box-shadow:0 8px 0 #b7dcef}.mode-card.group.selected{outline-color:#efa42b}.mode-emoji{font-size:48px}.mode-card b{font-family:'Baloo 2';font-size:24px}.mode-card small{text-align:center;line-height:1.5;max-width:190px}.select-mark{position:absolute;top:10px;right:12px;display:none;background:#1687c5;color:white;border-radius:50%;width:24px;height:24px;place-items:center}.mode-card.selected .select-mark{display:grid}label{font-weight:900;display:block;margin:18px 0 8px}input{width:100%;border:2px solid #ddc18b;border-radius:12px;padding:14px 15px;font:700 16px 'Nunito';color:var(--ink);background:#fffdf7;outline:none}input:focus{border-color:#1687c5;box-shadow:0 0 0 3px #c8eaff}.rules{margin-top:24px;padding:18px;background:#fff9e9;border:1px solid #ecd39f;border-radius:15px}.rules h3{font-size:20px;margin-bottom:9px;color:#7d471c}.rules ol{padding-left:24px;margin:0}.rules li{padding:4px 0;line-height:1.45}.how-score{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:13px;color:#79521f}.how-score span:first-child{font-size:25px}.form-error{color:#b42318;font-weight:800;margin:10px 0 0}.game-head,.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:10px 0 18px}.game-head h2,.quiz-top h2{margin-bottom:2px}.game-head p,.quiz-top p{margin-bottom:0;color:var(--muted)}.progress-badge{white-space:nowrap}.explore-board{height:clamp(340px,48vw,500px);border:6px solid #fff;border-radius:24px;overflow:hidden;position:relative;background:linear-gradient(#80d5fb 0%,#c6f0ff 43%,#76c85d 43%,#3f984a 100%);box-shadow:var(--shadow)}.forest-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.8),transparent 45%)}.forest-hill{position:absolute;width:70%;height:40%;bottom:0;background:#4b9b43;border-radius:50% 50% 0 0}.hill-a{left:-20%;bottom:-12%}.hill-b{right:-16%;bottom:-8%;background:#36853d}.forest-tree{position:absolute;font-size:clamp(48px,7vw,85px);filter:drop-shadow(0 4px 1px #327c3c)}.tree-a{left:2%;top:10%}.tree-b{right:3%;top:6%}.tree-c{left:12%;bottom:5%}.tree-d{right:13%;bottom:3%}.path{position:absolute;width:43%;height:110%;left:28%;top:20%;background:#e8c38b;clip-path:polygon(35% 0,68% 0,100% 100%,0 100%);opacity:.9}.cabin{position:absolute;right:10%;top:22%;font-size:54px}.map-pin{position:absolute;right:3%;bottom:7%;display:flex;flex-direction:column;align-items:center;font-size:35px;background:#fff8df;padding:8px 11px;border-radius:12px;border:2px solid #d8b66c;z-index:3}.map-pin small{font-size:9px;font-weight:900}.pieces-area{position:absolute;inset:0;z-index:5}.puzzle-token{position:absolute;transform:translate(-50%,-50%);border:0;background:#fff0a8;border-radius:14px;width:clamp(43px,6vw,62px);height:clamp(43px,6vw,62px);font-size:30px;cursor:pointer;box-shadow:0 0 0 4px rgba(255,255,255,.75),0 0 22px #ffe35b;animation:glow 1.8s infinite alternate;transition:.25s}.puzzle-token:hover{transform:translate(-50%,-50%) scale(1.13)}.puzzle-token.found{background:#45b963;color:white;box-shadow:0 0 0 3px #d9ffe2;animation:none;transform:translate(-50%,-50%) scale(.9)}.puzzle-token.found span{font-size:23px}.puzzle-token:disabled{cursor:default}.puzzle-token span{filter:drop-shadow(0 2px 0 #b77a18)}@keyframes glow{to{box-shadow:0 0 0 5px rgba(255,255,255,.7),0 0 28px #ffcc30}}.explorer-small{position:absolute;left:4%;bottom:7%;z-index:4;font-size:62px}.speech{position:absolute;z-index:6;left:13%;top:5%;background:white;border-radius:14px;padding:10px 15px;font-size:13px;font-weight:900;box-shadow:0 4px 0 #d8e5c8}.game-bottom{display:flex;align-items:center;gap:15px;margin:17px 0 35px;flex-wrap:wrap}.progress-track{height:12px;background:#d7e9f2;border-radius:999px;overflow:hidden;flex:1;min-width:100px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#36b85c,#8ad85e);border-radius:999px;transition:width .3s}.game-bottom>span{font-weight:800;font-size:13px;color:var(--muted)}.puzzle-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-bottom:35px}.puzzle-picture,.puzzle-side{background:#fff;border:5px solid #e5c39c;border-radius:20px;padding:15px;box-shadow:var(--shadow)}.puzzle-scene{min-height:280px;border:4px solid #9d5d2c;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(#82d9fa 0 48%,#81bf56 48% 100%);display:flex;align-items:center;justify-content:center;gap:14px}.puzzle-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 24%,rgba(255,255,255,.7) 25%,transparent 26%,transparent 49%,rgba(255,255,255,.7) 50%,transparent 51%,transparent 74%,rgba(255,255,255,.7) 75%,transparent 76%),linear-gradient(0deg,transparent 24%,rgba(255,255,255,.7) 25%,transparent 26%,transparent 49%,rgba(255,255,255,.7) 50%,transparent 51%,transparent 74%,rgba(255,255,255,.7) 75%,transparent 76%);pointer-events:none}.puzzle-kid,.puzzle-chest,.puzzle-palm{font-size:clamp(40px,6vw,70px);z-index:1}.kid-two{transform:scaleX(-1)}.secret-banner{z-index:2;display:flex;flex-direction:column;align-items:center;background:#ffe7a5;border:3px solid #ad6a2b;border-radius:9px;padding:13px 15px;color:#603419;box-shadow:0 5px 0 #a96831;text-align:center;transform:rotate(-2deg)}.secret-banner small{font-weight:900;font-size:9px;letter-spacing:1px}.secret-banner strong{font-family:'Baloo 2';font-size:clamp(14px,2vw,22px);line-height:1.1}.puzzle-caption{text-align:center;font-weight:900;color:#287b42;margin:12px 0 0}.puzzle-side{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#fff8e8;border-color:#ecd7ad}.success-icon{height:57px;width:57px;border-radius:50%;background:#3cab5a;color:white;font-size:37px;font-weight:900;display:grid;place-items:center;box-shadow:0 5px 0 #247d3c}.puzzle-side h3{font-size:27px;margin:14px 0 4px;color:#315e36}.keyword{font-weight:900;color:#87501e;background:#ffedc6;border:1px dashed #d2a45c;border-radius:12px;padding:12px;margin:6px 0;width:100%;font-size:13px}.quiz-card{max-width:800px;margin:0 auto 38px;background:linear-gradient(#fff6df,#ffedc6);border:5px solid white;border-radius:24px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow);position:relative}.quiz-decor{position:absolute;right:25px;top:14px;font-size:35px}.question-number{font-size:11px;font-weight:900;letter-spacing:1.3px;color:#a45c18;margin-bottom:9px}.quiz-card h3{font-family:'Nunito';font-size:clamp(18px,2.5vw,23px);line-height:1.55;color:#53351e;max-width:650px;margin-bottom:23px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-option{border:2px solid #edd7a7;background:#fffaf0;border-radius:15px;padding:13px;display:flex;align-items:center;gap:12px;text-align:left;font:800 15px 'Nunito';color:#493a2a;cursor:pointer;min-height:58px;transition:.16s}.answer-option:hover{border-color:#e2a641;transform:translateY(-1px)}.answer-option.selected{border-color:#1687c5;background:#e5f6ff;box-shadow:0 0 0 2px #c3eaff}.answer-option.correct{border-color:#45a85b;background:#e4f8e8}.answer-option.wrong{border-color:#df6969;background:#fff0ed}.answer-option:disabled{cursor:default}.answer-letter{height:32px;width:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;background:#a85d22;color:white;font-weight:900}.feedback{margin-top:16px;font-weight:800;line-height:1.5;border-radius:12px}.feedback.good,.feedback.try-again{padding:13px 15px}.feedback.good{background:#e3f8e8;color:#216c36}.feedback.try-again{background:#fff0d7;color:#88511c}.quiz-actions{display:flex;justify-content:flex-end;margin-top:18px}.hidden{display:none!important}.result-card{max-width:720px;margin:0 auto 38px;text-align:center;background:linear-gradient(145deg,#fff6d9,#fff);border:5px solid white;border-radius:28px;padding:clamp(25px,5vw,48px);box-shadow:var(--shadow)}.confetti{font-size:22px;letter-spacing:5px}.trophy{font-size:72px;margin:5px 0}.result-card h1{font-size:clamp(32px,5vw,48px);color:#87501e;margin:0 0 5px}.final-score{display:flex;flex-direction:column;align-items:center;margin:18px auto;background:linear-gradient(#fff0bd,#ffdb77);border:3px solid #efbe4f;border-radius:20px;padding:12px;width:190px;box-shadow:0 5px 0 #d6a33b}.final-score strong{font-family:'Baloo 2';font-size:54px;line-height:1;color:#77441b}.final-score span{font-size:11px;font-weight:900;letter-spacing:2px;color:#9c5b20}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.result-stats div{background:#eef8ff;border:1px solid #d4eafa;border-radius:14px;padding:13px 6px}.result-stats strong{display:block;font-size:21px;color:#075b94}.result-stats small{display:block;font-size:11px;font-weight:800;color:#637b8b}.save-message{font-size:13px;font-weight:800;color:#637b8b}.save-message.saved{color:#218143}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}footer{display:flex;justify-content:space-between;gap:12px;padding:23px 2px 30px;color:#6b8796;font-size:12px;font-weight:800}footer span:first-child{color:#075b94}
@media(max-width:760px){.page-shell{padding:0 13px}.topbar{height:70px;margin-bottom:16px}.brand-mark{height:42px;width:42px}.topbar strong{font-size:16px}.topbar small{font-size:8px;letter-spacing:.7px}.mini-pill{padding:7px 10px;font-size:12px}.hero{grid-template-columns:1fr}.hero-copy{padding:28px 24px 24px}.hero-art{min-height:260px}.hero h1{font-size:53px}.hero-copy p{max-width:520px}.feature-row{gap:8px}.feature{padding:11px 8px;grid-template-columns:1fr;text-align:center;justify-items:center;gap:4px}.feature>span{grid-row:auto}.feature b{font-size:12px}.feature small{font-size:10px}.puzzle-layout{grid-template-columns:1fr}.puzzle-scene{min-height:250px}.game-head h2,.quiz-top h2{font-size:28px}.game-head p,.quiz-top p{font-size:13px}.explore-board{height:410px}.speech{left:15%;font-size:11px}.game-bottom{gap:9px}.game-bottom .btn{width:100%}.progress-track{flex-basis:55%}.game-bottom>span{flex:1}.parchment{padding:25px 20px}.rules{padding:14px}.rules li{font-size:13px}}
@media(max-width:440px){.topbar strong{font-size:13px}.topbar small{font-size:7px}.brand-mark{width:36px;height:36px;font-size:22px;border-radius:12px}.mini-pill{font-size:10px;padding:7px 8px}.mode-grid{gap:9px}.mode-card{padding:17px 9px}.mode-card b{font-size:20px}.mode-card small{font-size:11px}.mode-emoji{font-size:38px}.answer-grid{grid-template-columns:1fr}.answer-option{min-height:52px}.quiz-decor{right:14px;top:10px;font-size:26px}.quiz-card h3{padding-right:6px}.result-stats{gap:6px}.result-stats div{padding:11px 3px}.result-stats strong{font-size:18px}.result-stats small{font-size:9px}.result-actions .btn{width:100%}.explore-board{height:370px}.puzzle-token{width:42px;height:42px;font-size:24px}.forest-tree{font-size:48px}footer{font-size:10px}}


/* Revisi puzzle: 12 kepingan yang ditemukan di petualangan menyatu menjadi gambar rahasia. */
.puzzle-board{min-height:320px;aspect-ratio:4/3;position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:7px;border:5px solid #8d4c22;border-radius:13px;overflow:hidden;background:#f0c58c;box-shadow:inset 0 0 0 3px #f9e0b7}
.puzzle-board-placeholder{grid-column:1/-1;grid-row:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(#8ddcff 0 45%,#84c65d 45% 100%);color:#5b351b;text-align:center}
.puzzle-board-placeholder span{font-size:54px}.puzzle-board-placeholder b{font-family:'Baloo 2';font-size:22px}.puzzle-board-placeholder small{font-weight:800}
.puzzle-tile{position:relative;z-index:1;min-width:0;min-height:0;background-image:url('puzzle-scene.jpg');background-repeat:no-repeat;background-size:400% 300%;background-position:calc(var(--col)*33.3333%) calc(var(--row)*50%);border:1px solid rgba(255,255,255,.88);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(101,59,24,.24);animation:tileArrive .42s cubic-bezier(.2,.8,.2,1) both}
.puzzle-tile:after{content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:rgba(255,229,156,.7)}
.puzzle-secret-title{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:min(65%,330px);padding:13px 10px;background:linear-gradient(#ffe7a0,#ffcf65);border:4px solid #a65e2c;border-radius:9px;box-shadow:0 5px 0 #7c3d1b,0 0 0 3px rgba(255,248,217,.85);display:flex;flex-direction:column;align-items:center;text-align:center;color:#5a2c17;animation:signArrive .6s .95s both}
.puzzle-secret-title small{font-size:clamp(7px,1vw,10px);font-weight:1000;letter-spacing:1px;margin-bottom:4px}
.puzzle-secret-title strong{font-family:'Baloo 2';font-size:clamp(15px,2.5vw,25px);line-height:1.05}
@keyframes tileArrive{from{opacity:0;transform:scale(.55) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes signArrive{from{opacity:0;transform:translate(-50%,-40%) rotate(-7deg) scale(.75)}to{opacity:1;transform:translate(-50%,-50%) rotate(-2deg) scale(1)}}
@media(max-width:600px){.puzzle-board{min-height:270px}.puzzle-secret-title{width:72%;padding:9px 6px;border-width:3px}.puzzle-secret-title strong{font-size:clamp(13px,4vw,19px)}.puzzle-board-placeholder b{font-size:18px}}


/* Peta petualangan interaktif: karakter dapat berjalan mencari kepingan satu per satu. */
.walking-player{position:absolute;left:8%;top:82%;z-index:7;transform:translate(-50%,-50%);font-size:clamp(36px,5vw,54px);line-height:1;filter:drop-shadow(0 4px 2px #245d32);transition:left .12s linear,top .12s linear;pointer-events:none;text-align:center}
.walking-player small{display:block;font-size:8px;font-weight:1000;background:#fff8d9;color:#56361e;border:1px solid #d9b46b;border-radius:6px;padding:2px 5px;margin-top:1px;letter-spacing:.5px}
.walking-player.facing-left{transform:translate(-50%,-50%) scaleX(-1)}.walking-player.facing-left small{transform:scaleX(-1)}
.puzzle-token{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;padding:2px}.puzzle-token small{font-size:9px;line-height:1;font-weight:1000;color:#76501d}.puzzle-token.found small{color:#fff}
.mobile-dpad{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 auto 12px;padding:9px 14px;border-radius:18px;background:#e4f4ff;border:2px solid #b4dff6;width:max-content;box-shadow:0 4px 0 #b3d8e8}
.mobile-dpad>div{display:flex;gap:6px}.mobile-dpad button{width:42px;height:38px;border:0;border-radius:10px;background:linear-gradient(#fff,#d5edff);color:#175c88;font-size:18px;font-weight:1000;box-shadow:0 3px 0 #8bbdd9;cursor:pointer;touch-action:manipulation}.mobile-dpad button:active{transform:translateY(2px);box-shadow:0 1px 0 #8bbdd9}
@media(min-width:760px){.mobile-dpad{margin-left:0}}

/* Petualangan puzzle: 15 collectibles, dialog tantangan, dan puzzle drag-and-drop manual */
.explore-board{min-height:580px;height:min(72vh,760px);background:linear-gradient(180deg,#80c9e9 0%,#b7e7a0 25%,#4f9a43 48%,#23653b 100%)}
.explore-board:after{content:none}
.forest-tree{z-index:1;font-size:clamp(70px,10vw,125px)}.pieces-area{z-index:5}.walking-player{z-index:7;transition:left .12s linear,top .12s linear;font-size:clamp(38px,5vw,58px);filter:drop-shadow(0 5px 2px #234)}.puzzle-token{z-index:6}.lesson-token{background:#fff4cc;box-shadow:0 0 0 4px #fff,0 0 26px #80d7ff}.lesson-token span{filter:none}.puzzle-token small{display:block;font-size:10px;font-weight:1000;color:#593313}.challenge-modal{position:fixed;z-index:1000;inset:0;background:rgba(12,34,28,.78);display:grid;place-items:center;padding:16px;overflow-y:auto}.challenge-modal.hidden{display:none}.challenge-card{position:relative;width:min(700px,100%);background:linear-gradient(#fff9e7,#ffedc6);border:5px solid #fff;border-radius:24px;padding:clamp(22px,4vw,38px);box-shadow:0 18px 70px #102b26}.challenge-card h2{font-size:clamp(24px,4vw,34px);margin:5px 35px 12px 0;color:#75451f}.challenge-card>p{font-size:18px;line-height:1.6;color:#493a2a}.modal-close{position:absolute;right:13px;top:13px;border:0;border-radius:50%;width:40px;height:40px;background:#f4dba7;color:#603719;font-size:28px;cursor:pointer}.puzzle-layout{grid-template-columns:1fr}.puzzle-board.manual-board{display:grid;grid-template-columns:repeat(4,minmax(40px,1fr));gap:4px;aspect-ratio:4/3;min-height:250px;padding:8px;background:#b57842;border:5px solid #81461f;border-radius:14px}.puzzle-slot{position:relative;aspect-ratio:1.2;background:rgba(255,246,213,.25);border:2px dashed #ffe4a4;border-radius:7px;display:grid;place-items:center;color:#ffefbd;font-weight:1000;overflow:hidden}.puzzle-slot>span{font-size:12px}.puzzle-slot .manual-tile{width:100%;height:100%;margin:0}.puzzle-tray.manual-tray{display:grid;grid-template-columns:repeat(6,minmax(36px,1fr));gap:8px;margin-top:16px;padding:14px;background:#fff3d5;border:2px solid #e6c48a;border-radius:14px}.manual-tile{aspect-ratio:1.15;display:grid;place-items:center;min-width:0;background-image:url('puzzle-scene.jpg');background-size:400% 300%;background-repeat:no-repeat;border:2px solid #fff;border-radius:8px;box-shadow:0 3px 0 #a96b32;cursor:grab;font-size:0;touch-action:manipulation}.manual-tile:active{cursor:grabbing}.manual-tile.placed{cursor:default;border:0;box-shadow:none}.puzzle-caption{font-weight:900}.game-bottom{position:relative;z-index:8}
@media(max-width:600px){.explore-board{height:62vh;min-height:440px}.puzzle-tray.manual-tray{grid-template-columns:repeat(4,minmax(35px,1fr))}.challenge-card{padding:24px 17px}.challenge-card .answer-grid{grid-template-columns:1fr}}

/* 3D forest exploration mode */
.explore-board.explore-3d{position:relative;isolation:isolate;overflow:hidden;height:min(76vh,780px);min-height:520px;border:5px solid #f5e5bd;border-radius:22px;background:#9edcf0;box-shadow:0 12px 30px rgba(25,67,43,.22)}
#forest3d{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}
.world-hud{position:absolute;z-index:12;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;pointer-events:none}
.world-hud span{background:rgba(20,64,43,.86);border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 13px;border-radius:12px;font-size:11px;font-weight:1000;letter-spacing:.5px;box-shadow:0 4px 12px #173d2b33}
.pieces-area{position:absolute;inset:0;z-index:10;pointer-events:none}
.puzzle-token{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:46px;height:50px;border:2px solid #fff;border-radius:14px;background:linear-gradient(145deg,#fff8ce,#f4c95c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:23px;line-height:1;box-shadow:0 0 0 3px #ffdf76,0 0 22px #fff1a0;animation:tokenGlow 1.8s ease-in-out infinite;cursor:pointer;padding:2px}
.puzzle-token small{font-size:9px;font-weight:1000;color:#4c351b;margin-top:2px}
.puzzle-token.lesson-token{background:linear-gradient(145deg,#fff,#bcefff);box-shadow:0 0 0 3px #a4e7ff,0 0 23px #83e2ff}
@keyframes tokenGlow{0%,100%{filter:brightness(1);box-shadow:0 0 0 2px #ffdf76,0 0 13px #fff1a0}50%{filter:brightness(1.16);box-shadow:0 0 0 4px #fff3b1,0 0 25px #fff5bb}}
.speech{position:absolute;z-index:13;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;background:rgba(255,249,224,.94);color:#4d3822;border:2px solid #fff;border-radius:13px;padding:9px 14px;text-align:center;font-size:12px;font-weight:900;box-shadow:0 4px 14px #173d2b38;pointer-events:none}
/* Fix: keep the instruction as a compact hint, never as a full-screen panel. */
#exploreBoard #searchHint.speech{position:absolute!important;inset:auto auto 16px 50%!important;transform:translateX(-50%)!important;width:max-content!important;height:auto!important;min-height:0!important;max-width:calc(100% - 24px)!important;display:block!important;padding:9px 14px!important;background:rgba(255,249,224,.94)!important;border:2px solid #fff!important;border-radius:13px!important;box-shadow:0 4px 14px #173d2b38!important;z-index:13!important;white-space:normal!important;pointer-events:none!important}
#exploreBoard #searchHint.speech.hidden{display:none!important}
.interaction-hint{display:none;position:absolute;z-index:14;top:70px;left:50%;transform:translateX(-50%);background:#fff5c7;color:#69441a;border:2px solid #fff;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:1000;box-shadow:0 4px 15px #183c2e55;white-space:nowrap;max-width:calc(100% - 20px)}
.interaction-hint.visible{display:block}
.joystick-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0 18px;padding:13px 18px;background:linear-gradient(135deg,#e5f4dc,#e1f4ff);border:2px solid #c7e2c2;border-radius:20px}
.virtual-joystick{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;touch-action:none;user-select:none}
.joystick-ring{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffffff,#b7d9c0 65%,#86b79b);border:3px solid #fff;box-shadow:inset 0 3px 10px #315c3b44,0 5px 0 #94b9a0;display:grid;place-items:center;touch-action:none}
.joystick-knob{height:43px;width:43px;border-radius:50%;background:linear-gradient(145deg,#fff,#9bbfa7);border:2px solid #689c7b;box-shadow:0 3px 7px #234a3444;will-change:transform}
.virtual-joystick>small,.interact-button small{font-size:9px;font-weight:1000;letter-spacing:1px;color:#2d6943}
.control-help{display:flex;flex-direction:column;gap:5px;flex:1;color:#375845;font-size:12px;line-height:1.4}.control-help b{font-size:14px;color:#205c39}
.interact-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 70px;height:70px;border:3px solid #fff;border-radius:19px;background:linear-gradient(#ffdf83,#e6a83e);color:#684317;font-size:26px;font-weight:1000;box-shadow:0 5px 0 #b97d2c;cursor:pointer;touch-action:manipulation}.interact-button:active{transform:translateY(3px);box-shadow:0 2px 0 #b97d2c}
.engine-warning{position:absolute;z-index:20;top:45%;left:10%;right:10%;padding:18px;background:#fff5d8;color:#743f19;border-radius:12px;text-align:center;font-weight:900}
@media(max-width:600px){.explore-board.explore-3d{height:64vh;min-height:450px;border-width:3px}.world-hud{left:8px;right:8px;top:8px}.world-hud span{font-size:9px;padding:7px 9px}.joystick-row{gap:9px;padding:10px 9px}.joystick-ring{width:76px;height:76px}.joystick-knob{width:37px;height:37px}.control-help{font-size:10px}.control-help b{font-size:11px}.interact-button{flex-basis:59px;height:62px;font-size:23px}.speech{font-size:10px;bottom:9px;padding:8px 10px}.interaction-hint{top:57px;font-size:10px}.puzzle-token{width:39px;height:43px;font-size:19px}}

@media(max-width:600px){#exploreBoard #searchHint.speech{inset:auto auto 9px 50%!important;padding:8px 10px!important;font-size:10px!important;max-width:calc(100% - 18px)!important}}

/* Penyempurnaan versi 3D: karakter visual, puzzle dengan kata kunci, dan esai akhir */
.teacher-shortcut{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:#e7f5ff;border:1px solid #b8e2f7;color:#075b94;padding:9px 12px;border-radius:12px;font-size:12px;font-weight:900;white-space:nowrap}
.puzzle-board.puzzle-complete{position:relative;background-image:url('puzzle-scene.jpg');background-size:cover;background-position:center;border-color:#8d4c22}
.puzzle-board.puzzle-complete:after{content:'BAGI  ·  KALI  ·  BALIK PECAHAN KEDUA';position:absolute;left:4%;right:4%;top:39%;padding:clamp(8px,2vw,18px) 6px;text-align:center;background:linear-gradient(135deg,rgba(255,245,202,.97),rgba(255,220,122,.96));border:3px solid #8a4b1d;border-radius:12px;box-shadow:0 5px 0 rgba(70,39,15,.55);color:#593016;font-family:'Baloo 2',sans-serif;font-weight:1000;font-size:clamp(12px,2.5vw,24px);line-height:1.2;pointer-events:none;z-index:5}
.puzzle-board.puzzle-complete .puzzle-slot{background:transparent;border-color:rgba(255,255,255,.2)}
.essay-card label{margin-top:20px}.essay-card textarea{width:100%;resize:vertical;min-height:140px;border:2px solid #e5c78d;border-radius:14px;padding:14px;font:700 15px/1.6 'Nunito',sans-serif;color:#493a2a;background:#fffdf6;outline:none}.essay-card textarea:focus{border-color:#1687c5;box-shadow:0 0 0 3px #c8eaff}.essay-help{font-size:12px;margin:8px 0}.essay-summary{background:#f1f9ff;border:1px solid #d1e8f7;padding:13px;border-radius:12px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
@media(max-width:600px){.teacher-shortcut{font-size:10px;padding:7px 8px}.topbar{gap:7px}.topbar small{letter-spacing:.5px}}

/* Tampilan akhir puzzle: gambar utuh tanpa garis kotak, kata kunci besar dan memenuhi lebar gambar. */
.puzzle-board.manual-board.puzzle-complete{
  display:block!important; position:relative; width:100%; aspect-ratio:4/3; min-height:clamp(320px,55vw,600px);
  padding:0!important; gap:0!important; overflow:hidden; border:5px solid #8d4c22;
  background-image:url('puzzle-scene.jpg')!important; background-size:100% 100%!important; background-position:center!important; background-repeat:no-repeat!important;
  box-shadow:0 10px 26px rgba(61,40,20,.22);
}
.puzzle-board.manual-board.puzzle-complete .puzzle-slot,
.puzzle-board.manual-board.puzzle-complete .puzzle-slot:empty{display:none!important}
.puzzle-board.manual-board.puzzle-complete .manual-tile{display:none!important}
.puzzle-board.manual-board.puzzle-complete:after{
  content:'BAGI  ·  KALI  ·  BALIK PECAHAN KEDUA'; position:absolute; z-index:20;
  left:1.5%; right:1.5%; top:39%; width:auto; transform:none; rotate:0deg;
  padding:clamp(18px,3.5vw,38px) clamp(8px,2vw,24px); text-align:center;
  background:linear-gradient(135deg,rgba(255,246,203,.98),rgba(255,213,99,.98));
  border:4px solid #9a5425; border-radius:14px; box-shadow:0 7px 0 rgba(70,39,15,.5),0 0 0 4px rgba(255,255,255,.72);
  color:#48230f; font-family:'Baloo 2','Nunito',sans-serif; font-weight:1000;
  font-size:clamp(20px,4.4vw,52px); line-height:1.12; letter-spacing:.015em; pointer-events:none;
}
@media(max-width:600px){
 .puzzle-board.manual-board.puzzle-complete{min-height:300px;aspect-ratio:4/3;border-width:3px}
 .puzzle-board.manual-board.puzzle-complete:after{left:2%;right:2%;font-size:clamp(17px,4.5vw,27px);padding:14px 5px;border-width:3px;}
}

/* Keping puzzle dengan siluet tab/lekukan, bukan kotak bersudut tajam. */
.puzzle-board.manual-board{gap:0;padding:12px;background:linear-gradient(145deg,#8a552d,#c18b4d);border-radius:22px;}
.puzzle-slot{border:0;border-radius:0;background:rgba(255,245,210,.18);clip-path:polygon(0 0,34% 0,38% 5%,42% 8%,47% 8%,51% 5%,55% 0,100% 0,100% 34%,95% 38%,92% 42%,92% 47%,95% 51%,100% 55%,100% 100%,66% 100%,62% 95%,58% 92%,53% 92%,49% 95%,45% 100%,0 100%,0 66%,5% 62%,8% 58%,8% 53%,5% 49%,0 45%);}
.manual-tile{border:0;border-radius:0;box-shadow:none;background-size:400% 300%;clip-path:polygon(0 0,34% 0,38% 5%,42% 8%,47% 8%,51% 5%,55% 0,100% 0,100% 34%,95% 38%,92% 42%,92% 47%,95% 51%,100% 55%,100% 100%,66% 100%,62% 95%,58% 92%,53% 92%,49% 95%,45% 100%,0 100%,0 66%,5% 62%,8% 58%,8% 53%,5% 49%,0 45%);filter:drop-shadow(0 3px 2px rgba(75,43,20,.28));}
.manual-tile.placed{clip-path:none;filter:none;}