:root{--ink:#07141d;--panel:rgba(5,20,29,.88);--line:rgba(232,174,75,.42);--gold:#f0b74c;--cream:#ffe8b0;--muted:#9eb8b6;--teal:#53d6b3;--coral:#ff775f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink)}
body{color:#f8edd5;font-family:ui-monospace,"SFMono-Regular","Cascadia Code","Microsoft YaHei",monospace;image-rendering:pixelated}
button{font:inherit}.world{position:relative;width:100vw;height:100dvh;min-height:620px;overflow:hidden;background:#102d35}
#worldCanvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:crosshair}
.glass{background:var(--panel);border:1px solid var(--line);box-shadow:0 0 0 2px rgba(2,9,14,.65),inset 0 0 25px rgba(34,95,97,.12);backdrop-filter:blur(8px)}
.eyebrow{margin:0 0 5px;color:var(--gold);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.brand{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:13px;width:min(520px,calc(100vw - 330px));min-width:345px;padding:14px 16px;clip-path:polygon(0 0,96% 0,100% 25%,100% 100%,4% 100%,0 75%)}
.brand h1{margin:0;color:var(--cream);font-size:clamp(20px,2.1vw,34px);line-height:1;letter-spacing:.035em;text-shadow:3px 3px #653d24}
.brand p:last-child{margin:7px 0 0;color:#c5d6cc;font-size:12px}.brand-mark{position:relative;width:48px;height:38px;flex:none}
.brand-mark i{position:absolute;width:7px;background:var(--coral);box-shadow:3px 3px #4e2b26;bottom:4px;transform:skew(-26deg)}
.brand-mark i:nth-child(1){left:2px;height:10px}.brand-mark i:nth-child(2){left:14px;height:25px}.brand-mark i:nth-child(3){left:26px;height:17px}.brand-mark i:nth-child(4){left:38px;height:33px}
.live{margin-left:auto;align-self:flex-start;color:#9ce9cf;font-size:10px;letter-spacing:.12em}.live b{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#60e4a9;box-shadow:0 0 9px #60e4a9;animation:blink 1.5s steps(2) infinite}@keyframes blink{50%{opacity:.25}}
.weather{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:12px;width:245px;padding:11px 14px}
.weather .moon{font-family:serif;font-size:39px;color:#f3cf76;text-shadow:0 0 14px #d1814b}.weather strong{display:block;color:#ead8ac;font-size:13px}.weather small{display:block;margin-top:5px;color:#718d89;font-size:8px}
.legend{position:absolute;left:20px;top:118px;width:142px;padding:7px;display:grid;gap:4px}
.legend button{display:grid;grid-template-columns:30px 1fr;grid-template-rows:16px 14px;align-items:center;min-height:43px;padding:4px 7px;color:#d8e1d6;background:transparent;border:1px solid transparent;text-align:left;cursor:pointer}
.legend button:first-child{display:block;min-height:34px;text-align:center}.legend button:hover,.legend button.active{color:var(--cream);border-color:rgba(240,183,76,.5);background:rgba(240,183,76,.1)}
.legend b{font-size:11px}.legend small{color:#7d9996;font-size:8px}.animal-icon{grid-row:1/3;width:22px;height:13px;background:#bc7948;box-shadow:4px -5px #bc7948,12px 8px #68412e,0 8px #68412e}
.animal-icon.zebra{background:#e8dfc5;box-shadow:4px -5px #27383a,12px 8px #e8dfc5,0 8px #27383a}.animal-icon.gazelle{background:#d29c5b;transform:scale(.8)}.animal-icon.donkey{background:#8e8b84}.animal-icon.horse{background:#a85c35}.animal-icon.rhino{background:#6c7f7b;transform:scale(1.15)}
.controls{position:absolute;left:20px;bottom:112px;display:flex;gap:5px;padding:6px}.controls button{border:1px solid rgba(240,183,76,.25);background:rgba(9,27,34,.8);color:#c4d4cb;padding:9px 12px;font-size:10px;cursor:pointer}.controls button span{color:var(--gold);margin-right:5px}.controls button:hover{border-color:var(--gold);color:#fff0c5}.controls .primary{background:#8a4935;border-color:#f08b5b;color:#fff}
.rumor-banner{position:absolute;left:50%;top:120px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(430px,calc(100vw - 40px));padding:12px 16px;z-index:4;animation:drop .35s steps(5)}
.rumor-banner .vulture{font-size:28px;color:#d9b15f}.rumor-banner strong{display:block;color:#ffe4a8;font-size:13px}.rumor-banner small{display:block;color:#91aaa5;font-size:9px;margin-top:5px}@keyframes drop{from{transform:translate(-50%,-25px);opacity:0}}
.intel{position:absolute;left:20px;right:20px;bottom:18px;height:82px;display:grid;grid-template-columns:155px 1fr 95px;align-items:center;padding:9px 14px;overflow:hidden}
.intel-label{border-right:1px solid rgba(240,183,76,.2)}.intel h2{margin:0;font-size:16px;color:var(--cream)}.ticker-window{overflow:hidden;height:58px}.ticker-track{display:flex;width:max-content;height:100%;animation:ticker 42s linear infinite}.ticker-track:hover{animation-play-state:paused}
.ticker-item{width:360px;padding:6px 18px;border-right:1px solid rgba(240,183,76,.18);display:grid;grid-template-columns:62px 1fr;grid-template-rows:24px 24px}.ticker-item strong{grid-row:1/3;color:#dfb75d;font-size:10px;align-self:center}.ticker-item b{color:#efddb2;font-size:11px;align-self:end}.ticker-item small{color:#89a09e;font-size:9px;align-self:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.intel time{color:#708a89;font-size:9px;text-align:right}@keyframes ticker{to{transform:translateX(-50%)}}
.animal-card{position:absolute;left:50%;top:50%;width:350px;padding:18px;transform:translate(-50%,-50%);z-index:5}.animal-card h2{margin:4px 0 10px;color:var(--cream);font-size:19px}.animal-card>p:not(.eyebrow){color:#afc4be;font-size:11px;line-height:1.7}.close{position:absolute;right:9px;top:7px;border:0;background:transparent;color:#8fa5a1;font-size:20px;cursor:pointer}
.oracle-details{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.oracle-details div{padding:7px;background:rgba(28,69,72,.35)}.oracle-details dt{color:#77928e;font-size:8px}.oracle-details dd{margin:4px 0 0;color:#e6c986;font-size:10px}
.card-route{display:flex;justify-content:space-between;align-items:center;margin:13px 0;padding:9px;background:rgba(28,69,72,.4);color:#bcd1c9;font-size:10px}.card-route b{color:var(--gold);font-size:18px}.card-tags{display:flex;flex-wrap:wrap;gap:5px}.card-tags span{padding:4px 7px;border:1px solid #41645f;color:#80cdb4;font-size:9px}
.toast{position:absolute;left:50%;top:105px;transform:translate(-50%,-12px);padding:8px 13px;background:#ffe7ad;color:#2b3a35;border:2px solid #7e5738;font-size:10px;opacity:0;pointer-events:none;transition:.2s;z-index:6}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.brand{top:8px;left:8px;width:calc(100vw - 16px);min-width:0;padding:10px}.brand-mark{width:35px;transform:scale(.75);transform-origin:left;margin-right:-5px}.brand h1{font-size:16px}.brand p:last-child,.live{font-size:8px}.weather{top:88px;right:6px;width:185px;padding:7px 9px}.weather .moon{font-size:25px}.weather strong{font-size:10px}.legend{top:88px;left:5px;width:91px;padding:3px}.legend button{display:block;min-height:30px;padding:3px;text-align:center}.legend small,.animal-icon{display:none}.controls{left:5px;right:5px;bottom:91px;justify-content:center}.controls button{font-size:8px;padding:8px}.intel{left:5px;right:5px;bottom:5px;height:78px;grid-template-columns:85px 1fr;padding:6px}.intel time{display:none}.intel-label h2{font-size:11px}.ticker-item{width:255px;grid-template-columns:48px 1fr;padding:6px 10px}.animal-card{width:calc(100vw - 30px)}.rumor-banner{top:145px}}
@media(prefers-reduced-motion:reduce){.ticker-track,.live b{animation:none}}