/* SHAREABLE PLAYER CARD - PORTRAIT FIXED VERSION */

.share-card-open {
  overflow: hidden;
}

.share-card-btn {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: linear-gradient(90deg, #ffd85a, #ff8a00, #ff2f7d, #39d5ff);
  background-size: 240% 100%;
  color: #130b00;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 216, 90, .20);
  animation: shareBtnShine 3s linear infinite;
}

.share-card-btn:active {
  transform: scale(.96);
}

.share-card-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.share-card-modal.hidden {
  display: none;
}

.share-card-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(10px);
}

.share-card-panel {
  position: relative;
  z-index: 2;
  width: min(430px, 96vw);
  max-height: 96dvh;
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid rgba(255, 216, 90, .28);
  background: linear-gradient(180deg, #101525, #05070d);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .75), 0 0 45px rgba(255, 47, 125, .16);
  padding: 14px 12px 16px;
}

.share-card-close {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 29px;
  line-height: 1;
  font-family: Arial, sans-serif;
  cursor: pointer;
}

.share-card-preview-wrap {
  display: flex;
  justify-content: center;
  padding-top: 36px;
}

.share-card-design{
    width:360px;
    height:640px;
    position:relative;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,216,90,.55);
    /*box-shadow:
        0 0 38px rgba(255,216,90,.18),
        inset 0 0 30px rgba(255,255,255,.03);*/

    font-family:'Oswald', Arial, sans-serif;
    color:#fff;
    text-align:center;

   background:
        radial-gradient(circle at 18% 78%, rgba(98, 0, 110, .45), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(0, 120, 255, .22), transparent 26%),
        radial-gradient(circle at 50% 20%, rgba(130, 0, 40, .22), transparent 22%),
        linear-gradient(180deg, #090018 0%, #030d27 48%, #120012 100%);
}

.share-card-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.share-card-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, .13) 42%, transparent 50% 100%), linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 28%);
  animation: shareCardSweep 4s linear infinite;
}

.share-card-side-glow {
  position: absolute;
  width: 46%;
  height: 56%;
  filter: blur(50px);
  opacity: .18;
  pointer-events: none;
}

