/* 08E.02 — Neighbourhood Mission Discovery
   Canvas: 1366 x 1024. One uploaded clean PNG scene, HTML controls layered over it.
   Preserve the colour of the photo; use opacity ONLY behind actual text surfaces.
*/
#city-mission-v2.c9-screen{font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#0c1845;color:#f8faff}
#city-mission-v2 *{box-sizing:border-box}
#city-mission-v2 button{font-family:inherit;cursor:pointer}
#city-mission-v2 button:focus-visible{outline:4px solid #a1fbf3;outline-offset:3px;z-index:20}
#city-mission-v2 .c9-topbar{position:absolute;z-index:8;top:0;left:0;right:0;height:94px;padding:0 29px;display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#0c1748,#131a50 100%);border-bottom:2px solid #8b6ee5b8;box-shadow:0 5px 22px #090d399a}
#city-mission-v2 .c9-back{display:grid;place-items:center;height:57px;width:57px;flex:none;border:1.5px solid #a69af5;border-radius:50%;background:linear-gradient(145deg,#5b3cb3,#24195d);font-size:53px;color:white;line-height:.65;padding-bottom:10px;box-shadow:0 5px 15px #b06bff50}
#city-mission-v2 .c9-brand{display:block;width:157px;max-height:60px;object-fit:contain}
#city-mission-v2 .c9-draw-label{padding:7px 12px 9px;background:linear-gradient(105deg,#6548d9,#ad4bdd);border:1px solid #b48afa;border-radius:14px;color:white;font-size:20px;font-weight:900;letter-spacing:-.035em}
#city-mission-v2 .c9-divider{width:1px;height:41px;background:#7782b97d;margin:0 7px}
#city-mission-v2 .c9-heading-meta{display:flex;flex-direction:column;gap:4px}
#city-mission-v2 .c9-heading-meta strong{font-size:23px;line-height:1;font-weight:930;white-space:nowrap}
#city-mission-v2 .c9-heading-meta small{font-size:12px;color:#bdd1f7;font-weight:750;white-space:nowrap}
#city-mission-v2 .c9-grow{flex:1}
#city-mission-v2 .c9-stars,#city-mission-v2 .c9-level{border:1.5px solid #8e77db;border-radius:19px;background:linear-gradient(145deg,#263077,#181c5d);min-height:50px;box-shadow:inset 0 2px 4px #b09af847,0 4px 12px #070a32a3}
#city-mission-v2 .c9-stars{padding:4px 18px;display:flex;align-items:center;gap:8px;color:#ffd44f;font-size:30px}
#city-mission-v2 .c9-stars strong{font-size:24px;color:#fff}
#city-mission-v2 .c9-level{min-width:201px;padding:7px 11px;display:flex;align-items:center;gap:9px}
#city-mission-v2 .c9-level strong{white-space:nowrap;font-size:15px}
#city-mission-v2 .c9-level small{font-size:11px;white-space:nowrap;color:#c8d8f1}
#city-mission-v2 .c9-progress-track{height:9px;flex:1;min-width:55px;border-radius:20px;background:#3d3c85;overflow:hidden}
#city-mission-v2 .c9-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#2be3d5,#729ffc)}
#city-mission-v2 .c9-scene{position:absolute;top:94px;left:0;right:0;bottom:182px;overflow:hidden;background:linear-gradient(110deg,#3978ba,#9abbdf);isolation:isolate}
#city-mission-v2 .c9-background{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 51%;display:block;filter:none}
#city-mission-v2 .c9-top-fade{position:absolute;inset:0 0 auto;height:170px;background:linear-gradient(180deg,rgba(7,21,63,.57),rgba(7,21,63,.13) 62%,transparent);pointer-events:none}
#city-mission-v2 .c9-breadcrumb{position:absolute;z-index:2;left:42px;top:30px;text-shadow:0 2px 14px #0a1956b9;max-width:600px}
#city-mission-v2 .c9-chapter-kicker{font-size:12px;font-weight:950;letter-spacing:.16em;color:#bbfff5}
#city-mission-v2 .c9-breadcrumb h1{margin:7px 0;font-size:51px;line-height:1.04;letter-spacing:-.055em;font-weight:930}
#city-mission-v2 .c9-breadcrumb p{font-size:18px;font-weight:730;color:#f6fcff}
#city-mission-v2 .c9-overview{position:absolute;left:42px;top:171px;z-index:3;border:1.5px solid #dddeff;background:rgba(20,31,86,.88);border-radius:16px;padding:12px 17px;font-size:15px;color:#fff;font-weight:850;box-shadow:0 4px 14px #12163b8c;display:flex;align-items:center;gap:12px;min-height:51px}
#city-mission-v2 .c9-overview>span{font-size:22px;color:#9ef7f3}
#city-mission-v2 .c9-overview:hover{background:rgba(44,55,126,.95)}
#city-mission-v2 .c9-mission-panel{position:absolute;z-index:5;top:97px;right:30px;bottom:24px;width:414px;padding:19px 20px 17px;border-radius:28px;border:2px solid #b196ff;background:linear-gradient(155deg,rgba(20,26,78,.96),rgba(29,21,90,.96));box-shadow:0 12px 32px #071032ab,0 0 18px #966bff62;display:flex;flex-direction:column;gap:0}
#city-mission-v2 .c9-mission-top{display:flex;align-items:center;justify-content:space-between;gap:7px}
#city-mission-v2 .c9-mission-index{font-size:11px;letter-spacing:.105em;font-weight:930;color:#9bedf1}
#city-mission-v2 .c9-mission-badge{border:1px solid #65dbbb;background:#144f62;color:#c3fff3;border-radius:13px;padding:6px 8px;font-size:10px;line-height:1;font-weight:850;white-space:nowrap}
#city-mission-v2 .c9-lesson-title{display:flex;align-items:center;gap:15px;margin:17px 0 17px}
#city-mission-v2 .c9-bus-symbol{display:grid;place-items:center;width:74px;height:72px;border-radius:19px;font-size:45px;background:linear-gradient(135deg,#efe3ff,#f7eec1);box-shadow:0 3px 14px #7569c17c;flex:none}
#city-mission-v2 .c9-lesson-title h2{margin:0 0 5px;font-size:34px;font-weight:940;letter-spacing:-.04em;line-height:1}
#city-mission-v2 .c9-lesson-title p{font-size:14px;color:#dce4ff;line-height:1.35}
#city-mission-v2 .c9-mission-instruction{background:linear-gradient(125deg,#36417fb8,#3a3476a0);border-radius:18px;border:1px solid #7e86d0;padding:13px 15px}
#city-mission-v2 .c9-instruction-label{font-size:11px;font-weight:950;letter-spacing:.11em;color:#8beae8}
#city-mission-v2 .c9-mission-instruction p{margin:7px 0 0;color:#f0f1ff;font-size:14px;line-height:1.45}
#city-mission-v2 .c9-learning{display:flex;flex-direction:column;gap:14px;padding:18px 1px 14px}
#city-mission-v2 .c9-learning>div{display:flex;align-items:center;gap:12px}
#city-mission-v2 .c9-learning-icon{width:43px;height:41px;border-radius:13px;border:1px solid #8d8be9;background:#38318b;display:grid;place-items:center;font-size:22px;color:#ffdc92;flex:none}
#city-mission-v2 .c9-learning>div>span:last-child{display:flex;flex-direction:column;gap:3px}
#city-mission-v2 .c9-learning strong{font-size:14px;font-weight:870}
#city-mission-v2 .c9-learning small{font-size:12px;color:#b8c9f2}
#city-mission-v2 .c9-template-row{display:flex;align-items:center;gap:8px;margin-top:auto;padding:9px 10px;border:1px solid #777cbd;border-radius:13px;background:#1b2768;font-size:12px;font-weight:760}
#city-mission-v2 .c9-template-row>span:first-child{font-size:23px;color:#b4c2f2}
#city-mission-v2 .c9-template-row button{margin-left:auto;min-height:35px;border:1px solid #b0a3f6;background:#44318a;border-radius:10px;padding:6px 11px;color:#f9faff;font-size:12px;font-weight:830}
#city-mission-v2 .c9-start{width:100%;min-height:66px;border:2px solid #fff7c0;border-radius:19px;margin-top:12px;background:linear-gradient(180deg,#fff8af,#ffcf38);box-shadow:0 0 16px #ffbe45a6;color:#302552;font-size:21px;font-weight:930;display:flex;align-items:center;justify-content:center;gap:25px}
#city-mission-v2 .c9-start span{font-size:29px}
#city-mission-v2 .c9-start:hover{filter:brightness(1.07)}
#city-mission-v2 .c9-mission-footnote{font-size:11px;line-height:1.3;color:#bfc9ea;text-align:center;margin:9px 7px 0}
#city-mission-v2 .c9-placement-hint{position:absolute;bottom:43px;left:38%;z-index:2;display:flex;align-items:center;gap:10px;background:#fffdf1e8;border:2px dashed #ffdb70;border-radius:18px;padding:12px 16px;color:#333d62;box-shadow:0 6px 18px #121f416b;transform:rotate(-2deg)}
#city-mission-v2 .c9-pin{font-size:35px;line-height:1;color:#e29828}
#city-mission-v2 .c9-placement-hint>span:last-child{display:flex;flex-direction:column;gap:3px}
#city-mission-v2 .c9-placement-hint strong{font-size:15px;font-weight:900}
#city-mission-v2 .c9-placement-hint small{font-size:11px;font-weight:650}
#city-mission-v2 .c9-bottom{position:absolute;bottom:0;left:0;right:0;height:182px;z-index:6;display:flex;align-items:center;gap:19px;padding:16px 26px 23px;background:linear-gradient(110deg,#191759,#1b1d68,#261557);border-top:2px solid #8664f3;box-shadow:0 -4px 21px #110e3f89}
#city-mission-v2 .c9-owii{display:flex;gap:9px;align-items:center;flex:none;width:265px}
#city-mission-v2 .c9-owii img{width:93px;height:112px;object-fit:contain;filter:drop-shadow(0 4px 10px #10133f9c)}
#city-mission-v2 .c9-owii p{display:flex;flex-direction:column;gap:8px;padding:11px;background:rgba(63,53,143,.7);border:1.5px solid #ab91f6;border-radius:15px}
#city-mission-v2 .c9-owii strong{font-size:14px;font-weight:880;line-height:1.2}
#city-mission-v2 .c9-owii p span{font-size:12px;line-height:1.35;color:#d5defa}
#city-mission-v2 .c9-path{min-width:0;flex:1;border:1px solid #856ede;border-radius:21px;background:linear-gradient(115deg,#242275,#211964);padding:13px 14px 15px}
#city-mission-v2 .c9-path-header{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}
#city-mission-v2 .c9-path-header strong{font-size:14px;font-weight:910}
#city-mission-v2 .c9-path-header>span{font-size:12px;color:#cbd2f7}
#city-mission-v2 .c9-path-items{display:flex;align-items:center;gap:5px}
#city-mission-v2 .c9-path-step{padding:8px 6px;min-width:0;flex:1;min-height:65px;border:1px solid #7c79bb;border-radius:16px;background:#30266d;display:flex;align-items:center;justify-content:center;gap:8px;color:#e0dbf7}
#city-mission-v2 .c9-path-step.is-current{background:linear-gradient(125deg,#fff1a6,#e8bf77);border:2px solid #fff5bd;color:#30244a}
#city-mission-v2 .c9-path-step.is-locked{opacity:.78}
#city-mission-v2 .c9-step-number{height:35px;width:35px;border:1px solid #b4abf3;display:grid;place-items:center;flex:none;border-radius:50%;background:#493da5;font-size:17px;font-weight:900}
#city-mission-v2 .c9-path-step.is-current .c9-step-number{background:#7139d9;color:white}
#city-mission-v2 .c9-path-step>span:last-child{display:flex;min-width:0;flex-direction:column;gap:4px;text-align:left}
#city-mission-v2 .c9-path-step strong{font-size:13px;font-weight:900;white-space:nowrap}
#city-mission-v2 .c9-path-step small{font-size:10px;white-space:nowrap}
#city-mission-v2 .c9-path-connector{width:10px;height:3px;flex:none;background:#9c91d9;border-radius:3px}
#city-mission-v2 .c9-footer-library{min-width:153px;min-height:75px;border:2px solid #a598fa;background:linear-gradient(120deg,#3a309b,#231c69);border-radius:21px;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:840}
#city-mission-v2 .c9-footer-library span{font-size:28px}
#city-mission-v2 .c9-preview{position:absolute;z-index:7;bottom:4px;right:24px;color:#aa9dd0;font-size:9px;letter-spacing:.08em;font-weight:700}
@media(prefers-reduced-motion:reduce){#city-mission-v2 *{transition:none!important;animation:none!important}}