:root{--cyan:#2ad0ff;--blue:#0787ff;--gold:#f4b83d;--text:#f7fbff;--muted:#a9c2d2;--line:rgba(42,208,255,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020711;color:var(--text);font-family:Inter,"Noto Sans KR","Malgun Gothic",Arial,sans-serif;overflow-x:hidden}button,input{font:inherit}a{color:inherit;text-decoration:none}.micro{letter-spacing:.28em;font-size:11px;color:#7cdcff;margin:0 0 10px}
.topbar{height:76px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;background:rgba(2,7,17,.88);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:11px}.brand img{width:52px;height:52px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 12px #e0a42f88)}.brand span{display:grid}.brand b{font-size:16px}.brand small{font-size:9px;letter-spacing:.18em;color:#80d9ff;margin-top:3px}nav{display:flex;gap:26px}nav a{font-size:12px;letter-spacing:.15em;color:#b7d9ec}.top-actions{display:flex;gap:8px}.icon-btn,.hud-btn{border:1px solid var(--line);background:#061727;color:white;border-radius:7px;padding:9px 12px;cursor:pointer}
.hero{height:min(820px,calc(100vh - 76px));min-height:630px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:linear-gradient(180deg,rgba(1,5,12,.12),rgba(1,5,12,.64) 74%,#020711),url('../img/idp-hero.png') center/cover no-repeat}.hero::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 45%,transparent 0 24%,rgba(0,0,0,.16) 52%,rgba(0,0,0,.78) 80%)}.hero-vignette{position:absolute;inset:0;box-shadow:inset 0 0 120px #000}.scanlines{position:absolute;inset:0;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 4px,#69d6ff 5px,transparent 6px);animation:scan 8s linear infinite}.hero-content{position:relative;z-index:4;width:min(1000px,92vw)}.hero-logo{width:clamp(145px,18vw,250px);height:clamp(145px,18vw,250px);object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 30px #e9a92aaa)}.eyebrow{font-size:12px;letter-spacing:.2em;color:#8fdcff}.hero h2{font-size:clamp(45px,7vw,104px);line-height:.84;margin:10px 0 18px;letter-spacing:-.055em;text-shadow:0 6px 2px #111,0 0 28px #ffc64b55}.hero h2 span{background:linear-gradient(#fff4bd,#eaa92c 35%,#80500e 94%);-webkit-background-clip:text;color:transparent}.hero h3{margin:0;font-size:clamp(20px,2.2vw,34px);color:#ffd36e;text-shadow:0 0 16px #be6e00}.hero-copy{color:#e6f1f8}.hero-actions{display:flex;justify-content:center;gap:14px;margin:28px 0 22px;flex-wrap:wrap}.btn{border:0;border-radius:9px;padding:15px 26px;min-width:200px;color:#fff;cursor:pointer;font-weight:800;box-shadow:inset 0 0 0 1px #ffffff35,0 0 26px #0008;transition:.2s}.btn small{display:block;font-weight:500;font-size:10px;margin-top:3px;opacity:.78}.btn:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.15)}.btn-blue,.btn-primary{background:linear-gradient(135deg,#063a78,#0b8bff);box-shadow:0 0 24px #108dff66,inset 0 0 0 1px #4ed8ff}.btn-gold{background:linear-gradient(135deg,#633b08,#d59620);box-shadow:0 0 24px #f0b33a55,inset 0 0 0 1px #ffd97b}.progress-strip{display:flex;justify-content:center;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 15px;border:1px solid #ffffff20;background:#020a15aa;border-radius:12px;font-size:11px}.progress-strip b{color:#ffd05a;margin-right:4px}.progress-strip i{color:#29c8ff}
.command-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:30px 3vw 40px;background:linear-gradient(#020711,#061322)}.command-card{min-height:235px;padding:22px;border:1px solid var(--edge,#1aa7e5);border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--tone,#07487a) 42%,transparent),#03101d 72%);transition:.25s}.command-card:hover{transform:translateY(-7px);box-shadow:0 0 30px var(--glow,#15a8ff44)}.command-card p{letter-spacing:.2em;font-size:12px;color:#bfeeff}.command-card h4{font-size:21px;margin:5px 0}.command-card small{color:#8eafc1}.command-card button{position:absolute;z-index:2;bottom:18px;left:18px;right:18px;padding:12px;border:1px solid var(--edge,#1aa7e5);background:#041524bb;color:#fff;border-radius:7px;cursor:pointer}.card-icon{font-size:44px;color:var(--edge,#27c2ff)}.blue{--edge:#23baff;--tone:#08659b;--glow:#23baff44}.purple{--edge:#a865ff;--tone:#54246f;--glow:#a865ff44}.green{--edge:#80e747;--tone:#275f22;--glow:#80e74744}.orange{--edge:#ff9e37;--tone:#6e3810;--glow:#ff9e3744}.cyan{--edge:#30d9e7;--tone:#095868;--glow:#30d9e744}
footer{padding:24px 3vw;background:#01050b;border-top:1px solid #163045;color:#8aa4b4;display:flex;justify-content:space-between;gap:20px;align-items:center}footer>div{display:grid;gap:5px}footer b{color:#e2edf3;letter-spacing:.15em;font-size:12px}footer span{font-size:9px;letter-spacing:.15em}.contact{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px}.contact a{font-size:11px}
.modal,.complete-modal{position:fixed;inset:0;z-index:150;background:#000c;display:none;place-items:center;padding:20px;backdrop-filter:blur(10px)}.modal.open,.complete-modal.open{display:grid}.modal-card,.complete-card{width:min(500px,94vw);background:linear-gradient(180deg,#0a2135,#020b14);border:1px solid #24c4ff;border-radius:18px;padding:34px;box-shadow:0 0 60px #00a9ff33;position:relative;text-align:center}.modal-card.wide{width:min(760px,94vw)}.modal-close{position:absolute;right:13px;top:10px;border:0;background:transparent;color:white;font-size:28px;cursor:pointer}.modal-logo{width:100px}.modal-card input{width:100%;padding:15px;background:#020811;border:1px solid #38566b;color:white;border-radius:8px;margin:14px 0}.result{font-size:11px;margin-top:14px;color:#96acba}.keys{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;margin:20px 0}.keys span{background:#061827;border:1px solid #163f59;padding:11px;border-radius:7px}.keys kbd{display:inline-grid;place-items:center;min-width:42px;padding:5px;background:#112c40;border:1px solid #36cfff;border-radius:5px;margin-right:8px}.score-guide{padding:14px;border:1px solid #8b651c;background:#211604;color:#ffd875;border-radius:10px}
.boot{position:fixed;inset:0;z-index:200;background:#01040a;display:grid;place-items:center;overflow:hidden;transition:opacity .7s,visibility .7s}.boot.hidden{opacity:0;visibility:hidden}.boot-grid{position:absolute;inset:-50%;background-image:linear-gradient(#15aaff22 1px,transparent 1px),linear-gradient(90deg,#15aaff22 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(60deg);animation:gridmove 3s linear infinite}.boot-card{position:relative;text-align:center;width:min(650px,90vw)}.boot-logo{width:180px;filter:drop-shadow(0 0 35px #e7ad3a)}.boot h1{font-size:clamp(36px,6vw,72px);margin:8px 0;background:linear-gradient(#fff5c2,#e7a92b);-webkit-background-clip:text;color:transparent}.boot p{color:#b9d9e8}.boot small{display:block;margin-top:12px;color:#668394}.pulse{animation:pulse 1.6s infinite}
.simulator-view{position:fixed;inset:0;z-index:100;background:#010713;display:none;color:white;overflow:hidden}.simulator-view.open{display:block}.sim-bg{position:absolute;inset:0;background:linear-gradient(#071e33aa,#061322ee),url('../img/idp-dashboard-reference.png') center/cover no-repeat;filter:blur(1px) brightness(.48);transform:scale(1.03)}
.hud-top,.hud-bottom{position:absolute;z-index:5;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid #1dc2ff88;background:#03111dcc;backdrop-filter:blur(6px)}.hud-top{top:15px}.hud-bottom{bottom:15px}.hud-top>div:first-child{display:grid}.hud-top span{font-size:10px;color:#9ac0d5}.telemetry{display:flex!important;gap:18px}.telemetry span b{color:#75e7ff}
.flight-area{position:absolute;inset:82px 20px 78px;border:1px solid #21bfff55;overflow:hidden;background:linear-gradient(#0c2e4b,#0a1c2b 62%,#061018);perspective:800px}.sky-glow{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#ffb65c22,transparent 30%),radial-gradient(circle at 20% 10%,#4acfff22,transparent 30%)}.mountains{position:absolute;left:0;right:0;bottom:26%;height:32%;background:linear-gradient(155deg,transparent 0 28%,#122532 29% 42%,transparent 43%),linear-gradient(205deg,transparent 0 25%,#0d1d28 26% 42%,transparent 43%);opacity:.75}.ground-grid{position:absolute;left:-10%;right:-10%;bottom:-12%;height:48%;background-image:linear-gradient(#1bbcff18 1px,transparent 1px),linear-gradient(90deg,#1bbcff18 1px,transparent 1px);background-size:60px 40px;transform:perspective(400px) rotateX(64deg);transform-origin:bottom}.horizon{position:absolute;left:0;right:0;top:67%;height:2px;background:#42cfff44}.landing-pad{position:absolute;left:50%;top:82%;width:160px;height:58px;border:4px solid #54d9ff;border-radius:50%;transform:translate(-50%,-50%) rotateX(55deg);box-shadow:0 0 30px #19c5ff88}.landing-pad span{display:grid;place-items:center;height:100%;font-size:28px;color:#7deaff}
.real-drone{position:absolute;left:50%;top:65%;width:190px;height:130px;transform:translate(-50%,-50%);transform-style:preserve-3d;filter:drop-shadow(0 18px 14px #000b);transition:filter .15s}.drone-shadow{position:absolute;left:42px;top:95px;width:110px;height:24px;border-radius:50%;background:#0008;filter:blur(8px);transform:scale(1)}.arm{position:absolute;left:46px;top:53px;width:98px;height:10px;background:linear-gradient(#4b5d67,#151d22);border-radius:5px;box-shadow:inset 0 1px #8ca0a8}.arm1{transform:rotate(28deg)}.arm2{transform:rotate(-28deg)}.arm3{transform:rotate(152deg)}.arm4{transform:rotate(-152deg)}.motor{position:absolute;width:21px;height:21px;border-radius:50%;background:radial-gradient(circle,#62737b 0 22%,#1b252a 23% 70%,#05080a 71%);box-shadow:0 0 6px #44d7ff55}.m1{left:18px;top:20px}.m2{right:18px;top:20px}.m3{left:18px;bottom:20px}.m4{right:18px;bottom:20px}.prop{position:absolute;width:66px;height:15px;border:2px solid #55e7ff;border-radius:50%;box-shadow:0 0 15px #43dbff66;animation:spin .055s linear infinite;opacity:.8}.p1{left:-4px;top:4px}.p2{right:-4px;top:4px}.p3{left:-4px;bottom:4px}.p4{right:-4px;bottom:4px}.shell-top{position:absolute;left:60px;top:38px;width:70px;height:42px;background:linear-gradient(145deg,#54646b,#172026 62%,#0d1317);clip-path:polygon(18% 0,82% 0,100% 48%,78% 100%,22% 100%,0 48%);box-shadow:inset 0 2px #8da0a7,0 0 12px #1ee0ff22}.shell-mid{position:absolute;left:73px;top:67px;width:44px;height:24px;background:#10171b;border-radius:4px 4px 10px 10px}.camera-gimbal{position:absolute;left:80px;top:83px;width:31px;height:28px;border-radius:50%;background:linear-gradient(#394b53,#0b1013);border:2px solid #5f737d;display:grid;place-items:center;transform-origin:50% 0}.lens{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#7fe9ff 0 10%,#153b53 11% 35%,#010203 36% 100%);box-shadow:0 0 9px #2bd9ff88}.led{position:absolute;width:8px;height:5px;border-radius:4px;box-shadow:0 0 8px currentColor}.led-red{left:58px;top:64px;background:#ff4747;color:#ff4747}.led-green{right:58px;top:64px;background:#44ff7a;color:#44ff7a}.real-drone.flying{filter:drop-shadow(0 28px 18px #000a) drop-shadow(0 0 8px #30dcff55)}.real-drone.flying .camera-gimbal{animation:gimbal 2s ease-in-out infinite}.real-drone.fast .prop{opacity:.55;filter:blur(1px)}
.wildfire-zone{position:absolute;right:12%;top:60%;width:120px;height:100px;display:none}.wildfire-zone.show{display:block}.wildfire-zone>span{position:absolute;bottom:-18px;left:5px;font-size:9px;color:#ffb75e;letter-spacing:.1em}.smoke{position:absolute;width:34px;height:34px;border-radius:50%;background:#7778;filter:blur(7px);animation:smoke 3.2s ease-in-out infinite}.s1{left:28px;top:8px}.s2{left:48px;top:0;animation-delay:.7s}.s3{left:65px;top:16px;animation-delay:1.3s}.flame{position:absolute;bottom:10px;width:22px;height:46px;background:linear-gradient(#fff47a,#ff941d 45%,#e23412 85%);border-radius:50% 50% 35% 35%;clip-path:polygon(50% 0,80% 35%,100% 70%,60% 100%,25% 80%,0 45%);animation:flame .35s ease-in-out infinite alternate}.f1{left:30px}.f2{left:52px;height:58px}.f3{left:73px;height:38px}.target-marker{position:absolute;right:16%;top:48%;width:80px;height:80px;border:2px solid #ffb12f;border-radius:50%;display:none;place-items:center;box-shadow:0 0 24px #ff971855}.target-marker.show{display:grid}.target-marker i{position:absolute;inset:8px;border:1px dashed #ffd27a;border-radius:50%;animation:radar 2s linear infinite}.target-marker span{font-size:9px;color:#ffd480}
.mission-box{position:absolute;z-index:8;top:102px;left:42px;width:290px;border-left:3px solid #ffc449;background:#061526dd;padding:13px 15px}.mission-box small{color:#ffd462;letter-spacing:.2em}.mission-box b{display:block;font-size:23px;margin:4px 0}.mission-box span{font-size:11px;color:#a8c4d4}.radar{width:70px;height:44px;border:1px solid #20ccff;border-radius:50%;position:relative;overflow:hidden}.radar i{position:absolute;inset:50% 50% auto auto;width:50%;height:1px;background:#68eeff;transform-origin:left;animation:radar 2s linear infinite}.radar span{position:absolute;bottom:-1px;left:22px;font-size:8px}.control-hint{font-size:11px;color:#9fc7da}.mission-flash{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.8);font-size:42px;font-weight:900;letter-spacing:.08em;color:#ffd460;text-shadow:0 0 25px #ffb400;opacity:0}.mission-flash.show{animation:flash 1.5s ease}.warning{position:absolute;right:22px;top:22px;padding:9px 14px;border:1px solid #ff4c4c;background:#3b0505cc;color:#ff8f8f;opacity:0}.warning.show{animation:warn .7s ease}
.complete-card{width:min(620px,94vw);border-color:#e9b23a;box-shadow:0 0 80px #e7a92b44;background:radial-gradient(circle at 50% 0,#2c240d,#06111c 58%,#02070c)}.complete-card h2{font-size:42px;margin:8px 0;background:linear-gradient(#fff6bc,#efb23c);-webkit-background-clip:text;color:transparent}.stars{font-size:60px;letter-spacing:8px;color:#ffd348;text-shadow:0 0 18px #ffb400}.stars.two::after,.stars.one::after{content:""}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.result-grid>div{padding:16px;border:1px solid #27455a;background:#061522;border-radius:9px}.result-grid span{display:block;font-size:10px;color:#8da8ba}.result-grid b{display:block;font-size:28px;margin-top:6px;color:#7ee5ff}.complete-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@keyframes scan{to{transform:translateY(30px)}}@keyframes float{50%{transform:translateY(-8px)}}.float{animation:float 3s ease-in-out infinite}@keyframes gridmove{to{transform:perspective(500px) rotateX(60deg) translateY(60px)}}@keyframes pulse{50%{box-shadow:0 0 45px #0da5ffbb,inset 0 0 0 1px #4ed8ff}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes radar{to{transform:rotate(360deg)}}@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}@keyframes gimbal{50%{transform:rotate(5deg)}}@keyframes smoke{0%{transform:translateY(15px) scale(.7);opacity:.35}100%{transform:translateY(-38px) scale(1.45);opacity:0}}@keyframes flame{to{transform:scaleY(1.12) translateX(2px)}}@keyframes warn{20%,80%{opacity:1}100%{opacity:0}}
@media(max-width:1000px){nav{display:none}.command-grid{grid-template-columns:repeat(2,1fr)}.command-card:last-child{grid-column:1/-1}.hero{height:780px}.hero h2{font-size:65px}.telemetry span:nth-child(2),.telemetry span:nth-child(3),.telemetry span:nth-child(6){display:none}}@media(max-width:620px){.topbar{height:64px}.brand img{width:42px;height:42px}.hero{height:720px}.hero-logo{width:140px;height:140px}.hero h2{font-size:46px}.hero-actions{flex-direction:column;align-items:center}.command-grid{grid-template-columns:1fr}.command-card:last-child{grid-column:auto}footer{flex-direction:column;align-items:flex-start}.contact{justify-content:flex-start}.mission-box{left:28px;top:92px;width:250px}.control-hint{display:none}.keys{grid-template-columns:1fr}.real-drone{transform:translate(-50%,-50%) scale(.8)}}

.missions-grid{grid-template-columns:repeat(3,1fr)}
.night{--edge:#7e8cff;--tone:#171d54;--glow:#6b74ff44}
.hover-zone{position:absolute;left:50%;top:54%;width:170px;height:90px;border:3px solid #57e8ff;border-radius:50%;transform:translate(-50%,-50%) rotateX(55deg);display:none;box-shadow:0 0 35px #36d8ff66,inset 0 0 20px #28cfff33}
.hover-zone.show{display:block}.hover-zone span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(-55deg);font-size:10px;color:#92efff;letter-spacing:.15em}
.flight-ring{position:absolute;width:110px;height:150px;border:7px solid #54e6ff;border-radius:50%;display:none;box-shadow:0 0 26px #2cdcff88,inset 0 0 20px #2cdcff33}
.flight-ring.show{display:grid;place-items:center}.flight-ring span{font-weight:900;color:#baf7ff;text-shadow:0 0 12px #3fe5ff}.ring-one{left:24%;top:45%}.ring-two{left:52%;top:34%;border-color:#87f45e;box-shadow:0 0 26px #7fee5c88}.ring-three{left:76%;top:52%;border-color:#ffc34e;box-shadow:0 0 26px #ffad3d88}
.flight-ring.passed{opacity:.26;filter:grayscale(.7)}
.missing-person{position:absolute;right:14%;bottom:18%;width:64px;height:95px;display:none;filter:drop-shadow(0 0 12px #ffd75c)}.missing-person.show{display:block}.person-head{width:24px;height:24px;background:#e6d2b1;border-radius:50%;margin:0 auto}.person-body{width:42px;height:58px;background:linear-gradient(#ffcc43,#8b5d13);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);margin:-2px auto 0}.missing-person span{position:absolute;white-space:nowrap;left:50%;transform:translateX(-50%);bottom:-18px;font-size:8px;color:#ffd65c}
.coord-box{position:absolute;right:28px;bottom:28px;padding:10px 14px;border:1px solid #ffb83c;background:#281704cc;color:#ffd889;font-size:10px;display:none;box-shadow:0 0 20px #ff9e2d44}.coord-box.show{display:block}
.night-beacon{position:absolute;left:72%;top:56%;width:74px;height:74px;border:2px solid #8fc5ff;border-radius:50%;display:none;place-items:center;box-shadow:0 0 35px #4e88ff88}.night-beacon.show{display:grid}.night-beacon i{position:absolute;width:14px;height:14px;border-radius:50%;background:#cce9ff;box-shadow:0 0 25px 10px #4ba1ff;animation:beacon 1.2s ease-in-out infinite}.night-beacon span{position:absolute;top:82px;font-size:8px;color:#bcdcff;white-space:nowrap}
.simulator-view.night-mode .flight-area{background:linear-gradient(#020715,#07101c 68%,#03070b)}
.simulator-view.night-mode .sky-glow{background:radial-gradient(circle at 76% 15%,#b9d8ff26,transparent 20%),radial-gradient(circle at 28% 24%,#194f8c33,transparent 28%)}
.simulator-view.night-mode .mountains{opacity:.9;filter:brightness(.45)}
.simulator-view.night-mode .ground-grid{opacity:.45}
.simulator-view.night-mode .landing-pad{border-color:#7aaaff;box-shadow:0 0 35px #437dff88}
.simulator-view.search-mode .flight-area{background:linear-gradient(#0a3140,#173a31 63%,#081b12)}
@keyframes beacon{50%{transform:scale(1.5);opacity:.35}}
@media(max-width:1000px){.missions-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.missions-grid{grid-template-columns:1fr}}

.vtag{font-size:.22em;vertical-align:middle;letter-spacing:.08em;color:#69e6ff;border:1px solid #32c9ff;padding:.25em .45em;border-radius:999px;background:#062238cc;box-shadow:0 0 16px #21c6ff55}

.level-map-section{padding:44px 3vw 56px;background:radial-gradient(circle at 50% 0,#0a2841,#030a12 55%,#02060b)}
.level-map-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:26px}.level-map-head h3{font-size:34px;margin:0;color:#f5fbff;letter-spacing:.04em}.level-map-head p{color:#8eacbe;margin:7px 0 0}.progress-summary{min-width:220px;padding:14px 16px;border:1px solid #245270;background:#061522;border-radius:12px;display:grid;gap:5px}.progress-summary span{font-size:10px;color:#91afc2;letter-spacing:.12em}.progress-summary b{color:#72e6ff;font-size:20px}.mini-btn{border:1px solid #38566a;background:#07111b;color:#8ea6b4;border-radius:6px;padding:7px 9px;font-size:10px;cursor:pointer}
.level-map{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.level-card{position:relative;min-height:255px;padding:18px;border:1px solid var(--level,#2ac8ff);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--level,#2ac8ff) 15%,#07121e),#030913 78%);box-shadow:inset 0 0 40px #0008,0 0 20px color-mix(in srgb,var(--level,#2ac8ff) 14%,transparent);overflow:hidden;transition:.25s}.level-card::after{content:"";position:absolute;inset:auto -20% -50% -20%;height:60%;background:radial-gradient(circle,var(--level,#2ac8ff) 0,transparent 65%);opacity:.1}.level-card:not(.locked):hover{transform:translateY(-7px);box-shadow:0 0 32px color-mix(in srgb,var(--level,#2ac8ff) 35%,transparent)}.level-card.locked{filter:saturate(.45);opacity:.62}.level-card.locked::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,#0002 13px 14px);z-index:1;pointer-events:none}.level-top{display:flex;justify-content:space-between;gap:10px;position:relative;z-index:2}.level-top span{font-size:11px;letter-spacing:.18em;color:#bfeeff}.level-top em{font-style:normal;font-size:9px;color:#6de4ff;border:1px solid currentColor;border-radius:999px;padding:4px 7px}.level-card.locked .level-top em{color:#8699a6}.level-icon{font-size:46px;margin:26px 0 10px;filter:drop-shadow(0 0 12px var(--level,#2ac8ff));position:relative;z-index:2}.level-card h4{margin:0;font-size:20px;position:relative;z-index:2}.level-card p{font-size:11px;line-height:1.5;color:#8eaabe;min-height:34px;position:relative;z-index:2}.level-start{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;border:1px solid var(--level,#2ac8ff);background:#061421dd;color:white;border-radius:7px;padding:10px;cursor:pointer}.level-card.locked .level-start{border-color:#42515a;color:#71838d;background:#071017;cursor:not-allowed}.tier-basic{--level:#2acbff}.tier-operator{--level:#8ee653}.tier-patrol{--level:#9b6eff}.tier-master{--level:#ffc547}.master-card{background:linear-gradient(180deg,#3b2908,#0a0b0d 75%);box-shadow:inset 0 0 70px #ffb90014}.tier-legend{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:24px;color:#91aabb;font-size:10px;letter-spacing:.1em}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.dot.basic{background:#2acbff}.dot.operator{background:#8ee653}.dot.patrol{background:#9b6eff}.dot.master{background:#ffc547}.lock-big{font-size:64px;filter:drop-shadow(0 0 18px #57cfff)}
.generic-marker{position:absolute;display:none;place-items:center;width:110px;height:70px;border:3px solid #6ee6ff;border-radius:15px;box-shadow:0 0 28px #42dbff66;background:#05243888}.generic-marker.show{display:grid}.generic-marker span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#b9f8ff}.disaster-marker{left:68%;top:52%;border-color:#ffca4e;box-shadow:0 0 28px #ffb33a66}.patrol-marker{width:72px;height:72px;border-radius:50%;border-color:#9f73ff;box-shadow:0 0 25px #8658ff66}.ppoint1{left:22%;top:48%}.ppoint2{left:52%;top:33%}.ppoint3{left:78%;top:57%}.master-marker{left:50%;top:48%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;border-color:#ffd45d;box-shadow:0 0 55px #ffb51a88;background:radial-gradient(circle,#7c5a1244,#16100599)}.master-marker span{font-size:15px;color:#ffe58f}
@media(max-width:1200px){.level-map{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.level-map{grid-template-columns:repeat(2,1fr)}.level-map-head{align-items:flex-start;flex-direction:column}}@media(max-width:500px){.level-map{grid-template-columns:1fr}}


/* v4.1 CARD LAYOUT FALLBACK — force card UI even on browsers with limited color-mix support */
.level-map-section{
  padding:44px 3vw 56px!important;
  background:linear-gradient(180deg,#03101c 0%,#02060c 100%)!important;
  color:#fff!important;
}
.level-map-head{
  display:flex!important;
  justify-content:space-between!important;
  gap:24px!important;
  align-items:flex-end!important;
  margin-bottom:26px!important;
}
.level-map-head h3{font-size:34px!important;margin:0!important;color:#fff!important}
.progress-summary{
  min-width:220px!important;padding:14px 16px!important;border:1px solid #245270!important;
  background:#061522!important;border-radius:12px!important;display:grid!important;gap:5px!important;
}
.level-map{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
}
.level-card{
  position:relative!important;
  min-height:255px!important;
  padding:18px!important;
  border:1px solid #29c9ff!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#08263b 0%,#03101c 72%,#020812 100%)!important;
  box-shadow:inset 0 0 38px rgba(0,0,0,.55),0 0 22px rgba(41,201,255,.13)!important;
  overflow:hidden!important;
  display:block!important;
  color:#fff!important;
}
.level-card.tier-operator{border-color:#7ce34e!important;background:linear-gradient(180deg,#11351f 0%,#06150d 72%,#020812 100%)!important}
.level-card.tier-patrol{border-color:#9b6eff!important;background:linear-gradient(180deg,#241740 0%,#0d0b1e 72%,#020812 100%)!important}
.level-card.tier-master{border-color:#ffc547!important;background:linear-gradient(180deg,#3a2808 0%,#151006 72%,#050402 100%)!important}
.level-card.locked{opacity:.56!important;filter:saturate(.55)!important}
.level-card:not(.locked):hover{transform:translateY(-6px)!important;box-shadow:0 0 30px rgba(41,201,255,.26)!important}
.level-top{display:flex!important;justify-content:space-between!important;gap:10px!important}
.level-top span{font-size:11px!important;letter-spacing:.18em!important;color:#bfeeff!important}
.level-top em{font-style:normal!important;font-size:9px!important;color:#71e8ff!important;border:1px solid currentColor!important;border-radius:999px!important;padding:4px 7px!important}
.level-card.locked .level-top em{color:#81919a!important}
.level-icon{font-size:46px!important;margin:26px 0 10px!important}
.level-card h4{margin:0!important;font-size:20px!important;color:#fff!important}
.level-card p{font-size:11px!important;line-height:1.5!important;color:#8eaabe!important;min-height:34px!important}
.level-start{
  position:absolute!important;left:16px!important;right:16px!important;bottom:16px!important;
  border:1px solid #2acbff!important;background:#061421!important;color:#fff!important;
  border-radius:7px!important;padding:10px!important;cursor:pointer!important;
}
.tier-operator .level-start{border-color:#7ce34e!important}
.tier-patrol .level-start{border-color:#9b6eff!important}
.tier-master .level-start{border-color:#ffc547!important}
.level-card.locked .level-start{border-color:#46545d!important;color:#778892!important;background:#071017!important;cursor:not-allowed!important}
.tier-legend{display:flex!important;justify-content:center!important;gap:24px!important;flex-wrap:wrap!important;margin-top:24px!important;color:#91aabb!important;font-size:10px!important}
@media(max-width:1200px){.level-map{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){.level-map{grid-template-columns:repeat(2,minmax(0,1fr))!important}.level-map-head{align-items:flex-start!important;flex-direction:column!important}}
@media(max-width:500px){.level-map{grid-template-columns:1fr!important}}

/* ===== v5.0 FLIGHT VISUAL UPGRADE ===== */
.flight-area{
  background:
    radial-gradient(circle at 70% 20%,rgba(255,181,84,.08),transparent 28%),
    linear-gradient(#0b2e4e,#0a1a28 63%,#050d14)!important;
}
.speed-lines{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    linear-gradient(90deg,transparent 0 49%,rgba(84,217,255,.0) 50%,transparent 51%),
    repeating-linear-gradient(90deg,transparent 0 8%,rgba(98,220,255,.12) 8.3%,transparent 8.6% 16%);
  transform:skewY(-10deg) scaleX(1.4);
  filter:blur(.5px);
  transition:opacity .2s;
  mix-blend-mode:screen;
}
.speed-lines.active{opacity:.55;animation:speedShift .22s linear infinite}
.engine-indicator{
  position:absolute;right:20px;top:20px;z-index:7;
  padding:9px 12px;border:1px solid rgba(85,230,255,.45);border-radius:8px;
  background:rgba(2,15,25,.72);backdrop-filter:blur(6px);
  display:grid;gap:2px;min-width:94px;text-align:right;
}
.engine-indicator span{font-size:8px;letter-spacing:.15em;color:#8cb8c9}
.engine-indicator b{font-size:13px;color:#70e7ff;text-shadow:0 0 12px #25d9ff88}
.real-drone{
  width:220px!important;height:150px!important;
  transform-style:preserve-3d!important;
  transition:filter .12s!important;
  will-change:transform,left,top;
}
.real-drone .arm{
  height:12px!important;
  background:linear-gradient(180deg,#6d7f88,#2c3a41 42%,#11181c 100%)!important;
  box-shadow:inset 0 1px #b1c0c8,inset 0 -2px #06090b,0 3px 6px #0008!important;
}
.real-drone .motor{
  width:24px!important;height:24px!important;
  background:radial-gradient(circle at 45% 35%,#b7c2c7 0 10%,#52636b 11% 28%,#1d272c 29% 72%,#050708 73%)!important;
  border:1px solid #64757c!important;
  box-shadow:0 0 10px #4fe8ff55,inset 0 0 8px #000!important;
}
.real-drone .prop{
  width:76px!important;height:18px!important;border:0!important;
  border-radius:50%!important;opacity:.82!important;
  background:radial-gradient(ellipse at center,rgba(70,229,255,.0) 0 28%,rgba(75,232,255,.42) 30%,rgba(75,232,255,.1) 48%,transparent 56%)!important;
  box-shadow:0 0 16px #39dfff66!important;
  animation:spin .045s linear infinite!important;
}
.real-drone .prop i{
  position:absolute;left:50%;top:50%;width:72px;height:4px;transform:translate(-50%,-50%);
  border-radius:6px;background:linear-gradient(90deg,transparent,#c8f7ff 25%,#62e9ff 50%,#c8f7ff 75%,transparent);
  filter:blur(.2px);opacity:.75;
}
.real-drone.fast .prop{animation-duration:.026s!important;filter:blur(1.1px)!important;opacity:.5!important}
.real-drone .shell-top{
  left:67px!important;top:40px!important;width:86px!important;height:50px!important;
  background:
    linear-gradient(145deg,#9caab0 0%,#4b5a60 18%,#1f2a30 55%,#0f1519 100%)!important;
  box-shadow:inset 0 2px #d5e0e4,inset -8px -8px 15px #0008,0 0 20px #17d8ff22!important;
  clip-path:polygon(18% 0,82% 0,100% 45%,82% 100%,18% 100%,0 45%)!important;
}
.shell-highlight{
  position:absolute;left:78px;top:47px;width:58px;height:13px;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:rotate(-8deg);filter:blur(.4px);
}
.real-drone .shell-mid{
  left:84px!important;top:78px!important;width:52px!important;height:28px!important;
  background:linear-gradient(#1f2a2f,#080c0e)!important;border-radius:5px 5px 12px 12px!important;
  box-shadow:inset 0 1px #4d5f66!important;
}
.camera-gimbal{
  left:94px!important;top:99px!important;width:34px!important;height:31px!important;
  background:linear-gradient(#586a72,#101518)!important;border:2px solid #82939b!important;
  box-shadow:0 4px 7px #0009!important;
}
.lens{width:18px!important;height:18px!important}
.landing-leg{
  position:absolute;top:103px;width:8px;height:28px;background:linear-gradient(#39474e,#11181b);border-radius:4px;
  transform-origin:top;box-shadow:0 2px 4px #0008;
}
.leg1{left:79px;transform:rotate(12deg)}.leg2{right:79px;transform:rotate(-12deg)}
.nav-light{
  position:absolute;width:6px;height:6px;border-radius:50%;background:#7beaff;
  box-shadow:0 0 8px #7beaff,0 0 16px #38cfff;
  animation:navBlink 1.2s ease-in-out infinite;
}
.nl1{left:47px;top:55px}.nl2{right:47px;top:55px;animation-delay:.6s}
.real-drone.idle-wobble{animation:idleWobble 2.4s ease-in-out infinite}
.real-drone.climbing{animation:climbShake .16s linear infinite}
.real-drone.landing{animation:landingSettle .28s ease-in-out infinite}
.flight-area.speeding .ground-grid{animation:gridRush .24s linear infinite}
.flight-area.speeding .mountains{filter:blur(.6px) brightness(.95)}
.flight-area.speeding .horizon{box-shadow:0 0 40px #4ae5ff88}
@keyframes speedShift{to{transform:skewY(-10deg) translateX(-80px) scaleX(1.4)}}
@keyframes idleWobble{0%,100%{translate:0 0}25%{translate:0 -1.5px}50%{translate:1px .5px}75%{translate:-1px -1px}}
@keyframes climbShake{0%{translate:-1px -1px}50%{translate:1px 1px}100%{translate:-1px 0}}
@keyframes landingSettle{0%,100%{translate:0 0}50%{translate:0 1.5px}}
@keyframes gridRush{to{background-position:0 40px,60px 0}}
@keyframes navBlink{50%{opacity:.22;transform:scale(.75)}}

/* =========================================================
   IDP v5.3 FIXED OUTDOOR FLIGHT ENVIRONMENT
   Keeps original v5.0 home / 10-level UI intact.
   ========================================================= */
.flight-area{
  background:#0a2435!important;
  perspective:1000px!important;
}
.outdoor-photo-layer{
  position:absolute;inset:-4%;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(5,19,30,.04),rgba(5,19,30,.18)),
    url('../img/outdoor-training-bg.png') center 63%/cover no-repeat;
  filter:brightness(.88) saturate(1.06);
  transform:scale(1.05);
  will-change:transform;
}
.outdoor-depth{position:absolute;inset:0;pointer-events:none;z-index:1;will-change:transform}
.depth-far{
  background:
    radial-gradient(circle at 50% 45%,transparent 0 35%,rgba(2,12,20,.05) 60%,rgba(2,12,20,.16) 100%);
}
.depth-near{
  background:linear-gradient(180deg,transparent 0 58%,rgba(2,18,14,.08) 72%,rgba(0,8,5,.18) 100%);
}
.training-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
.legacy-mountains{display:none!important}
.flight-area .ground-grid{opacity:.14!important;z-index:3!important}
.flight-area .horizon{opacity:.3!important;z-index:4!important}
.flight-area .landing-pad{
  z-index:7!important;
  background:radial-gradient(ellipse at center,rgba(34,43,39,.96) 0 56%,rgba(16,24,21,.98) 57% 100%)!important;
  border:6px solid #ffd24a!important;
  box-shadow:0 0 30px rgba(255,210,74,.75),0 14px 18px rgba(0,0,0,.35)!important;
}
.flight-area .landing-pad span{color:#fff!important;text-shadow:0 0 9px #fff}
.safety-cone{
  position:absolute;width:26px;height:46px;
  background:linear-gradient(#ff6a1a 0 33%,#fff 34% 47%,#ff6a1a 48% 86%,#242424 87%);
  clip-path:polygon(50% 0,78% 80%,100% 82%,100% 100%,0 100%,0 82%,22% 80%);
  filter:drop-shadow(0 7px 4px rgba(0,0,0,.45));
}
.oc1{left:29%;top:68%}.oc2{left:37%;top:56%;transform:scale(.8)}
.oc3{right:29%;top:68%}.oc4{right:37%;top:56%;transform:scale(.8)}
.training-gate{
  position:absolute;left:50%;top:49%;width:112px;height:102px;transform:translateX(-50%);
  border:8px solid rgba(255,190,41,.94);border-radius:10px;
  box-shadow:0 0 22px rgba(255,190,41,.4),inset 0 0 16px rgba(255,190,41,.2);
}
.training-gate span{
  position:absolute;left:50%;top:-25px;transform:translateX(-50%);
  white-space:nowrap;padding:4px 7px;border-radius:5px;background:rgba(41,29,4,.8);
  color:#ffe17a;font-size:8px;letter-spacing:.08em;
}
.real-drone,.hover-zone,.flight-ring,.wildfire-zone,.target-marker,.missing-person,.coord-box,.night-beacon,.generic-marker{z-index:9!important}
.speed-lines,.engine-indicator,.mission-box{z-index:12!important}
.flight-area.outdoor-moving .outdoor-photo-layer{filter:brightness(.91) saturate(1.08) blur(.18px)}
.flight-area.outdoor-moving .training-overlay{transform:scale(1.012)}
.simulator-view.night-mode .outdoor-photo-layer{filter:brightness(.26) saturate(.65) hue-rotate(7deg)}
.simulator-view.night-mode .depth-near{background:linear-gradient(180deg,rgba(1,5,15,.2),rgba(1,5,15,.54))}
.simulator-view.search-mode .outdoor-photo-layer{filter:brightness(.7) saturate(1.12)}

/* v5.4 control semantics: W/S = forward/back depth, arrows = altitude only */
.flight-area.outdoor-moving .outdoor-photo-layer{transition:filter .08s}
.training-overlay{transition:transform .08s linear}

/* v5.5 CONTROL FIX
   W/S changes scene depth only; arrow keys change altitude only. */
.flight-area .landing-pad{transition:transform .08s linear}

/* ===== v5.6 HERO CLEANUP =====
   Background image already contains IDP logo/title, so duplicate overlay branding is removed. */
.hero-content{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:center!important;
  height:100%!important;
  padding:0 0 58px!important;
}
.hero-clean-title{
  width:min(900px,90vw);
  padding:14px 22px 10px;
  border:1px solid rgba(66,205,255,.35);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(2,14,25,.70),rgba(2,8,16,.88));
  backdrop-filter:blur(8px);
  box-shadow:0 0 30px rgba(0,0,0,.35);
}
.hero-clean-title h3{
  margin:2px 0 5px!important;
  font-size:clamp(22px,2.4vw,35px)!important;
  color:#ffd36e!important;
}
.hero-clean-title .hero-copy{margin:0;color:#d9edf7!important}
.hero .hero-actions{margin:14px 0 12px!important}
.hero .progress-strip{background:rgba(2,10,18,.80)!important}
.hero-logo{display:none!important}
.hero h2{display:none!important}

/* Strong visual confirmation that W/S is depth, not altitude */
.engine-indicator:after{
  content:"W/S = FORWARD / BACK";
  display:block;
  margin-top:3px;
  font-size:7px;
  letter-spacing:.09em;
  color:#7de9ff;
}

/* ===== v5.7 CLEANUP ===== */

/* Boot emblem: remove visible square corners; show only circular emblem. */
.boot-logo{
  border-radius:50%!important;
  clip-path:circle(49% at 50% 50%)!important;
  background:transparent!important;
  box-shadow:none!important;
}
.boot-card{background:transparent!important}

/* Hero: background art remains, but NO duplicate text/logo overlays. */
.hero-content{
  justify-content:flex-end!important;
  padding:0 0 42px!important;
  pointer-events:none;
}
.hero-control-dock{
  pointer-events:auto;
  width:min(980px,92vw);
  padding:14px 18px;
  border:1px solid rgba(50,205,255,.38);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(1,13,24,.72),rgba(1,7,14,.90));
  backdrop-filter:blur(8px);
  box-shadow:0 12px 40px rgba(0,0,0,.42);
}
.hero-control-dock .hero-actions{margin:0 0 12px!important}
.hero-control-dock .progress-strip{margin:0!important}

/* Use CLEAN photo background: no duplicate dashboard/drone/H/cones. */
.outdoor-photo-layer{
  background:
    linear-gradient(180deg,rgba(3,18,27,.06),rgba(2,13,18,.14)),
    url('../img/outdoor-training-clean.jpg') center 54%/cover no-repeat!important;
}

/* Disable old extra training objects entirely. */
.training-overlay,.safety-cone,.training-gate{display:none!important}

/* Keep ONE landing H only. */
.flight-area .landing-pad{
  border:6px solid #ffd34d!important;
  background:radial-gradient(ellipse at center,#39433d 0 56%,#202824 57% 100%)!important;
  box-shadow:0 0 26px rgba(255,211,77,.72),0 10px 18px rgba(0,0,0,.28)!important;
}

/* More obvious depth travel, smooth transitions. */
.outdoor-photo-layer,.depth-far,.depth-near,.landing-pad{
  will-change:transform;
}

/* ===== v5.8 CONTINUOUS FLIGHT FIX ===== */
.boot-logo{
  background:transparent!important;
  border-radius:50%!important;
  box-shadow:none!important;
  clip-path:none!important;
  filter:drop-shadow(0 0 28px rgba(231,173,58,.48))!important;
}
.outdoor-photo-layer{
  background:
    linear-gradient(180deg,rgba(3,16,24,.04),rgba(0,12,8,.10)),
    url('../img/outdoor-training-clean-v58.jpg') center 52%/cover no-repeat!important;
}
.training-overlay,.safety-cone,.training-gate{display:none!important}
.flight-area .landing-pad{
  border:5px solid #ffd34d!important;
  background:radial-gradient(ellipse at center,#39433d 0 56%,#202824 57% 100%)!important;
  box-shadow:0 0 22px rgba(255,211,77,.62),0 10px 16px rgba(0,0,0,.24)!important;
}