*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#06121a;color:#e8f0e6;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
canvas#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:normal;margin:.2em 0}
h2{font-size:26px;color:#ffe6a8;text-shadow:0 0 18px rgba(255,210,120,.35)}
h3{font-size:16px;color:#cfe3c8;margin-top:12px}
.dim{color:#8ea596}.dim2{color:#b2c6b8}.small{font-size:13px}
b{color:#fff3cf}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto;z-index:10}
.screen.top{align-items:flex-start;padding-top:max(14px,4vh)}
.screen.right{justify-content:flex-end;align-items:stretch;padding-top:60px}
.screen.shade{background:radial-gradient(ellipse at center,rgba(4,14,20,.55),rgba(2,8,12,.85))}
.panel{background:linear-gradient(180deg,rgba(14,32,38,.92),rgba(8,20,26,.94));border:1px solid rgba(255,214,140,.22);border-radius:18px;padding:18px 22px;box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 30px rgba(255,210,120,.04);max-width:720px;width:100%;text-align:center;margin:auto 0}
.screen.top .panel{margin:0}
.panel.menu{max-width:560px;background:linear-gradient(180deg,rgba(10,26,32,.82),rgba(8,20,26,.72));backdrop-filter:blur(3px)}
.title{font-size:clamp(40px,8vw,64px);letter-spacing:2px;color:#ffe9b8;text-shadow:0 0 24px rgba(255,200,110,.6),0 0 60px rgba(255,180,90,.3);margin:0;font-style:italic}
.title span{color:#9fe6c8;text-shadow:0 0 24px rgba(120,230,190,.6)}
.tag{color:#b8cdbf;margin:.3em 0 .8em;font-style:italic;font-family:Georgia,serif}
.big{font-size:22px;padding:12px 38px;border-radius:40px;border:0;margin:6px}
.btn{padding:8px 16px;border-radius:22px;border:1px solid rgba(255,220,150,.28);background:rgba(255,230,170,.07);margin:4px;position:relative}
.btn:hover,.btn:focus-visible{background:rgba(255,230,170,.16);outline:none}
.btn:disabled{opacity:.4;cursor:default}
.primary{background:linear-gradient(180deg,#ffd98a,#f0a94e);color:#2a1606;font-weight:700;box-shadow:0 0 24px rgba(255,190,90,.45);border:0}
.primary:hover,.primary:focus-visible{filter:brightness(1.08);outline:2px solid #fff3cf;outline-offset:2px;background:linear-gradient(180deg,#ffe2a0,#f4b460)}
.ghost{background:transparent;border-color:rgba(255,255,255,.15);color:#a9bcae}
.link{background:none;border:0;color:#bcd6c4;text-decoration:underline;text-underline-offset:3px;padding:4px 6px;font-size:13px}
.glow{box-shadow:0 0 16px rgba(160,240,190,.5);border-color:#9fe6c8}
.badge{display:inline-block;background:#9fe6c8;color:#06221a;border-radius:10px;font-size:11px;padding:1px 7px;margin-left:4px;font-weight:700}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffd27a;vertical-align:middle}
.row{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0}
.col{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:10px}
.sels{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.selbox label{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#8ea596}
.cyc{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border-radius:20px;padding:2px}
.cyc button{background:none;border:0;font-size:20px;width:30px;color:#ffe0a0}
.cyc span{min-width:130px}
.seeds{color:#c9f0cf;margin-right:6px}
.nextu{margin:8px auto;max-width:420px}
.plabel{font-size:13px;margin-bottom:3px}
.pbar{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#7ee0b0,#ffe08a);box-shadow:0 0 10px #ffe08a}
.foot{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.news{text-align:left;font-size:13px;max-height:180px;overflow:auto;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 12px;margin-top:6px}
.news ul{margin:4px 0 10px;padding-left:18px}
.cornerbtn{position:fixed;top:10px;z-index:20;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,220,150,.25);background:rgba(8,22,28,.6);font-size:18px}
.abil{position:fixed;right:16px;bottom:16px;z-index:20;display:flex;gap:12px;align-items:flex-end}
.ab{--cd:0;position:relative;width:70px;height:70px;border-radius:50%;border:2px solid rgba(255,220,150,.45);background:rgba(10,26,32,.7);font-size:28px;overflow:hidden;touch-action:none}
.ab::after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.6) calc(var(--cd)*360deg),transparent 0);border-radius:50%;pointer-events:none}
.ab.ready{box-shadow:0 0 18px rgba(255,210,120,.6);border-color:#ffd98a}
.ab small{position:absolute;left:0;right:0;bottom:6px;font-size:10px;color:#e8d8b0;z-index:1}
.tut{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:15;background:rgba(8,22,28,.82);border:1px solid rgba(255,214,140,.4);padding:10px 18px;border-radius:14px;max-width:min(560px,92vw);text-align:center;pointer-events:none;font-size:16px}
.tut.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:translateX(-50%) scale(.85);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
.ghint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:15;background:rgba(8,22,28,.75);padding:6px 14px;border-radius:12px;font-size:13px;pointer-events:none;max-width:90vw;text-align:center}
.tip{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:30;background:rgba(14,34,30,.94);border:1px solid #9fe6c8;padding:10px 18px;border-radius:12px;max-width:90vw;text-align:center;pointer-events:none}
.toast{position:fixed;right:14px;bottom:100px;z-index:30;background:rgba(10,26,32,.94);border:1px solid rgba(255,214,140,.35);border-radius:14px;padding:8px 12px;display:flex;gap:8px;align-items:center;transition:opacity 1s}
.toast.fade{opacity:0}
.toast button{background:rgba(255,255,255,.07);border:0;border-radius:8px;font-size:20px;padding:2px 8px}
/* map */
.panel.mapp{max-width:980px}
.maphead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
#mapSvg{width:100%;height:auto;max-height:52vh;display:block;margin:4px 0}
#mapSvg .ln{stroke:rgba(200,220,210,.18);stroke-width:3;stroke-dasharray:4 8}
#mapSvg .ln.avail{stroke:#ffe29a;stroke-width:4;stroke-dasharray:10 8;animation:dash 1.2s linear infinite}
#mapSvg .ln.done{stroke:#ffd27a;stroke-dasharray:none;opacity:.8}
@keyframes dash{to{stroke-dashoffset:-36}}
#mapSvg .nc{fill:#0d2228;stroke:rgba(190,215,200,.35);stroke-width:3}
#mapSvg .ni{font-size:30px;text-anchor:middle;pointer-events:none;opacity:.55}
#mapSvg .boss .ni{font-size:38px}
#mapSvg .av{cursor:pointer}
#mapSvg .av .nc{stroke:#ffe29a;fill:#173238}
#mapSvg .av .ni,#mapSvg .dn .ni,#mapSvg .cur .ni{opacity:1}
#mapSvg .dn .nc{fill:#2b2a18;stroke:#ffd27a}
#mapSvg .sel .nc{stroke:#fff;stroke-width:5;fill:#23464a}
#mapSvg .halo{animation:pulse 1.6s ease-in-out infinite}
#mapSvg .you{fill:#ffe9b8;font-size:16px;text-anchor:middle;font-family:Georgia,serif}
@keyframes pulse{50%{opacity:.35}}
.info{min-height:40px;padding:6px;font-size:15px}
.hint2{background:rgba(160,240,190,.1);border-radius:10px;padding:5px 10px;color:#c9f0cf}
.build{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;font-size:22px;margin-top:6px}
.build.inline{display:inline-flex;font-size:18px}
.build sub{font-size:10px;color:#ffe29a}
/* cards */
.panel.cardsp,.panel.nodep{max-width:860px}
.cards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.card{position:relative;width:220px;min-height:230px;padding:14px 12px;border-radius:16px;border:1px solid rgba(255,214,140,.3);background:linear-gradient(180deg,rgba(30,56,58,.95),rgba(14,30,34,.95));text-align:center;transition:transform .12s,box-shadow .12s}
.card.small{width:180px;min-height:170px}
.card.sel,.card:hover{transform:translateY(-4px);box-shadow:0 0 26px rgba(255,210,120,.45);border-color:#ffd98a}
.card.active{border-color:#9fe6c8}
.card.dis{opacity:.45}
.card .key{position:absolute;left:10px;top:8px;font-size:12px;color:#8ea596}
.cicon{font-size:44px;margin:4px 0}
.cname{font-family:Georgia,serif;font-size:19px;color:#ffe9b8}
.clv{font-size:12px;color:#9fe6c8;margin:2px 0}.clv.new{color:#ffd27a;font-weight:700}
.cdesc{font-size:14px;color:#cfdcd2;margin-top:6px}
.scost{margin-top:8px;color:#ffe29a;font-weight:700}
.pips{display:flex;gap:4px;justify-content:center;margin:4px 0}
.pips i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.pips i.on{background:#ffd27a;box-shadow:0 0 6px #ffd27a}.pips i.next{background:#9fe6c8}
.shake{animation:shk .35s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* grove */
.panel.grove{max-width:430px;height:100%;overflow:auto;text-align:left;margin:0;border-radius:18px}
.ghead{display:flex;justify-content:space-between;align-items:center}
.slist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sitem{text-align:left;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:grid;grid-template-columns:34px 1fr;column-gap:6px}
.sitem .sicon{font-size:26px;grid-row:span 4}
.sitem .sname{font-family:Georgia,serif;color:#ffe9b8}
.sitem .sdesc{font-size:12px;color:#b2c6b8}
.sitem .pips{justify-content:flex-start}
.sitem .scost{margin-top:4px;font-size:13px}
.sitem.can{border-color:#9fe6c8;box-shadow:0 0 10px rgba(160,240,190,.25)}
.sitem.maxed{opacity:.6}.sitem.maxed .scost{color:#9fe6c8}
/* pause/end/fb */
.toggles{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.tog{padding:6px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.tog.on{border-color:#9fe6c8;background:rgba(160,240,190,.12)}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0;align-items:center}
.chip{padding:5px 11px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);font-size:13px}
.chip.on{border-color:#ffd98a;background:rgba(255,210,120,.18)}
textarea{width:100%;background:rgba(0,0,0,.3);color:#e8f0e6;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px;font:inherit;resize:vertical;margin:6px 0;user-select:text;-webkit-user-select:text}
.why{margin:10px 0;padding:8px;border-radius:12px;background:rgba(0,0,0,.18)}
#endTitle{font-size:32px}#endTitle.win{color:#ffe9b8}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0}
@media (max-width:800px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:rgba(255,255,255,.04);border-radius:12px;padding:8px;position:relative}
.stat.best{border:1px solid #ffd27a;box-shadow:0 0 14px rgba(255,210,120,.3)}
.sv{font-size:22px;color:#fff3cf;font-family:Georgia,serif}.sl{font-size:12px;color:#8ea596}
.nb{font-size:10px;color:#ffd27a;font-weight:700;letter-spacing:1px}.pb{font-size:10px;color:#6f8a7a}
.seedline{font-size:18px;color:#c9f0cf}
.react{margin:10px 0;padding:8px;border-radius:12px;background:rgba(0,0,0,.18)}
.emo{display:flex;gap:10px;justify-content:center;margin:4px 0}
.emo button{font-size:30px;background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:14px;padding:4px 10px}
.emo button.on{border-color:#ffd98a;background:rgba(255,210,120,.18);transform:scale(1.1)}
.panel.fbp{max-width:520px;position:relative;text-align:left}
.x{position:absolute;right:12px;top:10px;background:none;border:0;font-size:20px;color:#a9bcae}
label.sl{display:grid;grid-template-columns:1fr 150px 20px;gap:8px;align-items:center;margin:6px 0;font-size:14px}
input[type=range]{accent-color:#ffd27a;width:100%}
@media (max-width:640px){
 .tut{top:92px;font-size:14px;padding:8px 12px}
 #mapSvg{max-height:none}
 .panel{padding:14px 12px}.big{font-size:19px;padding:10px 28px}
 .card{width:100%;min-height:0;display:grid;grid-template-columns:56px 1fr;text-align:left;column-gap:8px}
 .card .cicon{grid-row:span 4;font-size:36px}.card .key{display:none}.card .pips{justify-content:flex-start}
 .panel.grove{max-width:100%}.slist{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
 .ab{width:62px;height:62px}
}
@media (max-height:520px){.screen.top{padding-top:6px}.title{font-size:36px}.tag{display:none}}
/* ---- v2.2: map labels + legend, event clarity, Privacy-pill clearance ---- */
#mapSvg .nl{fill:#cfe3d6;font-size:21px;text-anchor:middle;pointer-events:none;font-family:system-ui,sans-serif;opacity:.6;paint-order:stroke;stroke:#06141a;stroke-width:5px}
#mapSvg .av .nl,#mapSvg .cur .nl{opacity:1;fill:#ffe9b8}
#mapSvg .boss .nl{font-size:23px}
.legend{text-align:left;background:rgba(143,227,255,.07);border:1px solid rgba(143,227,255,.25);border-radius:12px;padding:6px 12px;margin:6px 0;font-size:14px}
.legend .lgh{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#bfeaff}
.legend .lgh .btn{margin:0;padding:4px 12px;font-size:13px}
.legend ul{margin:4px 0 2px;padding:0;list-style:none}
.legend li{margin:3px 0;line-height:1.35}
.legend .li{display:inline-block;width:1.5em;text-align:center}
.info.ev{background:rgba(255,226,154,.07);border-radius:10px}
.ntext{margin:6px 0 4px}
.evkind{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bfeaff;border:1px solid rgba(143,227,255,.35);border-radius:10px;padding:2px 10px;margin-bottom:4px}
.evstory{font-size:17px;margin:6px 0 8px}
.evnote{margin:6px 0 0}
.curline{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:14px;margin:6px 0}
.curline span{background:rgba(255,230,170,.06);border-radius:10px;padding:3px 10px}
.curline i{font-style:normal;color:#8ea596;font-size:12px;margin-left:4px}
.evrow{gap:10px}
.btn.evbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:min(520px,100%);text-align:left;padding:10px 16px;border-radius:14px}
.btn.evbtn:hover:not([disabled]),.btn.evbtn:focus-visible{border-color:#ffe29a;background:rgba(255,230,170,.14)}
.btn.evbtn[disabled]{opacity:.5}
.evl{font-size:17px;font-weight:600;color:#fff1d0}
.evfx{font-size:15px;color:#ffe29a}
.rk{font-size:11px;font-weight:600;border-radius:8px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.rk.safe{background:rgba(160,240,190,.16);color:#a8f0c0}.rk.trade{background:rgba(143,227,255,.14);color:#bfeaff}.rk.gamble{background:rgba(255,150,120,.16);color:#ffb89a}
.evres{display:inline-flex;flex-direction:column;gap:6px;text-align:left;margin:4px auto 8px;min-width:min(420px,100%)}
.dl{background:rgba(255,255,255,.04);border-radius:10px;padding:6px 12px;font-size:16px}
.dl span{color:#8ea596}.dl small{display:block;color:#b2c6b8;font-size:13px;margin-top:2px}
.dl.up{border-left:3px solid #8fe3a8}.dl.down{border-left:3px solid #ff8a8a}.dl.note{border-left:3px solid #8fb6ff;color:#cfe0ff}
/* the site's Privacy pill sits at bottom-left: keep scrolling content and hints clear of it */
.screen{padding-bottom:58px}
@media (max-width:640px){
 .ghint{bottom:64px}
 .toast{bottom:150px}
 .legend{font-size:13px}
 .evstory{font-size:16px}
}
@media (max-width:640px){
 .screen:not(.right){padding-top:58px}
 .card.small{width:100%;min-height:0}
}