*{box-sizing:border-box}
:root{--bg:#070910;--panel:#0e131d;--line:rgba(255,255,255,.08);--text:#f6f8fc;--muted:#8793a6;--blue:#4788ff;--purple:#7757ff;--green:#38d98b}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(circle at 20% 0,rgba(71,136,255,.12),transparent 30%),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
.page{width:min(1300px,calc(100% - 40px));margin:auto;padding:38px 0 80px}

.hero{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;padding:55px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(120deg,#121a29,#090d15);animation:heroIn .6s ease}
.hero:after{content:"";position:absolute;width:500px;height:500px;right:-170px;top:-270px;border-radius:50%;background:var(--blue);filter:blur(120px);opacity:.2;animation:glow 7s ease-in-out infinite alternate}
.hero-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.025) 50%,transparent 51%),linear-gradient(transparent 49%,rgba(255,255,255,.025) 50%,transparent 51%);background-size:50px 50px;animation:gridMove 14s linear infinite}
.hero-copy{position:relative;z-index:2;max-width:720px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(71,136,255,.2);border-radius:7px;background:rgba(71,136,255,.07);color:#82adff;font-size:12px;font-weight:900;letter-spacing:.12em}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite}
.hero h1{margin:17px 0;font-size:clamp(50px,6vw,80px);line-height:.91;letter-spacing:-.06em}
.hero h1 strong{color:#6ea2ff}
.hero p{max-width:680px;margin:0;color:var(--muted);font-size:18px;line-height:1.65}
.hero-word{position:absolute;right:15px;bottom:-40px;color:rgba(255,255,255,.024);font-size:190px;font-weight:1000}

.picker{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr);gap:12px;margin-top:14px}
.map-panel,.control-panel{border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.map-panel{overflow:hidden}

.map-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:20px;border-bottom:1px solid var(--line)}
.eyebrow{display:block;color:#689aff;font-size:11px;font-weight:900;letter-spacing:.16em}
.map-toolbar h2,.control-panel h2{margin:5px 0 0;font-size:27px}
.map-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.map-actions button{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#090d14;color:#78859a;font-size:10px;font-weight:900;letter-spacing:.07em;cursor:pointer;transition:.2s}
.map-actions button:hover,.map-actions button.active{border-color:rgba(71,136,255,.35);color:#91b7ff;background:#121b2a}

.map-wrap{position:relative;overflow:hidden;background:#080c12}
.map-wrap>img{display:block;width:100%;height:auto}
.map-wrap:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(0,0,0,.38)}

.landmark-labels{position:absolute;z-index:4;inset:0;display:none;pointer-events:none}
.landmark-labels.show{display:block}
.landmark-label{position:absolute;transform:translate(-50%,-50%);padding:4px 6px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(5,8,13,.72);color:#e7edf7;font-size:9px;font-weight:800;line-height:1.1;text-align:center;text-shadow:0 1px 3px #000;white-space:nowrap;backdrop-filter:blur(4px);transition:.2s}
.landmark-label:after{content:"";position:absolute;width:4px;height:4px;left:50%;bottom:-7px;transform:translateX(-50%);border-radius:50%;background:#8db5ff;box-shadow:0 0 6px #4788ff}
.landmark-label.selected{z-index:10;padding:6px 9px;border-color:#7ba9ff;background:#101c30;color:#fff;font-size:11px;box-shadow:0 0 20px rgba(71,136,255,.45)}
.landmark-label.selected:after{width:6px;height:6px;background:#fff;box-shadow:0 0 10px var(--blue)}

.marker{position:absolute;z-index:8;width:30px;height:30px;transform:translate(-50%,-50%) scale(0);border:3px solid #fff;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(71,136,255,.25),0 0 35px rgba(71,136,255,.9)}
.marker:before,.marker:after{content:"";position:absolute;background:#fff}
.marker:before{width:2px;height:48px;left:11px;top:-12px}
.marker:after{width:48px;height:2px;left:-12px;top:11px}
.marker span{position:absolute;inset:-15px;border:2px solid var(--blue);border-radius:50%;animation:markerPulse 1.5s infinite}
.marker.show{animation:dropPin .55s cubic-bezier(.2,.9,.3,1.3) forwards}

.map-choice{position:absolute;z-index:7;left:16px;bottom:16px;max-width:65%;padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(7,9,16,.8);backdrop-filter:blur(8px)}
.map-choice span{display:block;color:#778499;font-size:9px;font-weight:900;letter-spacing:.12em}
.map-choice strong{display:block;overflow:hidden;margin-top:3px;font-size:18px;white-space:nowrap;text-overflow:ellipsis}

.control-panel{padding:24px}
.intro{margin:9px 0 21px;color:var(--muted);font-size:14px;line-height:1.6}

.modes{display:grid;gap:7px}
.modes button{display:flex;flex-direction:column;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:11px;background:#090d14;color:var(--text);text-align:left;cursor:pointer;transition:.2s}
.modes button:hover{transform:translateX(3px);border-color:rgba(71,136,255,.25)}
.modes button.active{border-color:rgba(71,136,255,.4);background:rgba(71,136,255,.1);box-shadow:inset 3px 0 var(--blue)}
.modes strong{font-size:15px}
.modes span{margin-top:3px;color:#6f7c90;font-size:12px}

.result{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(135deg,#111a29,#090d14)}
.result>span{display:block;color:#6c9eff;font-size:10px;font-weight:900;letter-spacing:.14em}
.result>strong{display:block;margin:6px 0;font-size:27px;line-height:1.05;letter-spacing:-.035em}
.result>p{margin:0;color:var(--muted);font-size:12px}

.pick{width:100%;height:55px;display:flex;align-items:center;justify-content:center;gap:18px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em;cursor:pointer;transition:.2s}
.pick b{font-size:21px;transition:.2s}
.pick:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(71,136,255,.22)}
.pick:hover b{transform:translateY(3px)}
.pick.rolling b{animation:spin .55s linear infinite}

.history{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.history>div{display:flex;align-items:center;justify-content:space-between}
.history button{border:0;background:transparent;color:#657186;font-size:9px;font-weight:900;cursor:pointer}
.history button:hover{color:#fff}
.history ol{list-style:none;margin:11px 0 0;padding:0}
.history li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.045);color:#718096;font-size:12px}
.history li:last-child{border-bottom:0}
.history li span{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:#121926;color:#718dbd;font-size:9px;font-weight:900}
.history li strong{color:#aeb9ca;font-weight:700}

.error{display:flex;align-items:center;gap:12px;margin-top:15px;padding:17px;border:1px solid rgba(255,80,100,.2);border-radius:13px;background:rgba(255,80,100,.06)}
.error>b{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:rgba(255,80,100,.12);color:#ff6579}
.error strong,.error span{display:block}
.error span{margin-top:2px;color:#ad7c84;font-size:12px}

@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gridMove{to{background-position:50px 50px}}
@keyframes glow{to{transform:translate(-60px,60px) scale(1.12)}}
@keyframes pulse{50%{opacity:.4}}
@keyframes markerPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes dropPin{0%{transform:translate(-50%,-120%) scale(1.5);opacity:0}70%{transform:translate(-50%,-45%) scale(.9)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:950px){
    .picker{grid-template-columns:1fr}
    .control-panel{display:grid;grid-template-columns:1fr 1fr;gap:15px}
    .control-panel>.eyebrow,.control-panel>h2,.intro,.modes,.history{grid-column:1/-1}
    .result{margin:0}
    .pick{height:auto;min-height:55px}
}

@media(max-width:650px){
    .page{width:calc(100% - 24px);padding-top:20px}
    .hero{min-height:300px;padding:35px 25px}
    .hero-word{display:none}
    .hero p{font-size:16px}
    .control-panel{display:block}
    .result{margin:18px 0}
    .map-toolbar{align-items:flex-start;flex-direction:column}
    .map-actions{justify-content:flex-start}
    .map-choice{max-width:80%}
    .map-choice strong{font-size:15px}
    .landmark-label{font-size:7px;padding:3px 4px}
    .landmark-label.selected{font-size:9px}
}

@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{animation:none!important;transition:none!important}
    .marker.show{transform:translate(-50%,-50%) scale(1)}
}