/* v18 "Lounge Lizard" hub skin: rounded neon pixel panels, juicy buttons, animated stages. Visual only:
   no layout sizes are changed, so viewport.css one-screen layouts keep fitting. */
:root{--hot:#ff5fa8;--hot2:#ff9ad6;--gold:#ffd36e;--plum:#2a0f2a;--wine:#5a1838}
.hub-backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;image-rendering:pixelated}
body.playing .hub-backdrop{display:none}
body:not(.playing):after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 20% 110%,#ff5fa833,transparent 55%),radial-gradient(ellipse at 90% -10%,#7a5bff2a,transparent 50%);animation:loungeBreath 7s ease-in-out infinite alternate}
@keyframes loungeBreath{to{opacity:.55;filter:hue-rotate(-18deg)}}

/* topbar + ticker */
.lounge-ticker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(44vw,640px);overflow:hidden;border-radius:999px;border:2px solid #ff7ab866;background:#1a0818cc;box-shadow:inset 0 0 12px #ff5fa833,0 0 14px #ff5fa822;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lounge-ticker>div{display:flex;width:max-content;animation:ticker 48s linear infinite}
.lounge-ticker span{font:10px Pixel,monospace;letter-spacing:.08em;color:var(--gold);white-space:nowrap;padding-right:24px;text-shadow:0 0 6px #ffb34777}
@keyframes ticker{to{transform:translateX(-50%)}}
body.playing .lounge-ticker{display:none}
@media (max-width:1000px){.lounge-ticker{display:none}}
.brand-logo{animation:logoBob 3.2s ease-in-out infinite}
@keyframes logoBob{50%{transform:translateY(-2px) rotate(-1.5deg)}}

/* intro column */
.intro{position:relative}
.intro h1 .game-logo{animation:logoFloat 3.6s ease-in-out infinite;transform-origin:30% 70%;filter:drop-shadow(0 6px 0 #2a0f2a99) drop-shadow(0 0 18px #ff5fa866)}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.5deg) scale(1.02)}}
.intro .eyebrow{color:var(--gold)!important;text-shadow:0 0 8px #ffb34766}
.intro .eyebrow.tag-swap{animation:tagSwap .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes tagSwap{0%{opacity:0;transform:translateY(8px) skewX(-12deg)}100%{opacity:1;transform:none}}
.intro-copy{font-family:Pixel,monospace!important;font-style:normal!important;letter-spacing:.04em}
.intro-copy em{color:var(--hot2);font-style:normal;text-shadow:0 0 10px #ff5fa877}
.hub-parade{position:absolute;right:0;top:4px;width:min(54%,360px);height:88px;pointer-events:none;image-rendering:pixelated;z-index:0}
@media (max-width:900px),(max-height:600px){.hub-parade{display:none}}

/* panels: rounded, chunky pixel bevel + neon rim */
.farm-panel,.selector-panel{border-radius:22px!important;border:3px solid #ff7ab877!important;box-shadow:0 0 0 3px #1a0818,0 0 26px #ff5fa833,0 12px 0 2px #0b031055,inset 0 2px 0 #ffffff14,inset 0 0 40px #ff5fa810!important;background:linear-gradient(160deg,#3a1233f2,#1b0b22f0 60%,#140a1cf2)!important}
.selector-panel{border-top:3px solid #ffb3d8!important}
.panel-heading{color:var(--hot2)!important}
.panel-heading .tiny-square{border-radius:50%;background:var(--hot)!important;box-shadow:0 0 8px var(--hot);animation:beat 1.1s ease-in-out infinite}
.farm-totals>div{border-radius:14px}
.farm-totals strong{text-shadow:0 0 10px currentColor}
.farm-tabs{gap:8px}
.farm-tabs button{border-radius:999px!important;border:2px solid #ff7ab855!important;transition:transform .2s cubic-bezier(.3,1.8,.5,1),background .2s,color .2s}
.farm-tabs button:hover{transform:translateY(-2px) rotate(-1deg)}
.farm-tabs button.active{background:linear-gradient(180deg,#ff7ab8,#c62f74)!important;color:#fff7fb!important;border-color:#ffd3ea!important;box-shadow:0 4px 0 #6a1440,0 0 16px #ff5fa866}

/* destination cards */
.zone-card{border-radius:16px!important;border:2px solid #ff7ab840!important;transition:transform .25s cubic-bezier(.3,1.7,.5,1),box-shadow .25s,border-color .25s!important;overflow:hidden}
.zone-card:not(:disabled):hover{transform:translateY(-4px) rotate(-.8deg) scale(1.015);box-shadow:0 8px 0 #0b031066,0 0 22px #ff5fa855!important;border-color:#ff9ad6!important}
.zone-card.selected{border:3px solid var(--hot)!important;box-shadow:0 0 0 2px #1a0818,0 0 24px #ff5fa877,inset 0 0 30px #ff5fa822!important;animation:cardGlow 1.8s ease-in-out infinite alternate}
@keyframes cardGlow{to{box-shadow:0 0 0 2px #1a0818,0 0 36px #ff5fa8aa,inset 0 0 40px #ff5fa833}}
.zone-card.selected:after{content:'♥';position:absolute;right:8px;top:6px;color:var(--hot2);font-size:14px;text-shadow:0 0 8px var(--hot);animation:beat 1s ease-in-out infinite}
.zone-card img{transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.zone-card:not(:disabled):hover img{transform:translateY(-4px) rotate(4deg)}
.zone-card:disabled{filter:grayscale(.55) brightness(.85)}
.training-card{border-radius:16px!important;transition:transform .22s cubic-bezier(.3,1.7,.5,1)!important}
.training-card:not(:disabled):hover{transform:translateY(-3px) rotate(.6deg)}

/* player card becomes a tiny spotlight stage */
.hub-stage-host{position:relative;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 22% 100%,#5a1838,#1c0a20 70%);box-shadow:inset 0 0 0 2px #ff7ab866,inset 0 -6px 0 #12061c88}
.hub-stage-host:before,.hub-stage-host:after{content:'';position:absolute;top:0;bottom:0;width:7%;z-index:2;pointer-events:none;background:repeating-linear-gradient(90deg,#7a1636,#7a1636 3px,#5a0f27 3px,#5a0f27 6px);box-shadow:0 0 12px #0008}
.hub-stage-host:before{left:0;border-radius:0 0 50% 0}.hub-stage-host:after{right:0;border-radius:0 0 0 50%}
.hub-stage{position:absolute;inset:0;width:100%;height:100%;z-index:1;image-rendering:pixelated;pointer-events:none}
.hub-stage-host .hero-card{position:relative;z-index:3;background:transparent!important;border:0!important;box-shadow:none!important;justify-content:flex-end!important}
.hub-stage-host .hero-card img{visibility:hidden;width:0}
.hub-stage-host .hero-card span{position:absolute;right:9%;bottom:8px;padding:4px 10px;border-radius:999px;background:#1a0818d9;border:2px solid var(--hot);color:#fff3fa;font-size:10px!important;text-shadow:0 0 6px var(--hot)!important;box-shadow:0 0 12px #ff5fa855}

/* stat bars + summaries */
.stats i{border-radius:999px;overflow:hidden}
.special-summary,.deployment-summary{border-radius:14px}
.power-icon{animation:beat 1.4s ease-in-out infinite;display:inline-block}

/* the big juicy start button */
.start-button{border-radius:999px!important;background:linear-gradient(180deg,#ff9fd0 0%,#ff4f9e 48%,#d91f6e 100%)!important;border:3px solid #fff0f6!important;color:#fff!important;text-shadow:0 2px 0 #8c1446!important;box-shadow:0 7px 0 #8c1446,0 10px 22px #0008,0 0 30px #ff5fa866!important;transition:transform .15s cubic-bezier(.3,1.8,.5,1),box-shadow .15s,filter .2s!important;overflow:hidden}
.start-button:not(:disabled){animation:startPulse 1.6s ease-in-out infinite}
@keyframes startPulse{0%,100%{transform:scale(1)}12%{transform:scale(1.03)}24%{transform:scale(.995)}36%{transform:scale(1.025)}}
.start-button:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg) scale(1.03)!important;animation:none;box-shadow:0 10px 0 #8c1446,0 14px 26px #0009,0 0 44px #ff5fa8aa!important;filter:brightness(1.08)}
.start-button:active:not(:disabled){transform:translateY(5px) scale(.98)!important;box-shadow:0 2px 0 #8c1446,0 0 20px #ff5fa866!important}
.start-button:before{background:#ffffff55!important}
.start-button:after{content:'';position:absolute;left:8%;right:8%;top:5px;height:34%;border-radius:999px;background:linear-gradient(#ffffff88,#ffffff00);pointer-events:none}
.start-heart{display:inline-block;font-size:1.25em;color:#fff;text-shadow:0 0 10px #fff,0 2px 0 #8c1446;animation:beat 1s ease-in-out infinite}
.start-button:disabled{filter:grayscale(.6) brightness(.8)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(.95)}45%{transform:scale(1.18)}}

/* footer keycaps */
.selection-footer kbd{border-radius:8px!important;border:2px solid #ff7ab866!important;background:linear-gradient(#4a1838,#2a0f2a)!important;box-shadow:0 3px 0 #12061c!important}
.footer-note{color:var(--hot2)!important}
.top-right .icon-button,.wiki-link{border-radius:12px!important;transition:transform .2s cubic-bezier(.3,1.8,.5,1)!important}
.top-right .icon-button:hover,.wiki-link:hover{transform:translateY(-2px) rotate(-3deg)}

/* in-game modals and cards get the same softness */
.modal{border-radius:24px!important;border:3px solid #ff7ab877!important;box-shadow:0 0 0 3px #1a0818,0 0 40px #ff5fa844,0 16px 0 #0b031066!important}
.upgrade-choice{border-radius:16px!important;transition:transform .22s cubic-bezier(.3,1.7,.5,1),box-shadow .2s!important}
.upgrade-choice:hover,.upgrade-choice:focus-visible{transform:translateY(-6px) rotate(-1deg) scale(1.02)!important;box-shadow:0 10px 0 #0b031066,0 0 26px #ff5fa877!important}
.player-panel,.run-center,.kill-panel,.farm-hud,.attack-loadout,.ability,.discovery-hud{border-radius:14px!important}
.health-track,.energy-track,.xp-track{border-radius:999px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.start-button,.start-heart,.zone-card.selected,.intro h1 .game-logo,.brand-logo,.lounge-ticker>div,body:not(.playing):after{animation:none!important}}