.oh-dfx-launch-wrap{margin:12px 0;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg, rgba(12,52,150,.72), rgba(6,18,60,.70));border:1px solid rgba(140,200,255,.18);box-shadow:0 8px 28px rgba(0,0,0,.2)}
.oh-dfx-launch{cursor:pointer;border:0;padding:12px 16px;border-radius:14px;font-weight:800;background:rgba(255,255,255,.1);color:#fff;transition:transform .08s ease, background .15s ease}
.oh-dfx-launch:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}
.oh-dfx-launch-sub{margin-top:8px;opacity:.88;color:#fff;font:500 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
/* ===== Defense FX Shop UI ===== */
.oh-dfx-shop{font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff; background:linear-gradient(180deg, rgba(14,60,170,.92), rgba(6,18,60,.90)); border:1px solid rgba(140,200,255,.22); border-radius:16px; padding:16px; margin:14px 0; box-shadow:0 12px 50px rgba(0,0,0,.35)}
.oh-dfx-head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.oh-dfx-title{font-size:20px; font-weight:800; letter-spacing:.3px}
.oh-dfx-sub{opacity:.9}
.oh-dfx-status{display:grid; grid-template-columns:1fr; gap:6px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); margin-bottom:12px}
.oh-dfx-status .row{display:flex; justify-content:space-between; gap:10px}
.oh-dfx-status span{opacity:.8}
.oh-dfx-warn{padding:10px 12px; border-radius:12px; background:rgba(40,140,255,.16); border:1px solid rgba(140,200,255,.32); margin-bottom:12px}
.oh-dfx-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px}
.oh-dfx-card{border-radius:16px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(200,230,255,.14)}
.oh-dfx-card-title{font-weight:800; margin-bottom:4px}
.oh-dfx-card-desc{opacity:.85; font-size:13px; line-height:1.35; min-height:38px}
.oh-dfx-card-price{margin:10px 0 8px; opacity:.95}
.oh-dfx-actions{display:flex; gap:8px; flex-wrap:wrap}
.oh-dfx-actions button{cursor:pointer; border:0; padding:10px 10px; border-radius:12px; font-weight:700; background:rgba(255,255,255,.08); color:#fff; transition:transform .08s ease, background .15s ease}
.oh-dfx-actions button:hover{transform:translateY(-1px); background:rgba(255,255,255,.12)}
.oh-dfx-actions button:disabled{opacity:.45; cursor:not-allowed; transform:none}
.oh-dfx-msg{margin-top:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}
.oh-dfx-msg.ok{border-color:rgba(0,255,170,.25)}
.oh-dfx-msg.err{border-color:rgba(255,80,80,.35)}
.oh-dfx-debug{margin-top:12px; padding:10px; border-radius:12px; background:rgba(0,0,0,.35); overflow:auto}

/* ===== Owner-only HUD ===== */
.oh-dfx.oh-dfx-private{font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#fff; background:linear-gradient(180deg, rgba(12,52,150,.90), rgba(6,18,60,.86)); border:1px solid rgba(140,200,255,.22); border-radius:16px; padding:14px; margin:12px 0; box-shadow:0 10px 40px rgba(0,0,0,.28)}
.oh-dfx-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); margin-left:8px; font-size:12px; opacity:.92}

/* ===== Epic Overlay FX ===== */
.oh-dfx-overlay{position:fixed; inset:-10vh -10vw; z-index:999999; pointer-events:none; display:block; opacity:1; animation:ohdfxFadeIn .35s ease-out both}
.oh-dfx-overlay.out{animation:ohdfxFadeOut .75s ease-in both}

@keyframes ohdfxFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ohdfxFadeOut{from{opacity:1}to{opacity:0}}

.oh-dfx-glow{position:absolute; inset:0; filter:blur(16px); opacity:.9; transform:scale(1.03)}
.oh-dfx-ring{position:absolute; left:50%; top:50%; width:70vmin; height:70vmin; border-radius:50%; transform:translate(-50%,-50%); opacity:.95}
.oh-dfx-burst{position:absolute; left:50%; top:50%; width:120vmin; height:120vmin; transform:translate(-50%,-50%); border-radius:50%; opacity:.75; mix-blend-mode:screen}