.share-card-side-glow.glow-left {
  left: -18%;
  top: 22%;
  background: radial-gradient(circle, #ff2f7d, transparent 70%);
}

.share-card-side-glow.glow-right {
  right: -18%;
  top: 8%;
  background: radial-gradient(circle, #39d5ff, transparent 70%);
}

.share-card-kicker,
.share-card-orbit,
.share-card-player-name,
.share-card-team-box,
.share-card-price-box {
  position: relative;
  z-index: 3;
}

.share-card-kicker{
    margin:26px auto 0;
    min-height:46px;
    width:max-content;
    max-width:82%;
    padding:10px 22px;
    border-radius:999px;
    border:1px solid rgba(255,216,90,.58);
    background:linear-gradient(90deg, rgba(255,216,90,.10), rgba(255,0,90,.08), rgba(0,140,255,.08));
    box-shadow:0 0 20px rgba(255,216,90,.15);

    color:#FFC107;
    font-size:22px;
    line-height:1;
    font-weight:900;
    letter-spacing:2px;
}

.share-card-orbit {

  width: 250px;
  height: 250px;
  margin: 44px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  width: 214px;
  height: 214px;
  margin-left: -107px;
  margin-top: -107px;
  border: 3px solid rgba(255, 216, 90, .82);
  box-shadow: 0 0 34px rgba(255, 216, 90, .42), inset 0 0 20px rgba(255, 216, 90, .08);
  animation: shareRingPulse 1.6s ease-in-out infinite;
}

.orbit-two {
  width: 252px;
  height: 252px;
  margin-left: -126px;
  margin-top: -126px;
  border: 2px dashed rgba(57, 213, 255, .68);
  animation: shareCardRotate 12s linear infinite;
}

.share-card-photo {
  position: relative;
  z-index: 4;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, #fff2a8, #f7c45c, #ff2f7d, #39d5ff, #ffffff);
  background-size: 260% 260%;
  animation: shareCardText 5.2s linear infinite;
  box-shadow: 0 0 22px rgba(255, 216, 90, .42), 0 0 40px rgba(255, 47, 125, .16), 0 0 52px rgba(57, 213, 255, .14);
}

.share-card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 4px solid rgba(5, 6, 14, .96);
  background: #0c0e18;
}

.share-card-player-name {
  width: 88%;
  margin: 34px auto 0;
  font-size: 28px;
  line-height: 1.04;
  text-transform:uppercase;
  font-weight: 900;
  color: #34ff22;
  text-shadow: 0 0 18px rgba(255, 255, 255, .14), 0 3px 12px rgba(0, 0, 0, .58);
}

.share-card-team-box,
.share-card-price-box {
  width: 86%;
  margin: 18px auto 0;
  border-radius: 18px;
  padding: 14px 14px 16px;
  /*border: 1px solid rgba(255, 216, 90, .58);*/
  /*box-shadow: inset 0 0 18px rgba(255, 216, 90, .06), 0 0 26px rgba(255, 47, 125, .10);*/
}

.share-card-team-box{
    width:86%;
    margin:18px auto 0;
    border-radius:8px;
    /*padding:18px 14px 18px;*/
    border:1px solid rgba(255,216,90,.58);
   background:linear-gradient(135deg, rgba(110,20,20,.88), rgba(60,10,55,.88) 48%, rgba(10,10,16,.94));
   /*background:#0073a7;*/
   
    /*box-shadow:
        inset 0 0 18px rgba(255,216,90,.06),
        0 0 26px rgba(255,47,125,.10);*/
}

.share-card-price-box {
  /*background: linear-gradient(135deg, rgba(11, 9, 10, .92), rgba(20, 14, 25, .90) 55%, rgba(7, 7, 12, .95));
  box-shadow: inset 0 0 18px rgba(255, 216, 90, .06), 0 0 24px rgba(57, 213, 255, .06);*/
}

.share-card-team-box span{
    display:block;
    margin:0;
    padding:0;
    background:none !important;
    box-shadow:none !important;
    color:#fff1a6;
    font-size:14px;
    line-height:1;
    letter-spacing:2px;
    font-weight:900;
}

.share-card-team-box strong{
    display:block;
    margin-top:12px;
    padding:0;
    background:none !important;
    box-shadow:none !important;
    border:0 !important;
    color:#FF9800 !important;
    -webkit-text-fill-color:#FFC107 !important;
    text-transform:uppercase;
    font-size:24px;
    line-height:1.1;
    letter-spacing:1px;
    text-shadow:0 0 12px rgba(255,193,7,.18);
}

.share-card-team-box strong {
  display: block;
  margin-top: 10px;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: 1px;
  color: #ffe07a;
  text-transform: uppercase;
  /*text-shadow: 0 0 15px rgba(255, 216, 90, .22), 0 3px 12px rgba(0, 0, 0, .55);*/
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.share-card-price-box strong {
  display: block;
  margin-top: 10px;
  color: #ffd85a;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 1px;
  /*text-shadow: 0 0 16px rgba(255, 216, 90, .28), 0 4px 14px rgba(0, 0, 0, .62);*/
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.share-card-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.share-action-btn {
  border: 0;
  border-radius: 15px;
  padding: 13px 18px;
  color: #110b00;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .7px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}

.download-card-btn {
  min-width: 180px;
  background: linear-gradient(90deg, #fff2a8, #f7c45c, #ff8a00);
}

.share-card-note {
  margin-top: 10px;
  color: rgba(255, 255, 255, .65);
  font-size: 12px;
  text-align: center;
}

@keyframes shareBtnShine {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 240% 0
  }
}

@keyframes shareCardRotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

@keyframes shareCardSweep {
  0% {
    transform: translateX(-120%)
  }
  100% {
    transform: translateX(120%)
  }
}

@keyframes shareCardText {
  0% {
    background-position: 0% 50%
  }
  100% {
    background-position: 330% 50%
  }
}

@keyframes shareRingPulse {
  0%,
  100% {
    transform: scale(.96);
    opacity: .72
  }
  50% {
    transform: scale(1.05);
    opacity: 1
  }
}

@media(max-width:420px) {
  .share-card-design {
    width: 330px;
    height: auto;
    border-radius: 25px;
	padding-bottom:16px
  }
  .share-card-kicker {
    margin-top: 22px;
  }
  .share-card-orbit {
    width: 214px;
    height: 214px;
    margin-top: 16px;
  }
  .orbit-one {
    width: 184px;
    height: 184px;
    margin-left: -92px;
    margin-top: -92px;
  }
  .orbit-two {
    width: 214px;
    height: 214px;
    margin-left: -107px;
    margin-top: -107px;
  }
  .share-card-photo {
    width: 158px;
    height: 158px;
  }
  .share-card-player-name {
    font-size: 24px;
    margin-top: 16px;
  }
  .share-card-team-box strong {
    font-size: 30px;
  }
  .share-card-price-box strong {
    font-size: 35px;
  }
}

.share-card-price-box{
    width:86%;
    margin:10px auto 0;
    border-radius:8px;
    /*padding:18px 14px 20px;*/
    border:1px solid rgba(255,216,90,.56);
    background:linear-gradient(135deg, rgba(18,14,14,.94), rgba(25,16,34,.92) 55%, rgba(8,8,12,.96));
    /*box-shadow:
        inset 0 0 18px rgba(255,216,90,.06),
        0 0 24px rgba(57,213,255,.06);*/
}

.share-card-price-box span{
    display:block;
    margin:0;
    padding:0;
    background:none !important;
    box-shadow:none !important;
    color:#fff1a6;
    font-size:14px;
    line-height:1;
    letter-spacing:2px;
    font-weight:900;
}

.share-card-price-box strong{
    display:block;
    margin-top:14px;
    padding:0;
    background:none !important;
    box-shadow:none !important;
    border:0 !important;
    color:#EEA71A !important;
    -webkit-text-fill-color:#EEA71A !important;
    font-size:35px;
    line-height:1;
    font-weight:900;
    letter-spacing:1px;
    text-shadow:0 0 14px rgba(238,167,26,.20);
}

@media(max-width:420px){

    .share-card-kicker{
        font-size:20px;
        min-height:42px;
        padding:9px 18px;
    }

    .share-card-team-box strong{
        font-size:24px;
    }

    .share-card-price-box strong{
        font-size:35px;
    }
}