:root{--bg:#020605;--fg:#d6dfd3;--muted:#6f7e72;--line:#27332d;--green:#a4b67c;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body,#app{margin:0;min-height:100%;background:transparent;color:var(--fg)}
body{font-family:var(--display)}
button{font:inherit}
.shell{min-height:100vh;padding:24px;background:transparent;overflow:hidden}
.cvaId{position:relative;max-width:1400px;margin:0 auto 8px;display:flex;align-items:center;gap:8px;font:600 8px var(--mono);letter-spacing:.16em;color:rgba(214,223,211,.48);text-transform:uppercase}
.cvaId span{color:rgba(214,223,211,.7)}
.cvaId small{font:500 7px var(--mono);letter-spacing:.12em;color:rgba(164,182,124,.42)}
.arenaGrid{max-width:1400px;margin:0 auto 36px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}
/* The wrap lights the edge without a rectangular slab around the plate. */
.arenaWrap{padding:6px 6px 2px;border:1px solid transparent;perspective:1150px;background:radial-gradient(ellipse 72% 92% at 50% 50%,rgba(74,38,128,.40) 0%,rgba(38,18,68,.18) 55%,rgba(38,18,68,0) 78%)}
.arena{position:relative;width:min(75vw,760px);aspect-ratio:1;margin:-8% 0;border:1px solid rgba(110,225,205,.38);border-radius:50%;overflow:hidden;background:url('./hips-plate-districts-v1.webp') center/cover no-repeat,#060312;transform:rotateX(34deg) scale(1.05);box-shadow:0 64px 70px -28px rgba(0,0,0,.88),0 24px 44px rgba(96,44,180,.28),inset 0 0 0 1px rgba(0,0,0,.35)}
.noise{position:absolute;inset:0;border-radius:50%;opacity:.10;background-image:radial-gradient(circle at 22% 33%,rgba(220,235,226,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 68% 71%,rgba(220,235,226,.12) 0 1px,transparent 1.5px),radial-gradient(circle at 48% 18%,rgba(220,235,226,.1) 0 1px,transparent 1.5px);background-size:41px 37px,53px 47px,67px 59px}
/* The scan and throne share the artwork's center, not the square's center. */
.championCore{position:absolute;left:49%;top:44%;width:5.6%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,102,92,.40);background:radial-gradient(circle,rgba(255,102,92,.15),transparent 68%);box-shadow:0 0 18px rgba(255,102,92,.20);z-index:3}
.ping{position:absolute;left:49%;top:44%;width:2%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(232,242,255,.88);border-radius:50%;opacity:0;pointer-events:none;z-index:7}
.ping.active{animation:ping 4.25s linear forwards}
@keyframes ping{0%{width:2%;opacity:.85}72%{opacity:.3}100%{width:196%;opacity:0}}
.contacts{position:absolute;inset:0;z-index:5}
.contact{--contact-color:#38C995;--ring-accent:#B45CFF;position:absolute;border:0;background:transparent;padding:0;pointer-events:none}
.contact.concealed{opacity:0}
.contact.revealed,.contact.fresh{opacity:1}
.battlePanel{min-height:220px;padding:18px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center}
.panelIdle,.revealCard{width:100%;display:none}
.panelIdle.visible,.revealCard.visible{display:block}
.revealCard strong{display:block;font-size:25px;line-height:1.05;letter-spacing:.08em}
.revealCard span{display:block;margin-top:8px;font:9px var(--mono);letter-spacing:.14em;color:var(--green)}
.revealCard b{display:block;margin-top:32px;padding-top:12px;border-top:1px solid var(--line);font:400 13px var(--mono);letter-spacing:.15em;color:#d5ded3}
.revealCard p{margin:12px 0 0;font:400 11.5px/1.8 var(--mono);letter-spacing:.03em;color:#c9b6ec}
@media(max-width:760px){
 html,body,#app{height:auto!important;min-height:0!important}
 .shell{height:auto!important;min-height:0!important;padding:4px 12px 0}
 .cvaId{margin-bottom:5px;padding-left:1px;font-size:7px}
 .cvaId small{font-size:6px}
 .arenaGrid{grid-template-columns:1fr;gap:8px;margin-bottom:0!important}
 .arena{width:100%;max-width:100%;margin:-5.5% 0;transform:rotateX(28deg) scale(1.04)}
 .battlePanel{height:11.3rem;min-height:112px;padding:10px}
 .revealCard strong{font-size:21px}
 .revealCard span{font-size:8px}
 .revealCard b{margin-top:18px;padding-top:9px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.arena{transform:none;margin:0}}

.cvaId .feedStatus{position:relative;margin-left:auto;display:inline-flex;align-items:flex-end;gap:3px;min-width:28px;min-height:24px;padding:7px;border:1px solid rgba(164,182,124,.23);border-radius:4px;background:rgba(3,12,10,.22);cursor:pointer;color:#8cbbab;line-height:1}
.cvaId .feedStatus i{display:block;width:3px;height:5px;border-radius:1px;background:currentColor;opacity:.8}
.cvaId .feedStatus i:nth-child(2){height:8px}
.cvaId .feedStatus i:nth-child(3){height:11px}
.cvaId .feedStatus[data-state="stale"]{color:#d2a66e;border-color:rgba(210,166,110,.4)}
.cvaId .feedStatus[data-state="stale"] i:nth-child(n+2){opacity:.18}
.cvaId .feedStatus[data-state="unavailable"]{color:#b97278;border-color:rgba(185,114,120,.35)}
.cvaId .feedStatus[data-state="unavailable"] i{opacity:.2}
.cvaId .feedStatus[data-state="checking"] i{opacity:.35}
.cvaId .feedStatus:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.cvaId .feedStatus .feedDetail{display:none;position:absolute;z-index:20;right:0;top:calc(100% + 6px);max-width:min(85vw,320px);padding:8px 10px;border:1px solid rgba(164,182,124,.35);background:#06100d;color:#b7caba;white-space:pre-line;width:max-content;font:500 9px/1.5 var(--mono);letter-spacing:.1em;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.cvaId .feedStatus.open .feedDetail{display:block}

/* The ground ring stays on the rank coordinate; only the jewel gently bobs. */
.contact.plumbob{width:31px;height:31px;transform:translate(-50%,-92%);overflow:visible;transition:opacity .22s ease-out}
.contact.plumbob .plumbob-art{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 0 .6px color-mix(in srgb,var(--contact-color) 30%,transparent))}
.contact.plumbob-leader{--ring-accent:#38C995}
.contact.plumbob-leader .plumbob-art{clip-path:polygon(50% 7.5%,82% 49%,50% 92%,18% 49%)}
.contact.plumbob::before{content:'';position:absolute;left:50%;top:92%;width:9px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(3,1,9,.5),transparent 75%);pointer-events:none}
.contact.plumbob.releasing{opacity:0}
.contact.plumbob.revealed .plumbob-art{animation:plumbob-bob 3.2s ease-in-out infinite}
.contact.plumbob.fresh .plumbob-art{animation:plumbob-acquire .2s ease-out both,plumbob-bob 3.2s ease-in-out .2s infinite}
@keyframes plumbob-acquire{from{opacity:0}to{opacity:1}}
@keyframes plumbob-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Both brand colors ripple from the fixed ground tip, then fade away. */
.ping-rings{position:absolute;left:50%;top:92%;width:0;height:0;pointer-events:none}
.ping-acquisition::before,.ping-acquisition::after,.ping-tracking::before,.ping-tracking::after{content:'';position:absolute;left:-6px;top:-6px;width:12px;height:12px;border:1px solid var(--contact-color);border-radius:50%;opacity:0;box-sizing:border-box;box-shadow:0 0 2px rgba(2,6,5,.6)}
.ping-acquisition::after,.ping-tracking::after{border-color:var(--ring-accent)}
.contact.fresh .ping-acquisition::before{animation:target-detect 1s ease-out both}
.contact.fresh .ping-acquisition::after{animation:target-detect 1s ease-out .2s both}
.contact.revealed .ping-tracking::before{animation:target-track 3.6s ease-out 1s infinite both}
.contact.revealed .ping-tracking::after{animation:target-track 3.6s ease-out 2.2s infinite both}
@keyframes target-detect{0%{opacity:.8;transform:scale(.55)}70%{opacity:.35}100%{opacity:0;transform:scale(2.8)}}
@keyframes target-track{0%{opacity:0;transform:scale(.65)}10%{opacity:.6}55%{opacity:.25}80%,100%{opacity:0;transform:scale(2.8)}}
@media(max-width:760px){.contact.plumbob{width:26px;height:26px}.ping-acquisition::before,.ping-acquisition::after,.ping-tracking::before,.ping-tracking::after{left:-5px;top:-5px;width:10px;height:10px}}
@media(prefers-reduced-motion:reduce){
 .contact.plumbob{transition:none}
 .contact.plumbob.revealed .plumbob-art,.contact.plumbob.fresh .plumbob-art,.contact.fresh .ping-acquisition::before,.contact.fresh .ping-acquisition::after,.contact.revealed .ping-tracking::before,.contact.revealed .ping-tracking::after{animation:none}
 .contact.revealed .ping-tracking::before{opacity:.55;transform:scale(1.4)}
}

/* Weather system v3 (2026-10-24, bradley's approved research recipe):
   25 clouds in 3 parallax layers — 9 far (small, faint, slow), 11 mid,
   5 near (big, solid, fast) — 6 baked shapes (cumulus, strato, cirrus,
   ragged, sheet, tall), ~40% flipped, transform-only drift so phones
   aren't taxed. Entries: left edge (most), 2 diagonal top-left sweeps,
   4 rim-grazers that clip the edge and leave without fully entering.
   Every cloud's --exit is measured to its own width so its left edge
   fully clears the disc before the loop restarts (no pop). Shadows sit
   DOWN-LEFT of their cloud (SUN RULE: sun upper-right, shining down-left),
   offset growing with layer; shadow darkness follows the recipe
   (far ~.14 / mid ~.23 / near ~.30 effective) — the darker v2.2 shadow
   is the fallback dial if these read too faint on his phone.
   Day/night washes unchanged (240s). In-plane: no preserve-3d, no
   translateZ. Safety valve: far layer drops out at <=360px (16 clouds).
   Reduced-motion hides the whole layer. No will-change anywhere. */
.weatherLayer{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:50%;overflow:hidden}
.wxCloud{position:absolute;left:0;aspect-ratio:2.4}
.wxCloud.aspWide{aspect-ratio:3.4}
.wxCloud.aspSheet{aspect-ratio:2.8}
.wxCloud.aspTall{aspect-ratio:1.9}
.wxInner{position:absolute;inset:0}
.wxInner.flip{transform:scaleX(-1)}
.wxWisp{position:absolute;inset:0;opacity:var(--o,.8)}
.wlFar{filter:blur(8px)}
.wlMid{filter:blur(13px)}
.wlNear{filter:blur(20px)}
.shCumulus{background:
    radial-gradient(ellipse 34% 46% at 28% 62%,rgba(255,255,255,1),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 40% 55% at 55% 45%,rgba(255,255,255,.98),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 30% 42% at 78% 60%,rgba(255,255,255,.92),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 60% 30% at 50% 72%,rgba(255,255,255,.8),rgba(255,255,255,0) 68%)}
.shStrato{background:
    radial-gradient(ellipse 14% 30% at 10% 60%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 14% 26% at 26% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 14% 32% at 42% 62%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 14% 28% at 58% 52%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 14% 30% at 74% 60%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 14% 26% at 90% 55%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 80% 26% at 50% 72%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%)}
.shCirrus{background:
    radial-gradient(ellipse 70% 12% at 30% 40%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 60% 10% at 60% 60%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 40% 8% at 45% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%)}
.shRagged{background:
    radial-gradient(ellipse 30% 50% at 30% 55%,rgba(255,255,255,1),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 25% 40% at 55% 45%,rgba(255,255,255,.95),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 18% 30% at 78% 60%,rgba(255,255,255,.85),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 12% 20% at 65% 78%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%)}
.shSheet{background:
    radial-gradient(ellipse 60% 45% at 40% 55%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 55% 40% at 65% 50%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 80% 30% at 50% 72%,rgba(255,255,255,.6),rgba(255,255,255,0) 70%)}
.shTall{background:
    radial-gradient(ellipse 36% 40% at 50% 68%,rgba(255,255,255,1),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 30% 38% at 48% 42%,rgba(255,255,255,.98),rgba(255,255,255,0) 68%),
    radial-gradient(ellipse 22% 30% at 52% 22%,rgba(255,255,255,.92),rgba(255,255,255,0) 68%)}
.wxShadow{position:absolute;width:88%;height:62%;mix-blend-mode:multiply}
.swFar{left:2%;top:22%;opacity:.45;filter:blur(6px);background:radial-gradient(ellipse at center,rgba(12,8,26,.30),rgba(12,8,26,0) 70%)}
.swMid{left:-6%;top:30%;opacity:.5;filter:blur(9px);background:radial-gradient(ellipse at center,rgba(12,8,26,.45),rgba(12,8,26,0) 70%)}
.swNear{left:-12%;top:36%;opacity:.55;filter:blur(12px);background:radial-gradient(ellipse at center,rgba(12,8,26,.55),rgba(12,8,26,0) 70%)}
.swNone{display:none}
.wxF01{width:20%;top:8%;--o:0.45;--exit:505%;animation:wxDrift 170s linear infinite;animation-delay:-40s}
.wxF02{width:26%;top:22%;--o:0.52;--exit:390%;animation:wxDrift 185s linear infinite;animation-delay:-120s}
.wxF03{width:18%;top:38%;--o:0.38;--exit:561%;animation:wxDrift 155s linear infinite;animation-delay:-70s}
.wxF04{width:24%;top:52%;--o:0.48;--exit:422%;animation:wxDrift 195s linear infinite;animation-delay:-150s}
.wxF05{width:28%;top:64%;--o:0.55;--exit:363%;animation:wxDrift 160s linear infinite;animation-delay:-20s}
.wxF06{width:19%;top:74%;--o:0.35;--exit:532%;animation:wxDrift 200s linear infinite;animation-delay:-90s}
.wxF07{width:22%;top:0%;--o:0.5;--exit:460%;animation:wxDiag 175s linear infinite;animation-delay:-60s}
.wxF08{width:21%;top:-2%;--o:0.42;--exit:482%;animation:wxDrift 150s linear infinite;animation-delay:-110s}
.wxF09{width:25%;top:86%;--o:0.4;--exit:405%;animation:wxDrift 190s linear infinite;animation-delay:-30s}
.wxM01{width:30%;top:5%;--o:0.8;--exit:339%;animation:wxDrift 95s linear infinite;animation-delay:-30s}
.wxM02{width:42%;top:14%;--o:0.88;--exit:244%;animation:wxDrift 120s linear infinite;animation-delay:-80s}
.wxM03{width:28%;top:26%;--o:0.72;--exit:363%;animation:wxDrift 105s linear infinite;animation-delay:-50s}
.wxM04{width:38%;top:33%;--o:0.85;--exit:269%;animation:wxDrift 140s linear infinite;animation-delay:-100s}
.wxM05{width:46%;top:44%;--o:0.78;--exit:223%;animation:wxDrift 115s linear infinite;animation-delay:-60s}
.wxM06{width:32%;top:55%;--o:0.9;--exit:318%;animation:wxDrift 130s linear infinite;animation-delay:-90s}
.wxM07{width:40%;top:63%;--o:0.82;--exit:255%;animation:wxDrift 100s linear infinite;animation-delay:-20s}
.wxM08{width:27%;top:70%;--o:0.75;--exit:376%;animation:wxDrift 150s linear infinite;animation-delay:-130s}
.wxM09{width:36%;top:18%;--o:0.86;--exit:283%;animation:wxDrift 125s linear infinite;animation-delay:-70s}
.wxM10{width:44%;top:48%;--o:0.9;--exit:233%;animation:wxDrift 90s linear infinite;animation-delay:-40s}
.wxM11{width:34%;top:0%;--o:0.77;--exit:300%;animation:wxDiag 135s linear infinite;animation-delay:-85s}
.wxN01{width:52%;top:10%;--o:0.95;--exit:198%;animation:wxDrift 70s linear infinite;animation-delay:-25s}
.wxN02{width:64%;top:30%;--o:1.0;--exit:162%;animation:wxDrift 85s linear infinite;animation-delay:-55s}
.wxN03{width:48%;top:50%;--o:0.92;--exit:214%;animation:wxDrift 65s linear infinite;animation-delay:-15s}
.wxN04{width:58%;top:66%;--o:0.98;--exit:178%;animation:wxDrift 95s linear infinite;animation-delay:-70s}
.wxN05{width:46%;top:82%;--o:0.9;--exit:223%;animation:wxDrift 80s linear infinite;animation-delay:-45s}
@keyframes wxDrift{from{transform:translate3d(-105%,-2%,0)}to{transform:translate3d(var(--exit,220%),3%,0)}}
@keyframes wxDiag{from{transform:translate3d(-120%,-130%,0)}to{transform:translate3d(var(--exit,300%),60%,0)}}
.wxDusk{position:absolute;inset:0;opacity:0;animation:wxDusk 240s ease-in-out infinite;
  background:radial-gradient(ellipse at 50% 38%,rgba(255,150,70,.28),rgba(180,60,140,.22) 55%,rgba(40,20,80,.10))}
@keyframes wxDusk{0%,26%{opacity:0}36%{opacity:.9}46%{opacity:0}84%{opacity:0}92%{opacity:.8}100%{opacity:0}}
.wxNight{position:absolute;inset:0;opacity:0;animation:wxNight 240s ease-in-out infinite;
  background:radial-gradient(ellipse at 50% 42%,rgba(30,26,90,.25),rgba(6,5,24,.66))}
@keyframes wxNight{0%,46%{opacity:0}60%,82%{opacity:.85}96%,100%{opacity:0}}
@media (max-width:360px){.wxfar{display:none}}
@media (prefers-reduced-motion:reduce){.weatherLayer{display:none}}