/* QVIRO 0.7 — investment exchange, World Tree menu, Ark of Species */
#city #scene{height:min(54dvh,510px);min-height:340px;touch-action:none}
#city #scene.qv-3d-ready .scene-head{top:35px;left:18px;opacity:.85}
#city #scene.qv-3d-ready .qv-city-caption{display:none}
#qv-world-map{position:absolute;z-index:5;inset:0;pointer-events:none;isolation:isolate}
.qv-map-sky{position:absolute;z-index:3;top:5px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.1em;color:#d6efd2;text-shadow:0 1px 3px #092b2c}
.qv-map-districts{position:absolute;inset:23px 8px 45px;pointer-events:none}
.qv-map-site{--x:50%;--y:50%;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;background:transparent;border:0;color:#e6f3df;padding:3px 3px;min-width:70px;pointer-events:auto;text-shadow:0 2px 5px #041d1d;animation:qv-map-rise .65s both;animation-delay:var(--delay);transition:transform .3s ease,filter .3s ease}
.qv-map-site:hover,.qv-map-site:active,.qv-map-site.chosen{z-index:2;filter:drop-shadow(0 0 8px #86e4be)}
.qv-map-site .qv-map-badge{width:31px;height:31px;display:grid;place-items:center;background:linear-gradient(140deg,#1b5652e8,#0c272aea);border:1px solid #9dd7b8;border-radius:11px;box-shadow:0 4px 13px #001716b9,inset 0 1px #c7f4d276;position:relative}
.qv-map-site .qv-map-badge:after{content:"";position:absolute;left:50%;top:100%;height:13px;border-left:1px dashed #c8e9c5a3}
.qv-map-site.chosen .qv-map-badge{background:#39786a;border-color:#f0e3af}
.qv-map-badge svg{width:22px;height:22px}
.qv-map-label{font-size:10px;background:#0a2827ed;padding:4px 6px;border-radius:7px;border:1px solid #577c6caa;font-weight:650;white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.qv-map-zoom{animation:qv-zoom .5s ease-in-out}
.qv-map-footer{position:absolute;z-index:3;left:12px;right:12px;bottom:9px;background:#092423e8;border:1px solid #527a6d;border-radius:10px;padding:8px;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:10px;color:#bfd5c4;pointer-events:auto}
.qv-map-footer button{background:#1b4841;border:1px solid #639789;border-radius:8px;font-size:10px;padding:5px;color:#ddf2dd}
@keyframes qv-map-rise{from{opacity:0;transform:translate(-50%,-20%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes qv-zoom{40%{transform:translate(-50%,-50%) scale(1.38);filter:drop-shadow(0 0 20px #bbffcf)}}
.qv-market-title h2,.qv-ark-head h2{font-size:26px;margin:9px 0 3px}
.qv-market-title p,.qv-ark-head p{font-size:13px;color:#b9d1c4}
.qv-market-notice{padding:10px 12px;background:#102e2b;border-left:3px solid #b3b884;border-radius:5px 10px 10px 5px;font-size:11px;color:#b4ccbf;margin:12px 0}
.qv-market-tabs,.qv-ark-menu{display:flex;gap:6px;margin:12px 0;overflow-x:auto}
.qv-market-tabs button,.qv-ark-menu button{flex:1;white-space:nowrap;font-size:12px;min-height:38px;padding:7px 6px;border:1px solid #42645c;background:#183431;border-radius:10px;color:#b6cfc5}
.qv-market-tabs button.active,.qv-ark-menu button.active{background:#88c4ad;color:#08241c;border-color:#b8ead3;font-weight:700}
.qv-market-tabs.secondary{margin-top:-6px}
.qv-market-tabs.secondary button{min-height:31px}
.qv-market-highlight{padding:15px;background:linear-gradient(146deg,#214945,#102a2e);border:1px solid #54867a;border-radius:17px;position:relative;margin-bottom:18px}
.qv-market-highlight h3{font-size:19px;margin:9px 0 2px}
.qv-market-highlight p{font-size:12px;margin:0}
.qv-market-highlight small{font-size:9px;color:#a5c1b3;letter-spacing:.12em}
.qv-trend-badge{position:absolute;right:12px;top:14px;padding:6px;background:#173a33;border-radius:9px;font-size:11px}
.up{color:#84deb6!important}.down{color:#ee9b8c!important}
.qv-pricechart{height:100px;margin:16px 0 10px;border-bottom:1px solid #47716a55;background:linear-gradient(transparent,#1a3d3b)}
.qv-pricechart svg{width:100%;height:100%}
.qv-price-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:11px 0}
.qv-price-line b{font-size:23px;color:#e3e9c2}.qv-price-line span{font-size:11px;color:#a7bdb1}
.qv-market-trade{display:flex;gap:8px}
.qv-market-trade button{flex:1;min-width:0;font-size:12px;padding:10px 3px}
.qv-market-list{border:1px solid #315750;border-radius:15px;overflow:hidden;margin:10px 0 20px}
.qv-market-row{background:#112d2d;color:#e8f1e8;border:0;border-bottom:1px solid #315650;width:100%;display:flex;align-items:center;gap:9px;padding:11px 8px;text-align:left}
.qv-market-row:last-child{border-bottom:0}
.qv-market-row.current{background:#284c46}
.qv-market-symbol{width:35px;height:35px;flex:0 0 35px;background:#2d514b;border:1px solid #53786c;border-radius:10px;display:grid;place-items:center}
.qv-market-symbol svg{height:24px;width:24px}
.qv-market-meta{flex:1;min-width:0}
.qv-market-meta b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-market-meta small{display:block;margin-top:4px;font-size:10px}
.qv-market-price{text-align:right;flex:0 0 105px}
.qv-market-price b{display:block;font-size:12px}
.qv-market-price small{display:block;font-size:10px;margin-top:3px}
.qv-market-watch{color:#b6d2b9;font-size:17px}
.qv-market-history{background:#122c2b;border:1px solid #345b53;border-radius:14px;padding:12px;margin:12px 0}
.qv-market-history div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #2b4d47;padding:7px 0;font-size:11px}
.qv-market-holdings .qv-ownrow{display:flex;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid #36524c;font-size:11px}
.qv-ownrow>span:first-child{width:28px;flex:0 0 28px}
.qv-ownrow>span:first-child svg{width:25px;height:25px}
.qv-ownrow div{flex:1;min-width:0}
.qv-ownrow b{display:block;font-size:11px}
.qv-ownrow small{display:block;font-size:10px;color:#8ead9f}
.qv-ownrow>span:not(:first-child){white-space:nowrap}
.qv-ownrow button,.qv-decor-row button{border:1px solid #648b7d;background:#2c5147;color:#d2e9d4;border-radius:8px;padding:7px;font-size:10px}
.qv-ownrow button:disabled{opacity:.35}
.qv-ark-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.qv-ark-stats span{background:#173833;border:1px solid #366959;border-radius:12px;text-align:center;padding:11px 2px;font-size:11px;color:#a9cbbc}
.qv-ark-stats b{display:block;font-size:17px;margin-top:5px;color:#e3eed5}
.qv-ark-viewport{position:relative;height:235px;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 48% 20%,#577d72,#143536 72%);border:1px solid #517a6b;perspective:550px;isolation:isolate}
.qv-ark-land{position:absolute;inset:10px 12px 8px;overflow:hidden;transform:rotateX(0deg);background:radial-gradient(ellipse at 50% 95%,#396947,#122c2c 65%);border:1px solid #7daa81a1;border-radius:48% 48% 22% 22%}
.qv-ark-building{position:absolute;bottom:57px;left:49%;width:98px;height:77px;transform:translateX(-50%);background:linear-gradient(100deg,#635b47,#9f9673,#615d48);border:2px solid #b5a481;border-radius:13px 13px 3px 3px;box-shadow:9px 13px 6px #051a1e9a}
.qv-ark-building .qv-ark-roof{position:absolute;bottom:100%;left:-15%;width:130%;height:46px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(90deg,#476b51,#759272,#35524e)}
.qv-ark-building .qv-ark-door{position:absolute;bottom:0;left:36px;width:24px;height:36px;border-radius:12px 12px 0 0;background:#c7a86f;box-shadow:0 0 9px #fae4b05c}
.qv-ark-building.rare,.qv-ark-building.elite{background:linear-gradient(120deg,#608d94,#b3c7b4,#4a7273);border-color:#b2dfde}
.qv-ark-building.legendary,.qv-ark-building.mythic{height:104px;background:linear-gradient(110deg,#8c7940,#edca72,#988249);border-color:#ffe0a3;box-shadow:0 0 33px #e3bd645c}
.qv-ark-building.legendary .qv-ark-roof,.qv-ark-building.mythic .qv-ark-roof{height:70px;background:linear-gradient(90deg,#816e3d,#d7b65c,#8a6739)}
.qv-ark-gates{position:absolute;left:9%;right:9%;bottom:17px;height:58px;border:3px solid #9c8467;border-top:5px solid #b79b71;border-radius:48% 48% 20% 20%;transform:rotateX(28deg)}
.qv-ark-gates.gold{border-color:#f1d67c}
.qv-ark-glow{position:absolute;left:22%;right:22%;bottom:12px;height:60px;border-radius:50%;border:2px solid var(--neon);box-shadow:0 0 23px var(--neon);opacity:.6}
.qv-ark-glow.strong{opacity:1;box-shadow:0 0 42px 12px var(--neon)}
.qv-ark-path{position:absolute;bottom:0;left:38%;width:25%;height:48px;background:linear-gradient(#ad9677aa,#736450);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.qv-ark-shrubs{position:absolute;left:8%;bottom:25px;width:20%;height:40px;background:radial-gradient(ellipse,#477c5b,#204a41);border-radius:60%;box-shadow:170px 0 #29684b}
.qv-ark-dish{position:absolute;right:14%;bottom:40px;width:26px;height:9px;background:#cdad79;border-radius:50%;border:2px solid #f2deb3}
.qv-ark-overlay{position:absolute;left:10px;top:10px;right:10px;background:#123832c9;border-radius:10px;padding:8px;color:#d2ebcd;font-size:11px;text-align:center;z-index:4}
.qv-ark-animal-description{margin:9px 0 15px;border:1px solid var(--pet-color,#527e6f);border-radius:13px;padding:12px;background:#173631}
.qv-ark-animal-description b{font-size:14px;display:block}
.qv-ark-animal-description span{font-size:12px;color:var(--pet-color,#b5dbc5)}
.qv-ark-animal-description p{font-size:11px;margin:5px 0 0}
.qv-ark-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.qv-ark-pet{text-align:left;background:#193632;border:1px solid #486658;border-radius:12px;padding:9px;color:#e7efdf;display:flex;gap:7px;align-items:center}
.qv-ark-pet.selected{border-color:var(--pet-color);box-shadow:0 0 0 1px var(--pet-color)}
.qv-pet-art{width:28px;height:28px;flex:0 0 28px}
.qv-pet-art svg{width:28px;height:28px}
.qv-ark-pet span:last-child{flex:1;min-width:0}
.qv-ark-pet b{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qv-ark-pet small{display:block;font-size:9px;color:#a9c2b4;margin-top:4px}
.qv-ark-more{background:#142c2b;padding:12px;margin:13px 0;border-radius:13px;border:1px solid #476358}
.qv-ark-more button{font-size:12px;margin-right:7px}
.qv-decor-filter{display:flex;overflow-x:auto;gap:7px;padding-bottom:6px}
.qv-decor-filter button{white-space:nowrap;color:#cce6d5;border:1px solid #51786b;background:#1d3c36;padding:8px;font-size:11px;border-radius:8px}
.qv-decor-filter button.selected{background:#8bcbb3;color:#18352a}
.qv-decor-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #355b50;padding:10px 0}
.qv-decor-icon{width:33px;height:33px;flex:0 0 33px;background:#245448;display:grid;place-items:center;border-radius:9px;font-size:20px;color:#cfedcf}
.qv-decor-row div{min-width:0;flex:1}
.qv-decor-row b{display:block;font-size:12px}
.qv-decor-row small{display:block;font-size:10px;color:#a2c4b3}
.qv-decor-row>span:nth-last-child(2){font-size:11px;white-space:nowrap}
.qv-ark-expand{margin:13px 0;padding:14px;background:#193631;border:1px solid #6a866d;border-radius:14px}
.qv-ark-expand p{font-size:11px;margin:5px 0 10px}
#qv-ark-expansion{position:fixed;inset:0;z-index:80;background:#031517ed;display:grid;place-items:center}
.qv-overhead{position:relative;width:min(90vw,390px);height:420px;background:radial-gradient(ellipse,#31664f,#082a2d);border:1px solid #b5d8aa;border-radius:25px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;overflow:hidden;padding:25px 15px 24px}
.qv-overhead-grid{position:absolute;inset:14px 30px 145px;background:repeating-linear-gradient(0deg,transparent 0 42px,#9ddaa15c 43px 44px),repeating-linear-gradient(90deg,transparent 0 42px,#9ddaa15c 43px 44px);transform:perspective(450px) rotateX(42deg);border:1px solid #79bc92;animation:qv-earth .95s both}
.qv-overhead-new{position:absolute;top:96px;left:34%;width:32%;border-radius:19px;height:113px;background:#c7ebc1bb;border:3px solid #f4df99;box-shadow:0 0 38px #baf6a0;display:flex;justify-content:center;flex-direction:column;color:#17452e;animation:qv-earth 1.2s ease-out both}
.qv-overhead-new b{font-size:44px}
.qv-overhead-new small{font-size:9px}
.qv-overhead h2{font-size:23px;z-index:2}
.qv-overhead p{font-size:12px;z-index:2}
.qv-overhead button{z-index:2}
@keyframes qv-earth{from{opacity:0;transform:scale(.2) rotateX(42deg)}to{opacity:1;transform:scale(1) rotateX(42deg)}}
@media(max-width:370px){.qv-ark-list{grid-template-columns:1fr}.qv-market-price{flex-basis:92px}.qv-map-site{min-width:59px}.qv-map-label{font-size:9px}}
@media(min-height:760px){#city #scene{height:min(58dvh,550px)}}

#qv-ark-animal-canvas{position:absolute;inset:0;z-index:3;pointer-events:none}
#qv-ark-animal-canvas .qv-webgl{width:100%;height:100%;pointer-events:none}
#qv-ark-viewport:has(#qv-ark-animal-canvas) .qv-ark-building{transform:translateX(-50%) scale(.85);left:82%;bottom:50px;opacity:.97}
#qv-ark-viewport:has(#qv-ark-animal-canvas) .qv-ark-shrubs{left:7%}

.qv-ark-gates.steel{border-color:#9acac9;box-shadow:0 0 12px #9ee6cb78}
.qv-ark-extra{position:absolute;left:21%;bottom:38px;z-index:2}
.qv-ark-extra.flower{width:56px;height:32px;background:radial-gradient(circle at 15% 70%,#eebdf8 0 5px,transparent 6px),radial-gradient(circle at 42% 20%,#fad79c 0 5px,transparent 6px),radial-gradient(circle at 79% 65%,#b5dbe9 0 5px,transparent 6px),radial-gradient(ellipse at bottom,#4c966b,#275d46 65%,transparent)}
.qv-ark-extra.pond{width:97px;height:27px;left:14%;bottom:32px;background:linear-gradient(#a3dbd5,#3c878f);border:3px solid #82beb8;border-radius:50%;box-shadow:0 0 13px #7cd0d577}
.qv-ark-extra.statue{height:47px;width:22px;left:19%;bottom:37px;border-radius:12px 12px 3px 3px;background:linear-gradient(110deg,#5ba7b0,#d6edcc,#508a96);box-shadow:0 0 13px #a2d5d1}
.qv-ark-keeper{position:absolute;right:18%;top:38%;width:32px;height:32px;border-radius:50%;border:2px solid #88eacb;background:#4d9f99aa;display:grid;place-items:center;color:#f4f0be;animation:qv-hover-drone 2.2s infinite ease-in-out}
@keyframes qv-hover-drone{50%{transform:translateY(-13px);box-shadow:0 0 24px #b3f4c8}}

@media(max-width:430px){
header{padding-left:11px;padding-right:11px;gap:6px}
header h1{font-size:24px;letter-spacing:.18em}
header .tag{font-size:8px}
header .resources{gap:4px;font-size:11px}
header .res{padding:7px 6px;white-space:nowrap}
}
@media(max-width:360px){
header h1{font-size:22px}
header .resources{font-size:10px}
header .res{padding:7px 4px}
header .res-icon{width:14px;height:14px}
}

#city .scene.qv-3d-ready{background:radial-gradient(ellipse at 60% 15%,#4b746e,#123337 58%,#071c21 95%)}
#qv-world-map .qv-map-overview .qv-map-badge{filter:brightness(1.2)}
#city .qv-ark-access{grid-column:span 2}