:root{--orange:#dd8b19;--ink:#243246;--green:#298e61;--red:#c23a35;--paper:#f9fafb}*{box-sizing:border-box}body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);overflow:hidden}.map{height:100dvh;min-height:560px;position:relative;overflow:hidden;background:#7aa5b8 url('/bay.png') center/cover no-repeat}.map:before{content:'';position:absolute;inset:0;background:#17334b20}#route{position:absolute;inset:0;width:100%;height:100%}.route-bg{fill:none;stroke:#fffd;stroke-width:6;stroke-linecap:round}.route{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-dasharray:1 12;stroke-linecap:round}.marker{cursor:pointer}.marker.locked{pointer-events:none;opacity:.5}.marker .tree{stroke:#fff;stroke-width:2.5;stroke-linejoin:round}.marker text{font:700 21px 'Baloo 2';fill:#fff;stroke:#233145;stroke-width:3.5;paint-order:stroke}.marker.current .ring{animation:ring 2s infinite;transform-origin:center}.marker.current .crown{animation:bob 3s ease-in-out infinite}.marker.selected .tree{fill:var(--red)!important}header{position:absolute;inset:0 0 auto;display:flex;gap:16px;padding:16px 20px;pointer-events:none}.hud{background:#ffffffe8;border-radius:18px;padding:10px 18px;box-shadow:0 8px 22px #203c4b30}.title b{display:block;font:800 22px/1 'Baloo 2'}.title small{font-weight:700;color:#627080}.progress{margin-left:auto;min-width:170px;font-size:13px;font-weight:800}.progress span{display:flex;justify-content:space-between;margin-bottom:6px}.progress i{display:block;height:10px;border-radius:99px;background:#e3e7eb;overflow:hidden}.progress em{display:block;height:100%;width:0;background:var(--orange);transition:.5s}.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#ffffffe8;border-radius:99px;padding:11px 22px;font-weight:700;box-shadow:0 8px 22px #203c4b30}.editor-toggle{position:absolute;left:20px;bottom:20px;border:0;border-radius:99px;padding:10px 15px;background:#fff;color:var(--ink);font:800 14px Nunito;cursor:pointer;box-shadow:0 6px 18px #203c4b40}.editor-toggle.on{background:var(--red);color:white}.overlay{position:fixed;inset:0;z-index:20;background:#19324499;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}.card{width:min(100%,660px);max-height:94dvh;overflow:auto;background:var(--paper);border-radius:27px;box-shadow:0 24px 60px #132a3d99;animation:pop .25s}.intro,.finish{max-width:540px;padding:32px 30px;text-align:center}.emoji{font-size:54px;animation:bob 3s infinite}.card h1,.card h2{font:800 30px/1.1 'Baloo 2';margin:12px 0;color:var(--ink)}.intro p,.finish p,.preview p{font-weight:600;line-height:1.55;color:#465363}.rules{text-align:left;margin:22px 0}.rules div{margin:12px 0;font-weight:700}.cta{border:0;width:100%;border-radius:16px;padding:15px;background:var(--orange);color:#fff;font:800 18px 'Baloo 2';cursor:pointer;box-shadow:0 8px 18px #dd8b1970}.preview{max-width:760px}.photo{height:min(54vw,460px);position:relative;background:repeating-linear-gradient(45deg,#e2e5e9 0 8px,#d5d9df 8px 16px);border-radius:26px 26px 0 0;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover}.close{position:absolute;right:14px;top:14px;border:0;border-radius:50%;width:34px;height:34px;background:#17263799;color:#fff;font-size:20px;cursor:pointer}.body{padding:22px 24px 26px}.badge{position:absolute;bottom:14px;left:16px;background:#172637aa;color:#fff;border-radius:99px;padding:6px 14px;font:800 15px 'Baloo 2'}.quiz-head{display:flex;align-items:center;gap:12px;padding:18px 22px;background:var(--orange);color:#fff;border-radius:26px 26px 0 0}.number{background:#fff4;border-radius:12px;padding:7px 13px;font:800 20px 'Baloo 2'}.quiz-head h2{font-size:19px;color:#fff;margin:0}.quiz-head small{font-weight:700}.quiz .body h2{font-size:23px;margin:0 0 18px}.option{display:flex;align-items:center;gap:12px;width:100%;margin:11px 0;padding:13px;border:2.5px solid #dce1e7;border-radius:14px;background:#fff;color:var(--ink);font:700 16px Nunito;text-align:left;cursor:pointer}.option:hover{border-color:#9baabd}.option .dot{width:23px;height:23px;border:2px solid #b7c0cb;border-radius:50%;flex:none}.option.right{border-color:var(--green);background:#e6f7ee}.option.wrong{border-color:var(--red);background:#fcebed}.feedback{padding:12px 16px;border-radius:14px;background:#fcebed;color:#a5232a;font-weight:800;animation:shake .4s}.fact{margin-top:18px;padding:16px 18px;border-radius:18px;background:#e6f7ee}.fact strong{color:var(--green);font:800 18px 'Baloo 2'}.editor{position:fixed;z-index:30;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:#fdfdfd;box-shadow:-8px 0 30px #192d3e55;transform:translateX(101%);transition:.28s;display:flex;flex-direction:column}.editor.open{transform:none}.editor-head{padding:16px 18px;background:var(--red);color:#fff;font:800 18px 'Baloo 2';display:flex;justify-content:space-between}.editor-head button{border:0;background:#fff3;color:#fff;border-radius:50%;width:30px;font-size:20px;cursor:pointer}.editor-body{padding:16px 18px;overflow:auto}.tabs{display:flex;gap:7px;flex-wrap:wrap}.tabs button,.small-btn{border:0;border-radius:9px;background:#e6ebf1;color:#26374c;font-weight:800;cursor:pointer;padding:7px 10px}.tabs button.active{background:var(--red);color:#fff}.tabs .add{background:#dff5e9;color:#207f55}.move{display:flex;gap:8px;margin-top:10px}.move button{flex:1}.tip{font-size:12.5px;font-weight:700;line-height:1.4;padding:10px 13px;border-radius:12px;background:#fff0d5;margin:14px 0}label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#687487;font-weight:800;margin:13px 0 5px}input,textarea{width:100%;border:1.5px solid #dce1e7;border-radius:10px;padding:9px;font:600 14px Nunito;color:var(--ink)}textarea{resize:vertical}.photo-edit{display:flex;gap:9px;align-items:center}.photo-edit img{width:52px;height:52px;object-fit:cover;border-radius:8px}.photo-edit label{margin:0;background:#e6ebf1;padding:9px;text-align:center;border-radius:10px;cursor:pointer}.photo-edit input{display:none}.option-edit{display:flex;gap:6px;margin:7px 0}.option-edit input{flex:1}.correct{border:0;border-radius:50%;width:28px;height:28px;align-self:center;cursor:pointer}.correct.yes{background:var(--green);color:white}.remove{border:0;background:#fcebed;color:#a5232a;border-radius:8px;width:28px;cursor:pointer}.footer{margin-top:18px;border-top:1px solid #e4e7eb;padding-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.footer button,.footer label{margin:0;text-transform:none;text-align:center;padding:10px;border-radius:10px;border:0;background:#dfeafa;color:#235b9b;cursor:pointer}.footer .danger{background:#fcebed;color:#a5232a}.footer .reset{background:#e6ebf1;color:#26374c}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes ring{70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}@keyframes pop{from{transform:scale(.8);opacity:0}}@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}}@media(max-width:600px){header{padding:12px;gap:8px}.title{padding:9px 12px}.title b{font-size:18px}.progress{min-width:130px;padding:9px 12px}.hint{font-size:13px;width:max-content;max-width:94vw}.editor-toggle{left:12px;bottom:14px}.photo{height:52vw}.card h1{font-size:27px}}