.oh-dfx-p{position:absolute; width:10px; height:10px; border-radius:50%; opacity:.85; filter:blur(.2px); mix-blend-mode:screen; animation:ohdfxFloat 3.4s ease-in-out infinite}
@keyframes ohdfxFloat{0%{transform:translate(-50%,-50%) scale(.8)}50%{transform:translate(-50%,-70%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(.8)}}

/* Golden Shield */
.fx-golden_shield .oh-dfx-glow{background:radial-gradient(circle at 50% 50%, rgba(255,210,90,.55), rgba(255,210,90,.10), rgba(0,0,0,0))}
.fx-golden_shield .oh-dfx-ring{border:3px solid rgba(255,230,130,.55); box-shadow:0 0 40px rgba(255,230,130,.35), inset 0 0 55px rgba(255,230,130,.25); animation:ohdfxPulse 1.6s ease-in-out infinite}
.fx-golden_shield .oh-dfx-burst{background:conic-gradient(from 0deg, rgba(255,230,130,.0), rgba(255,230,130,.25), rgba(255,230,130,.0)); animation:ohdfxSpin 2.2s linear infinite}
.fx-golden_shield .oh-dfx-p{background:rgba(255,230,130,.95);}

/* Orb */
.fx-orb .oh-dfx-glow{background:radial-gradient(circle at 50% 50%, rgba(90,210,255,.40), rgba(90,210,255,.10), rgba(0,0,0,0))}
.fx-orb .oh-dfx-ring{border:2px solid rgba(140,240,255,.45); box-shadow:0 0 60px rgba(90,210,255,.35), inset 0 0 80px rgba(90,210,255,.22); animation:ohdfxBreath 2.2s ease-in-out infinite}
.fx-orb .oh-dfx-burst{background:radial-gradient(circle at 50% 50%, rgba(90,210,255,.15), rgba(90,210,255,0)); animation:ohdfxPulse 1.3s ease-in-out infinite}
.fx-orb .oh-dfx-p{background:rgba(160,245,255,.95); animation:ohdfxOrbit 3.4s linear infinite}

/* Spikes */
.fx-spikes .oh-dfx-glow{background:radial-gradient(circle at 50% 50%, rgba(220,220,220,.35), rgba(220,220,220,.10), rgba(0,0,0,0))}
.fx-spikes .oh-dfx-ring{border:1px solid rgba(255,255,255,.28); box-shadow:0 0 35px rgba(255,255,255,.18), inset 0 0 60px rgba(255,255,255,.10); animation:ohdfxPulse .95s ease-in-out infinite}
.fx-spikes .oh-dfx-burst{background:conic-gradient(from 0deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); animation:ohdfxSpikeBurst 1.15s ease-in-out infinite}
.fx-spikes .oh-dfx-p{background:rgba(255,255,255,.95); border-radius:2px; width:14px; height:6px; animation:ohdfxShard 2.4s ease-in-out infinite}

/* Fire */
.fx-fire_shield .oh-dfx-glow{background:radial-gradient(circle at 50% 70%, rgba(255,90,30,.40), rgba(255,90,30,.06), rgba(0,0,0,0))}
.fx-fire_shield .oh-dfx-ring{border:2px solid rgba(255,140,80,.40); box-shadow:0 0 55px rgba(255,90,30,.28), inset 0 0 70px rgba(255,90,30,.18); animation:ohdfxHeat 1.35s ease-in-out infinite}
.fx-fire_shield .oh-dfx-burst{background:radial-gradient(circle at 50% 70%, rgba(255,90,30,.22), rgba(255,90,30,0)); animation:ohdfxRise 1.8s ease-in-out infinite}
.fx-fire_shield .oh-dfx-p{background:rgba(255,150,70,.95); animation:ohdfxEmber 2.8s ease-in-out infinite}

/* Water */
.fx-water_shield .oh-dfx-glow{background:radial-gradient(circle at 50% 45%, rgba(40,160,255,.35), rgba(40,160,255,.06), rgba(0,0,0,0))}
.fx-water_shield .oh-dfx-ring{border:2px solid rgba(120,210,255,.42); box-shadow:0 0 65px rgba(40,160,255,.30), inset 0 0 90px rgba(40,160,255,.16); animation:ohdfxWave 1.6s ease-in-out infinite}
.fx-water_shield .oh-dfx-burst{background:radial-gradient(circle at 50% 45%, rgba(120,210,255,.18), rgba(120,210,255,0)); animation:ohdfxRain 1.1s linear infinite}
.fx-water_shield .oh-dfx-p{background:rgba(160,230,255,.95); animation:ohdfxDrop 2.6s ease-in-out infinite}

/* Electric */
.fx-electric_shield .oh-dfx-glow{background:radial-gradient(circle at 50% 50%, rgba(165,80,255,.35), rgba(165,80,255,.06), rgba(0,0,0,0))}
.fx-electric_shield .oh-dfx-ring{border:2px solid rgba(200,160,255,.45); box-shadow:0 0 80px rgba(165,80,255,.40), inset 0 0 90px rgba(165,80,255,.18); animation:ohdfxJitter .85s steps(2) infinite}
.fx-electric_shield .oh-dfx-burst{background:conic-gradient(from 0deg, rgba(200,160,255,0), rgba(200,160,255,.30), rgba(200,160,255,0)); animation:ohdfxSpin 1.1s linear infinite}
.fx-electric_shield .oh-dfx-p{background:rgba(220,200,255,.95); animation:ohdfxZap 1.8s ease-in-out infinite}

/* Earth */
.fx-earth_shield .oh-dfx-glow{background:radial-gradient(circle at 50% 55%, rgba(140,255,140,.22), rgba(140,255,140,.04), rgba(0,0,0,0))}
.fx-earth_shield .oh-dfx-ring{border:2px solid rgba(170,255,170,.25); box-shadow:0 0 55px rgba(140,255,140,.18), inset 0 0 85px rgba(80,130,90,.25); animation:ohdfxStone 2.1s ease-in-out infinite}
.fx-earth_shield .oh-dfx-burst{background:radial-gradient(circle at 50% 55%, rgba(140,255,140,.10), rgba(0,0,0,0)); animation:ohdfxPulse 1.55s ease-in-out infinite}
.fx-earth_shield .oh-dfx-p{background:rgba(180,255,180,.85); border-radius:4px; width:12px; height:12px; animation:ohdfxRock 3.2s ease-in-out infinite}

@keyframes ohdfxSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ohdfxPulse{0%{transform:translate(-50%,-50%) scale(.92); opacity:.65}50%{transform:translate(-50%,-50%) scale(1.06); opacity:1}100%{transform:translate(-50%,-50%) scale(.92); opacity:.65}}
@keyframes ohdfxBreath{0%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(.94)}}
@keyframes ohdfxWave{0%{transform:translate(-50%,-50%) scale(.95)}50%{transform:translate(-50%,-50%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(.95)}}
@keyframes ohdfxHeat{0%{transform:translate(-50%,-50%) scale(.96)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(.96)}}
@keyframes ohdfxRise{0%{transform:translate(-50%,-50%) scale(.92); opacity:.45}60%{transform:translate(-50%,-62%) scale(1.02); opacity:1}100%{transform:translate(-50%,-50%) scale(.92); opacity:.45}}
@keyframes ohdfxRain{0%{transform:translate(-50%,-50%) scale(.95); opacity:.55}50%{transform:translate(-50%,-50%) scale(1.05); opacity:1}100%{transform:translate(-50%,-50%) scale(.95); opacity:.55}}
@keyframes ohdfxDrop{0%{transform:translate(-50%,-50%) scale(.65)}50%{transform:translate(-50%,-85%) scale(1.05)}100%{transform:translate(-50%,-50%) scale(.65)}}
@keyframes ohdfxJitter{0%{transform:translate(-50%,-50%) rotate(0deg)}50%{transform:translate(-50%,-50%) rotate(2deg)}100%{transform:translate(-50%,-50%) rotate(-2deg)}}
@keyframes ohdfxZap{0%{opacity:.25; transform:translate(-50%,-50%) scale(.6)}20%{opacity:1; transform:translate(-50%,-50%) scale(1.25)}100%{opacity:.25; transform:translate(-50%,-50%) scale(.6)}}
@keyframes ohdfxOrbit{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(8vmin) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg) translateX(8vmin) rotate(-360deg)}}
@keyframes ohdfxSpikeBurst{0%{transform:translate(-50%,-50%) scale(.92)}40%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(.92)}}
@keyframes ohdfxShard{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(0); opacity:.25}40%{transform:translate(-50%,-50%) rotate(35deg) translateX(8vmin); opacity:1}100%{transform:translate(-50%,-50%) rotate(0deg) translateX(0); opacity:.25}}
@keyframes ohdfxEmber{0%{transform:translate(-50%,-50%) scale(.7); opacity:.35}60%{transform:translate(-50%,-85%) scale(1.2); opacity:1}100%{transform:translate(-50%,-50%) scale(.7); opacity:.35}}
@keyframes ohdfxStone{0%{transform:translate(-50%,-50%) scale(.92)}50%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(-50%,-50%) scale(.92)}}
@keyframes ohdfxRock{0%{transform:translate(-50%,-50%) scale(.85); opacity:.35}50%{transform:translate(-50%,-60%) scale(1.15); opacity:1}100%{transform:translate(-50%,-50%) scale(.85); opacity:.35}}

.oh-dfx-card-hp{margin-top:6px; font-size:13px; opacity:.92}