:root{--stage-w:1672;--stage-h:941;--leaf:#315f24;--leaf-light:#76a93b;--cream:#fff0c5;--bamboo:#d9aa3c;--pink:#e986a0;--ink:#315223}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#102b20;font-family:"Trebuchet MS",Arial,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}
button{font:inherit}
[hidden]{display:none!important}
#app,.screen{width:100%;height:100%}
.screen{display:grid;place-items:center;position:relative}
.intro-screen{background:radial-gradient(circle at 50% 45%,#ffe89b 0,#7f5b22 45%,#182e17 100%)}
.cover-frame{position:relative;width:min(100vw,calc(100vh * 1.7787));aspect-ratio:1672/940;overflow:hidden;box-shadow:0 18px 70px #0009}
.cover-image{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cover-hotspot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:36%;outline:none;-webkit-tap-highlight-color:transparent}
.cover-hotspot:focus-visible{box-shadow:0 0 0 6px #fff,0 0 0 12px #ffb82f}
.play-hotspot{left:15.5%;top:45.3%;width:33.5%;height:25%;animation:playPulse 1.8s ease-in-out infinite}
.play-hotspot span{position:absolute;inset:0;display:grid;place-items:center;color:transparent}
.settings-hotspot{left:17%;top:79%;width:8.5%;height:14%}
.sound-hotspot{left:27%;top:79%;width:8.5%;height:14%}
.reward-hotspot{left:37%;top:79%;width:8.5%;height:14%}
@keyframes playPulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 18px #fff8) drop-shadow(0 0 34px #ffd15a)}}
.landscape-note{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:7px 16px;border-radius:999px;background:#132a1dcc;color:#fff;font-size:13px;letter-spacing:.02em;display:none}
.game-screen{background:#102b20}
.game-stage{position:relative;width:min(100vw,calc(100vh * 1.7768));aspect-ratio:1672/941;overflow:hidden;background:#163528;box-shadow:0 12px 55px #0009;isolation:isolate}
.stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.puzzle-canvas{position:absolute;left:5.98%;top:20.72%;width:59.61%;height:59.53%;overflow:visible;z-index:1;pointer-events:none}
.guide-image{position:absolute;inset:0;width:100%;height:100%;opacity:.10;filter:saturate(.75);transition:opacity .25s ease;pointer-events:none}
.guide-image.off{opacity:0}
.piece-layer{position:absolute;inset:0;z-index:6;pointer-events:none}
.puzzle-piece{position:absolute;height:auto;pointer-events:auto;cursor:grab;touch-action:none;filter:drop-shadow(0 7px 7px #0006);transform-origin:top left;transition:left .28s cubic-bezier(.2,.9,.25,1),top .28s cubic-bezier(.2,.9,.25,1),width .28s cubic-bezier(.2,.9,.25,1),filter .2s;will-change:left,top,width;outline:none}
.puzzle-piece:hover{filter:drop-shadow(0 10px 10px #0008) brightness(1.04)}
.puzzle-piece.dragging{cursor:grabbing;z-index:50;transition:width .12s ease,filter .12s ease;filter:drop-shadow(0 18px 15px #0009) brightness(1.04)}
.puzzle-piece.placed{cursor:default;z-index:5;filter:drop-shadow(0 2px 1px #0004);pointer-events:none}
.puzzle-piece.wrong{animation:wrongShake .32s ease}
@keyframes wrongShake{20%{transform:translateX(-8px) rotate(-2deg)}45%{transform:translateX(8px) rotate(2deg)}70%{transform:translateX(-5px)}100%{transform:none}}
.hint-ghost{position:absolute;z-index:4;background-repeat:no-repeat;background-size:100% 100%;opacity:.72;filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #ffe45e);pointer-events:none;animation:hintPulse 1.2s ease-in-out 3}
@keyframes hintPulse{0%,100%{opacity:.25;transform:scale(.98)}50%{opacity:.85;transform:scale(1.035)}}
.stage-button{position:absolute;z-index:12;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,filter .15s ease}
.stage-button img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.stage-button:hover{transform:scale(1.06);filter:brightness(1.05)}
.stage-button:active{transform:scale(.94)}
.stage-button:focus-visible{outline:5px solid #fff;outline-offset:2px}
.home-button{left:1.35%;top:1.2%;width:9.1%;height:14.4%}
.sound-button{right:1.2%;top:1.1%;width:8.8%;height:14.4%}
.back-button{left:1.25%;bottom:1.2%;width:9.2%;height:15.2%}
.restart-button{right:1.1%;bottom:.8%;width:9.3%;height:15.4%}
.hint-button{right:10.4%;bottom:.8%;width:9.5%;height:15.4%}
.hint-count{position:absolute;right:8%;top:1%;display:grid;place-items:center;width:25%;aspect-ratio:1;border-radius:50%;background:#e85f60;color:#fff;font-weight:900;font-size:clamp(8px,1.7vw,28px);box-shadow:0 2px 0 #8e2e35}
.state-badge{position:absolute;right:8%;bottom:10%;width:18%;aspect-ratio:1;border-radius:50%;background:#62a635;border:3px solid #fff;opacity:0;transition:.2s}
.state-badge.off{opacity:1;background:#db514c}
.progress-panel{position:absolute;right:22.8%;bottom:1.1%;width:14.1%;height:14.2%;z-index:11;pointer-events:none}
.progress-panel img{width:100%;height:100%;object-fit:contain;display:block}
.progress-panel strong{position:absolute;left:50%;top:64%;transform:translate(-50%,-50%);color:#315223;font-weight:900;font-size:clamp(10px,2vw,34px);white-space:nowrap;text-shadow:0 1px #fff}
.star-panel{position:absolute;left:22.1%;bottom:5.1%;width:33.3%;height:9%;z-index:13;display:flex;align-items:center;justify-content:space-around;padding:0 10%;pointer-events:none}
.star-panel span{font-size:clamp(18px,4.5vw,74px);line-height:1;color:#8d5b1f;text-shadow:0 3px 0 #542d09,0 0 5px #ffdb4c;opacity:.15;transform:scale(.72);transition:.35s cubic-bezier(.2,1.5,.4,1)}
.star-panel span.on{opacity:1;color:#ffd847;transform:scale(1);text-shadow:0 4px 0 #9b5f0b,0 0 13px #fff2a4}
.toast{position:absolute;z-index:30;left:50%;top:16%;transform:translate(-50%,-12px);padding:10px 22px;border-radius:999px;background:#244f2cee;color:#fff;font-size:clamp(12px,1.5vw,24px);font-weight:800;box-shadow:0 6px 18px #0006;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal,.win-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#0b2117cc;backdrop-filter:blur(9px)}
.modal-card{position:relative;width:min(430px,92vw);padding:34px 30px 28px;border:7px solid #9d7224;border-radius:34px;background:linear-gradient(#fff7d8,#ffe6a6);box-shadow:inset 0 0 0 4px #e7bf58,0 24px 80px #0008;color:var(--ink);text-align:center}
.modal-card h2{font-size:34px;margin:0 0 22px;text-transform:uppercase;text-shadow:0 2px #fff}
.modal-close{position:absolute;right:11px;top:8px;width:40px;height:40px;border:0;border-radius:50%;background:#df6776;color:#fff;font-size:31px;line-height:1;cursor:pointer}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;padding:13px 15px;border-radius:18px;background:#ffffffa8;font-weight:800;text-align:left;cursor:pointer}
.setting-row input{position:absolute;opacity:0}
.setting-row i{position:relative;width:58px;height:32px;border-radius:999px;background:#b6aa83;box-shadow:inset 0 2px 5px #0003;transition:.2s;flex:none}
.setting-row i::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0004;transition:.2s}
.setting-row input:checked+i{background:#65a832}
.setting-row input:checked+i::after{transform:translateX(26px)}
.bamboo-button{border:4px solid #8b671d;border-radius:18px;padding:13px 25px;background:linear-gradient(#7eb743,#3f7f28);box-shadow:inset 0 0 0 3px #bee473,0 5px 0 #5c4013;color:#fff;font-weight:900;font-size:18px;letter-spacing:.03em;cursor:pointer;text-shadow:0 2px #285118}
.bamboo-button:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px #bee473,0 2px 0 #5c4013}
.bamboo-button.secondary{background:linear-gradient(#f8cc69,#d99631);box-shadow:inset 0 0 0 3px #ffe8a8,0 5px 0 #725018;color:#4a3718;text-shadow:0 1px #fff}
.reward-icon{font-size:70px;filter:drop-shadow(0 4px 2px #956d1b)}
.reward-card p{font-size:19px;margin:0 0 24px}
.win-modal{z-index:120;background:#0c2116d9}
.win-card{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);width:min(1100px,94vw);max-height:92vh;overflow:hidden;border:8px solid #d2a63f;border-radius:36px;background:#fff0c5;box-shadow:inset 0 0 0 5px #fff1a3,0 28px 90px #000b}
.win-card>img{width:100%;height:100%;min-height:390px;object-fit:cover}
.win-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 25px;text-align:center;color:#315223;background:radial-gradient(circle at 50% 30%,#fffce9,#ffe49c)}
.win-kicker{font-size:13px;font-weight:900;letter-spacing:.12em;color:#c46a68}
.win-copy h2{font-size:48px;line-height:1;margin:8px 0;color:#467927;text-transform:uppercase;text-shadow:0 3px #fff,0 5px #dcb758}
.win-copy p{font-size:18px;margin:3px 0 10px}
.win-stars{font-size:58px;letter-spacing:7px;color:#ffd139;text-shadow:0 4px #9b5f0b,0 0 10px #fff}
.win-stats{display:flex;gap:9px;margin:8px 0 20px}
.win-stats span{padding:9px 12px;border-radius:14px;background:#fff9e0;box-shadow:0 2px 8px #a97e3038;font-size:13px}
.win-stats strong{display:block;font-size:19px;color:#ad682b}
.win-actions{display:flex;flex-direction:column;gap:11px;width:100%;max-width:260px}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-10%;width:12px;height:22px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--drift),115vh,0) rotate(820deg)}}
.rotate-notice{display:none;position:fixed;inset:0;z-index:200;place-items:center;padding:30px;background:#173b29f2;color:#fff;text-align:center}
.rotate-notice div{display:flex;flex-direction:column;align-items:center;gap:12px}
.rotate-notice span{font-size:70px;animation:turn 1.5s ease-in-out infinite}
.rotate-notice strong{font-size:27px}
.rotate-notice small{font-size:15px;opacity:.8}
@keyframes turn{50%{transform:rotate(90deg)}}
@media(max-aspect-ratio:1/1) and (max-width:760px){body.game-active .rotate-notice{display:grid}.landscape-note{display:block}.cover-frame{width:100vw}.intro-screen{align-items:center}}
@media(max-width:760px) and (orientation:landscape){.toast{top:13%}.modal-card{transform:scale(.85)}.win-card{grid-template-columns:1.25fr .75fr}.win-copy{padding:12px}.win-copy h2{font-size:32px}.win-copy p{font-size:14px}.win-stars{font-size:38px}.win-card>img{min-height:0}.bamboo-button{padding:8px 15px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Transparent interaction zones sit over the finished UI artwork. */
.stage-button{background:transparent}
.progress-panel{background:transparent}


/* V35.2: Görseldeki çizimler kalır; çalışan ilerleme ve ipucu arayüzü gizlidir. */
.hint-button,.progress-panel,.hint-ghost,.reward-hotspot{display:none!important}