:root{--sky:#bfe7ff;--sky-top:#8fd4ff;--ink:#23324a;--navy:#1f5fa4;--paper:#fff;--soft:#eef6ff;--line:#ccdfef;--gold:#ffcf3f;--green:#32a45a;--green-dark:#217d40;--found:#22c55e;--red:#d55c62;--muted:#536b82;--shadow:0 5px 0 #183f6f;--soft-shadow:0 6px 0 #1f5fa422;--overlay:#102441c9;--hint-glow:#ffe052;--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;color:var(--ink);background:linear-gradient(var(--sky-top),var(--sky));font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;user-select:none;touch-action:manipulation;letter-spacing:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:4px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.button{border:2px solid var(--line);border-radius:14px;background:var(--paper);color:var(--navy);min-height:48px;padding:10px 16px;font-weight:800;transition:transform .15s}.button:active{transform:translateY(2px)}.button:disabled{cursor:wait;opacity:.6}.home{height:100dvh;overflow-y:auto;padding:24px 18px calc(20px + var(--safe));touch-action:pan-y}.home-content{max-width:1100px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}.brand{display:flex;align-items:center;gap:8px;margin-bottom:14px}.brand img{width:125px;height:140px;object-fit:contain}.brand p{font-size:15px;margin:0 0 5px;color:var(--navy)}h1{font-size:36px;line-height:1.08;margin:0;color:var(--paper);-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 3px var(--navy)}.home-scene{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:4px solid var(--paper);border-radius:8px;box-shadow:var(--soft-shadow)}.play{display:block;width:100%;background:var(--green);color:var(--paper);border:3px solid var(--paper);box-shadow:0 6px 0 var(--green-dark);font-size:24px;margin-top:16px;min-height:62px}.picker h2{color:var(--navy);text-align:center;margin:8px 0 16px;font-size:28px}.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.level{font-size:18px;padding:10px 4px}.level small{display:block;font-size:12px;margin-top:5px;color:var(--muted)}.level[aria-pressed=true]{border:3px solid var(--gold);box-shadow:var(--soft-shadow);background:var(--paper)}.scene-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scene-choice{position:relative;padding:0;overflow:hidden;text-align:left;border-radius:8px}.scene-choice[aria-pressed=true]{border:3px solid var(--gold);box-shadow:var(--soft-shadow)}.scene-choice img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.scene-choice .name{display:block;min-height:34px;padding:6px;font-size:12px;line-height:1.2}.complete{position:absolute;top:5px;right:5px;border-radius:50%;background:var(--green-dark);color:var(--paper);width:25px;height:25px;text-align:center;line-height:25px}.settings{grid-column:1/-1;display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}.settings label{display:flex;gap:6px;align-items:center;font-size:14px}.settings select{max-width:170px;padding:10px 6px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}.toggle[aria-pressed=false]{opacity:.55}.icon{width:48px;flex-shrink:0;padding:8px}.version{grid-column:1/-1;text-align:center;margin:0;font-size:12px;color:var(--muted)}.game{height:100dvh;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:var(--safe)}.topbar{display:flex;align-items:center;gap:12px;background:var(--navy);color:var(--paper);padding:8px 12px}.menu{font-size:15px;white-space:nowrap}.heading{flex:1;min-width:0;text-align:center}.heading h2{font-size:20px;line-height:1.1;margin:0}.heading span{font-size:12px;display:block;margin-top:3px}.roundbar{display:flex;gap:12px;align-items:center;justify-content:center;padding:8px 16px;min-height:64px}.roundbar p{font-size:18px;margin:0}.hint{margin-left:auto;background:var(--gold);border-color:var(--paper)}.dots{display:flex;gap:6px}.dot{width:14px;height:14px;border:2px solid var(--navy);border-radius:50%;background:var(--paper)}.dot.done{background:var(--green);border-color:var(--green-dark)}.pictures{width:100%;max-width:1700px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 12px;align-items:center;flex:0 0 auto}.picture{position:relative;aspect-ratio:4/3;min-width:0;border:4px solid var(--paper);border-radius:8px;overflow:hidden;box-shadow:var(--soft-shadow);cursor:crosshair;touch-action:manipulation}.picture img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.pictures[aria-busy=true]{visibility:hidden}.marks{position:absolute;inset:0;pointer-events:none}.mark{position:absolute;border:3px solid var(--found);border-radius:50%;box-shadow:0 0 0 2px var(--paper);animation:pop .3s ease-out;pointer-events:none}.mark.hint-mark{border:4px dashed var(--hint-glow);box-shadow:0 0 0 2px var(--navy);animation:sparkle .7s infinite alternate}.wrong-mark{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);border:3px solid var(--red);border-radius:50%;pointer-events:none;animation:wobble .4s}.status{text-align:center;min-height:28px;font-size:15px;color:var(--navy);margin:8px 0;flex-shrink:0}.load-error{text-align:center}.win{border:4px solid var(--gold);border-radius:20px;max-width:440px;width:calc(100% - 32px);padding:24px;background:var(--paper);color:var(--ink);overflow:visible}.win::backdrop{background:var(--overlay)}.win canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.win-content{text-align:center;position:relative}.win img{object-fit:contain;animation:celebrate 1s ease-in-out infinite}.win h2{font-size:28px;color:var(--navy);margin:8px 0}.win p{margin:10px 0}.stars{font-size:44px;color:var(--gold)}.win .button:not(.play){margin-top:16px}.win .play{font-size:20px}@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}@keyframes sparkle{to{filter:brightness(1.4);transform:scale(1.08)}}@keyframes wobble{25%{margin-left:-5px}75%{margin-left:5px}}@keyframes celebrate{50%{transform:translateY(-8px)}}
@media(orientation:landscape) and (max-height:850px){.home{padding-top:14px}.home-content{gap:16px}.brand img{width:105px;height:112px}.home-scene{max-height:260px}.scene-list{gap:7px}.scene-choice .name{font-size:11px;min-height:30px}.pictures{width:min(100%,calc((100dvh - 164px)*2.6667 + 40px))}.topbar{padding:5px 10px}.roundbar{min-height:58px;padding:5px 12px}.status{margin:4px 0}}
@media(max-width:700px) and (orientation:portrait){.home-content{grid-template-columns:minmax(0,1fr);max-width:500px;gap:20px}.brand{justify-content:center}.brand img{width:100px;height:110px}h1{font-size:32px}.home-scene{max-height:220px;object-fit:cover}.picker h2{font-size:25px}.settings{gap:8px}.settings .button{font-size:13px}.pictures{grid-template-columns:minmax(0,1fr);max-width:620px;padding:0 8px;gap:8px}.topbar{gap:6px;padding:6px}.menu{font-size:12px;padding:8px}.heading h2{font-size:16px}.topbar .icon{width:40px;min-height:44px}.roundbar{gap:8px;padding:8px}.roundbar p{font-size:15px}.dot{width:10px;height:10px}.dots{gap:3px}.hint{padding:8px 12px;min-height:44px}.mark{border-width:2px}.status{font-size:13px}}
@media(orientation:landscape) and (min-width:820px) and (max-height:850px){.scene-choice img{aspect-ratio:2.15/1}.scene-choice .name{min-height:26px;padding:5px}.picker h2{margin:4px 0 10px;font-size:25px}.levels{margin-bottom:10px}.level{min-height:62px;padding:7px 4px}.home-content{gap:12px 20px}.settings .button{min-height:42px}.settings select{padding:8px 6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}