/* Fistar visual pass 2: shadows across cards/panels + a distinctive balance badge. CSS/JS only, no markup/financial changes. */
:root{--shadow-sm:0 1px 2px rgba(33,60,55,.06),0 2px 8px rgba(33,60,55,.07);--shadow-md:0 6px 18px rgba(33,60,55,.09),0 2px 6px rgba(33,60,55,.06);--shadow-lg:0 18px 40px rgba(22,134,107,.14),0 6px 16px rgba(33,60,55,.08);--shadow-pop:0 10px 26px rgba(132,113,189,.22),0 3px 8px rgba(22,134,107,.12)}

.site-header{box-shadow:0 2px 14px rgba(33,60,55,.07)}
.gpu-card,.coin-card,.panel,.ref-invite,.ref-collect-panel,.friends-hero,.profile-hero,.list-row,.selected-coin,.dep-requisites,.dep-qr-panel,.qr,.notice,.fistar-table-scroll,.badge,.farm-hero,.steps{box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.gpu-card,.coin-card,.list-row,.fistar-currency-card{border-radius:16px}
.gpu-card:hover,.coin-card:hover,.list-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.gpu-card.owned{box-shadow:var(--shadow-md)}
.farm-hero,.friends-hero{box-shadow:var(--shadow-lg)}
.add{box-shadow:0 8px 18px rgba(22,134,107,.25)}
.add:active{box-shadow:0 3px 8px rgba(22,134,107,.22)}
button.primary{box-shadow:0 8px 20px rgba(22,134,107,.22)}
button.primary:active{box-shadow:0 3px 10px rgba(22,134,107,.18)}
.dock{box-shadow:0 -6px 24px rgba(33,60,55,.09)}
.dock a.active{box-shadow:var(--shadow-sm)}
.stats .stat,.gpu-grid .gpu-top,.ref-collect-row{box-shadow:none}
.ref-collect-panel .primary{box-shadow:var(--shadow-pop)}
/* The user asked to remove the payment progress steps across all flows. */
.steps{display:none!important}

/* Info/status banner (the $info block in template/header.php) — richer card look, no markup change. */
@keyframes noticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.notice{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:#6b4e1f;background:linear-gradient(135deg,#fff8ea 0%,#fdeec7 100%);border:1px solid #f3dca4;border-left:4px solid #e3a93c;border-radius:14px;padding:14px 16px;line-height:1.55;margin:0 0 20px;box-shadow:0 10px 24px rgba(227,169,60,.16),0 2px 6px rgba(33,60,55,.05);animation:noticeIn .25s ease}
.notice::before{content:"i";flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e3a93c;color:#fff;font:italic 800 13px/1 Georgia,serif;box-shadow:0 2px 6px rgba(227,169,60,.4)}
.notice:hover{box-shadow:0 14px 30px rgba(227,169,60,.22),0 3px 8px rgba(33,60,55,.06)}
@media(max-width:759px){.notice{font-size:12px;padding:12px 14px;border-radius:13px;gap:10px}.notice::before{width:19px;height:19px;font-size:11px}}

/* Bring back the GPU card life: gentle float + colored glow + hover lift, driven by the
   --card-color/--delay custom props already set inline on .gpu-card in games/games.php. */
@keyframes gpuLevitate{0%,100%{transform:translateY(1px) rotate(-.4deg)}50%{transform:translateY(-5px) rotate(.6deg)}}
@keyframes gpuTwinkle{0%,100%{opacity:.55;transform:scale(1) translateY(0)}50%{opacity:.15;transform:scale(.7) translateY(-3px)}}
.gpu-card{position:relative;isolation:isolate;overflow:hidden}
.gpu-card::before{content:"";position:absolute;inset:0 0 auto;height:65%;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--card-color,#16866b) 16%,white),transparent 72%);pointer-events:none;z-index:0}
.gpu-art{position:relative;z-index:1;background:transparent!important;animation:gpuLevitate 4.8s ease-in-out infinite;animation-delay:var(--delay,0s);transform-origin:50% 65%}
.gpu-art::after{content:"✦";position:absolute;right:14%;top:10%;color:var(--card-color,#16866b);font-size:15px;opacity:.5;animation:gpuTwinkle 3s ease-in-out infinite;animation-delay:var(--delay,0s);pointer-events:none}
.gpu-card:hover{box-shadow:0 18px 36px color-mix(in srgb,var(--card-color,#16866b) 20%,transparent)}
.gpu-art .gpu-assembly{display:block;width:100%;height:100%;overflow:visible}
.gpu-art .fan-rotor{transform-box:view-box;transform-origin:0 0;animation:blade-spin var(--spin) linear infinite;animation-delay:var(--phase);will-change:transform}
@keyframes blade-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gpu-art,.gpu-art::after,.gpu-art .fan-rotor{animation:none!important}}