@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap');
:root { --ink:#493e34; --paper:#fff9df; --orange:#e9784a; --gold:#f2bd43; --green:#6f9f68; --shadow:rgba(79,56,36,.18); }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:linear-gradient(#b9ded9 0 52%,#d8e5a9 52%); font-family:"ZCOOL KuaiLe","PingFang SC",sans-serif; user-select:none; -webkit-tap-highlight-color:transparent; }
button,a { font:inherit; } button:focus-visible,a:focus-visible { outline:5px solid rgba(220,111,65,.45); outline-offset:3px; }
.paper-sky { position:fixed; inset:0; overflow:hidden; pointer-events:none; }
.paper-sky i { position:absolute; width:90px; height:30px; border-radius:50%; background:rgba(255,255,255,.55); }
.paper-sky i::before,.paper-sky i::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }
.paper-sky i::before { width:48px;height:48px;left:10px; }.paper-sky i::after { width:58px;height:58px;right:4px; }
.paper-sky i:nth-child(1){left:5%;top:11%}.paper-sky i:nth-child(2){right:5%;top:18%;transform:scale(.72)}.paper-sky i:nth-child(3){left:16%;bottom:8%;background:#91b96f;transform:scale(2.5)}.paper-sky i:nth-child(4){right:14%;bottom:5%;background:#82ad67;transform:scale(3)}
.difference-app { position:relative;z-index:2;width:min(100%,1100px);min-height:100dvh;margin:0 auto; }
.difference-screen { display:none;min-height:100dvh;padding:20px clamp(15px,4vw,36px);animation:enter .45s cubic-bezier(.2,.8,.2,1); }.difference-screen.is-active{display:flex}
.welcome { position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.back-link { position:absolute;top:22px;left:20px;padding:8px 13px;border-radius:18px;color:#4c7353;background:rgba(255,255,255,.6);text-decoration:none; }
.magnifier { position:relative;width:92px;height:92px;display:grid;place-items:center;border:8px solid #fff0bc;border-radius:50%;background:#8ec8c1;box-shadow:0 8px 0 rgba(67,83,50,.13); }
.magnifier::after { content:"";position:absolute;width:52px;height:15px;right:-42px;bottom:-18px;border-radius:10px;background:var(--orange);transform:rotate(43deg);box-shadow:0 4px 0 #b95636; }.magnifier span{font-size:38px;color:white}
.kicker { margin:18px 0 5px;color:#567d58;letter-spacing:.14em; }.welcome h1{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:clamp(58px,15vw,90px);line-height:.88;font-weight:400;text-shadow:0 4px rgba(255,255,255,.65)}.welcome h1 em{color:var(--orange);font-style:normal}.intro{font-size:clamp(18px,4vw,22px);line-height:1.55}
.preview-pair { display:flex;align-items:center;gap:15px;margin:7px 0 24px; }.preview-pair>div{width:160px;height:100px;padding:24px 10px;border:5px solid white;border-radius:22px;background:#d7e7ac;box-shadow:0 7px 0 rgba(73,74,44,.12);font-size:38px}.preview-pair b{font-size:25px}.preview-pair span{font-size:33px}.preview-pair>i{font-style:normal;color:var(--orange)}
.primary-button { min-width:220px;min-height:62px;padding:9px 13px 9px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-radius:40px;color:white;background:var(--orange);box-shadow:0 8px 0 #b95535,0 14px 25px var(--shadow);font-size:23px;cursor:pointer }.primary-button b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--orange);background:white}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #b95535}.quiet-button{margin-top:22px;border:0;color:#52745a;background:transparent;cursor:pointer}
.new-level-button{margin-top:18px;padding:9px 18px;display:flex;align-items:center;gap:10px;border:2px solid rgba(78,102,62,.16);border-radius:22px;color:#4b714f;background:rgba(255,249,223,.78);box-shadow:0 4px 0 rgba(74,88,53,.11);cursor:pointer}.new-level-button b{padding:3px 7px;border-radius:9px;color:white;background:var(--orange);font-size:12px}.new-level-button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(74,88,53,.11)}
.game { position:relative;flex-direction:column;align-items:center;padding-top:14px; }.game-header{width:100%;display:flex;align-items:center;gap:8px}.circle-button{flex:0 0 43px;height:43px;border:2px solid rgba(70,61,44,.08);border-radius:50%;background:rgba(255,249,223,.94);box-shadow:0 4px 0 rgba(70,61,44,.12);font-size:20px;cursor:pointer}.progress{flex:1;display:flex;justify-content:center;gap:3px}.progress i{width:clamp(6px,1.3vw,13px);height:9px;border-radius:8px;background:rgba(255,255,255,.62)}.progress i.done{background:var(--gold)}.progress i.current{background:var(--orange);transform:scaleY(1.25)}.found-counter{min-width:76px;padding:7px 10px;border-radius:20px;background:var(--paper);box-shadow:0 3px 0 rgba(70,61,44,.1)}.found-counter span{color:var(--orange)}
.task-card{width:min(100%,680px);margin:15px 0 8px;padding:10px 13px;display:flex;align-items:center;gap:11px;border-radius:23px;background:var(--paper);box-shadow:0 6px 0 rgba(77,65,43,.1),0 12px 23px var(--shadow)}.detective{font-size:44px}.task-card>div:nth-child(2){flex:1}.task-card p{margin:0;color:#738a58;font-size:13px}.task-card h2{margin:1px 0 0;font-size:clamp(21px,4.5vw,29px);font-weight:400}.hint-button{padding:10px 13px;border:0;border-radius:16px;color:#735d35;background:#ffe39a;cursor:pointer}.instruction{margin:4px 0 8px;color:#4c6c4f}
.scene-pair{width:min(100%,900px);display:grid;grid-template-columns:1fr;gap:24px}figure{margin:0;min-width:0}figcaption{width:max-content;margin:0 auto -11px;padding:5px 18px;position:relative;z-index:2;border-radius:14px;color:white;background:var(--orange);font-size:15px}.scene-frame{overflow:hidden;border:8px solid var(--paper);border-radius:30px 14px 30px 14px;background:#d9e7b2;box-shadow:0 9px 0 rgba(68,66,42,.15),0 16px 28px var(--shadow);touch-action:manipulation}.scene-frame svg{display:block;width:100%;height:auto;cursor:crosshair}.scene-frame.wrong{animation:shake .38s}.diff-target{cursor:pointer}.hit-zone{fill:transparent;pointer-events:all}.found-ring{display:none;fill:none;stroke:#ed5547;stroke-width:7;stroke-dasharray:8 5;filter:drop-shadow(0 2px 0 white);animation:ringIn .35s ease-out}.diff-target.found .found-ring{display:block}.diff-target.hinting .found-ring{display:block;stroke:#f6c536;animation:hintPulse .7s ease-in-out infinite}
.feedback{min-height:38px;margin:17px 0 10px;padding:8px 17px;border-radius:20px;color:#466649;background:rgba(255,255,255,.65);text-align:center}.feedback.good{color:#267044;background:#e5f3c8}.feedback.notice{color:#9c5b34;background:#fff0bd}
.level-overlay{position:fixed;z-index:20;inset:0;display:none;place-items:center;padding:20px;background:rgba(44,59,43,.52);backdrop-filter:blur(6px)}.level-overlay.show{display:grid}.result-card{width:min(92vw,390px);padding:27px;display:flex;flex-direction:column;align-items:center;border:7px solid #f3dda5;border-radius:38px 16px;background:var(--paper);box-shadow:0 18px 0 rgba(48,58,40,.15),0 26px 55px rgba(35,43,32,.28);text-align:center}.result-stars{color:var(--gold);font-size:25px}.result-icon{font-size:78px;animation:pop .6s cubic-bezier(.2,1.5,.4,1)}.result-card h2{margin:3px 0;font-family:"Ma Shan Zheng",cursive;font-size:48px;font-weight:400;color:var(--orange)}.result-card p{font-size:18px;line-height:1.45}
.finish{flex-direction:column;align-items:center;justify-content:center;text-align:center}.finish h2{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:clamp(52px,13vw,78px);font-weight:400;color:var(--orange);text-shadow:0 4px white}.finish-icon{font-size:100px;filter:drop-shadow(0 8px 2px rgba(60,50,34,.17));animation:pop .7s cubic-bezier(.2,1.5,.4,1)}.finish>p:not(.kicker){font-size:20px}.badge{margin:8px 0 25px;padding:12px 22px;display:flex;align-items:center;gap:10px;border:3px dashed #d3a841;border-radius:23px;background:var(--paper);transform:rotate(-2deg)}.badge span{font-size:52px}.badge strong{font-size:18px;font-weight:400}.finish-link{margin-top:22px;color:#47704f;text-decoration:none}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}@keyframes shake{25%{transform:translateX(-6px)}60%{transform:translateX(6px)}}@keyframes ringIn{from{opacity:0;transform:scale(.35)}}@keyframes hintPulse{50%{opacity:.25;transform:scale(1.12)}}@keyframes pop{from{transform:scale(0) rotate(-15deg)}}
@media(max-width:600px){.difference-screen{padding-left:9px;padding-right:9px}.scene-pair{gap:18px}.scene-frame{border-width:5px;border-radius:18px 8px}.task-card{border-radius:18px}.progress{gap:2px}.progress i{width:5px}.found-counter{min-width:68px;padding:6px;font-size:14px}.preview-pair>div{width:130px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}