@font-face { font-family: Final3rdShield; src: url("../assets/fonts/teko-variable.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
.premium-player-shield-svg { display: block; width: 100%; height: auto; overflow: visible; isolation: isolate; }
.premium-shield-component { width: min(100%, 520px); margin-inline: auto; color: #f5f7f6; background: radial-gradient(ellipse at center, #17140b, #050807 72%); border-radius: 20px; padding: 12px; }
.premium-shield-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.premium-shield-controls button, .premium-shield-editor button { min-height: 44px; border: 1px solid #b68d38; border-radius: 10px; background: #0a1410; color: #fff1c2; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.premium-shield-controls button:focus-visible, .premium-shield-editor :focus-visible { outline: 2px solid #74efb2; outline-offset: 3px; }
.premium-shield-controls button:disabled, .premium-shield-editor button:disabled { opacity: .6; cursor: wait; }
.premium-shield-editor { display: grid; gap: 12px; margin-top: 16px; }
.premium-shield-editor label { display: grid; gap: 5px; }
.premium-shield-editor input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; background: #101916; border: 1px solid #63786c; border-radius: 8px; color: #fff; font: inherit; padding: 8px; }
.family-player-card-unified > .player-shield-react-host { display: contents; }
.premium-shield-edge-shimmer { animation: premium-shield-shimmer 12s linear infinite; }
.premium-shield-border-glow { animation: premium-shield-breathe 6s ease-in-out infinite alternate; }
.premium-player-shield-svg .player-shield-interactive-sheen { transition: opacity 200ms ease; transform: translateX(var(--shield-sheen-shift, 45px)); }
@media (hover: hover) {
  .premium-player-shield-svg:hover .player-shield-interactive-sheen { opacity: 1; }
}
.premium-shield-component:active .premium-shield-border-glow { opacity: 1; }
@keyframes premium-shield-shimmer { to { stroke-dashoffset: -349; } }
@keyframes premium-shield-breathe { from { opacity: .6; } to { opacity: .95; } }
@media (max-width: 480px) {
  .premium-shield-component { padding: 8px; }
  .premium-shield-controls button { flex: 1 1 auto; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-shield-edge-shimmer, .premium-shield-border-glow { animation: none; }
  .premium-player-shield-svg .player-shield-interactive-sheen { display: none; transition: none; }
}