/* Compact gold challenge share dialog */
body dialog#modal.share-dialog,
body dialog#modal:has(.share-sheet){
  box-sizing:border-box!important;
  width:min(360px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:none!important;
  margin:auto!important;
  padding:24px 6px 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  color:#fff!important;
  font-family:'Manrope',Arial,sans-serif!important;
  animation:shareIn .28s ease both!important;
}
body dialog#modal.share-dialog::backdrop,
body dialog#modal:has(.share-sheet)::backdrop{
  background:#020b14e0!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
@keyframes shareIn{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}
}

body dialog#modal.share-dialog > form[method="dialog"],
body dialog#modal:has(.share-sheet) > form[method="dialog"]{
  position:absolute!important;
  top:0!important;right:0!important;
  height:auto!important;width:auto!important;
  margin:0!important;z-index:6!important;
  pointer-events:none;
}
body dialog#modal.share-dialog > form[method="dialog"] .close,
body dialog#modal:has(.share-sheet) > form[method="dialog"] .close,
body dialog#modal.share-dialog .close,
body dialog#modal:has(.share-sheet) .close{
  pointer-events:auto;
  position:absolute!important;
  top:6px!important;right:0!important;
  float:none!important;margin:0!important;
  width:36px!important;height:36px!important;
  border-radius:50%!important;
  border:2.5px solid #f6d76a!important;
  background:radial-gradient(circle at 35% 28%,#fff1a8,#ffd24a 55%,#c99628 100%)!important;
  color:#1a1204!important;
  font:900 18px/1 Arial,sans-serif!important;
  display:grid!important;place-items:center!important;
  padding:0!important;
  box-shadow:0 4px 14px #0008,0 0 0 3px #f0c84a33,inset 0 1px 0 #fff8!important;
  z-index:6!important;
}
body dialog#modal.share-dialog #modalcontent,
body dialog#modal:has(.share-sheet) #modalcontent,
body dialog#modal.share-dialog .dialog-body,
body dialog#modal:has(.share-sheet) .dialog-body{
  padding:0!important;margin:0!important;
  background:transparent!important;
  min-width:0!important;text-align:center!important;
  overflow:visible!important;
}

.share-sheet{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:22px 16px 16px;
  border-radius:18px;
  border:3px solid transparent;
  background:
    linear-gradient(160deg,#0a2f52 0%,#071f38 48%,#041528 100%) padding-box,
    linear-gradient(135deg,#ffe9a0 0%,#f0c145 22%,#c9972a 48%,#ffe07a 72%,#d4a63a 100%) border-box;
  box-shadow:
    0 24px 60px #000c,
    inset 0 1px 0 #ffffff22,
    inset 0 -18px 36px #0004,
    -8px 0 22px #2ad0ff2e,
    8px 0 22px #2ad0ff2e;
  overflow:visible;
  text-align:center;
}
.share-sheet:before,
.share-sheet:after{
  content:"";
  position:absolute;
  top:18%;bottom:18%;
  width:3px;border-radius:3px;
  background:linear-gradient(180deg,transparent,#5ce8ff,transparent);
  box-shadow:0 0 12px 3px #3ad7ff77;
  pointer-events:none;
}
.share-sheet:before{left:-2px}
.share-sheet:after{right:-2px}

.share-sheet-tab{
  position:absolute;
  top:-16px;left:50%;transform:translateX(-50%);
  z-index:3;
  min-width:118px;
  padding:6px 22px 7px;
  text-align:center;
  font:800 10px/1 'Manrope',Arial,sans-serif;
  letter-spacing:.18em;
  color:#f4f8ff;
  text-transform:uppercase;
  background:
    linear-gradient(180deg,#0d2744 0%,#071a30 100%) padding-box,
    linear-gradient(90deg,#e8c35a,#ffd86a 40%,#c9962e 100%) border-box;
  border:2px solid transparent;
  clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);
  box-shadow:0 4px 12px #0007;
}

.share-sheet-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding-top:4px;
}

.share-sheet-title{
  margin:4px 0 0;
  font:800 italic clamp(22px,5.5vw,28px)/1 Impact,'Arial Black','Bebas Neue',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 0 #03101fcc,0 0 20px #5ecfff44;
}
.share-sheet-title:after{
  content:"";
  display:block;
  width:56px;height:2px;margin:8px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffe34a,#fff8,#ffe34a,transparent);
  box-shadow:0 0 8px #ffd43a88;
}

.share-sheet-sub{
  margin:10px 0 0!important;
  max-width:300px;
  font:600 12px/1.4 'Manrope',Arial,sans-serif!important;
  color:#c8e6f8!important;
}

.share-msg{
  width:100%;
  box-sizing:border-box;
  margin:12px 0 0;
  padding:8px 10px;
  min-height:0;
  max-height:64px;
  border-radius:11px;
  border:1.5px solid #3db7e888;
  background:linear-gradient(165deg,#0d3a5e,#082744);
  color:#e8f6ff;
  font:600 11px/1.35 'Manrope',Arial,sans-serif;
  resize:none;
  text-align:left;
  overflow:auto;
  box-shadow:inset 0 1px 0 #ffffff14;
}

.share-promo{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  width:100%;
  margin-top:10px;
  padding:8px;
  border-radius:12px;
  border:1.5px solid #3db7e888;
  background:linear-gradient(165deg,#0d3a5ecc,#082744ee);
  box-sizing:border-box;
}
.share-badge{
  width:64px!important;
  height:auto!important;
  margin:0!important;
  filter:drop-shadow(0 6px 12px #0008);
  animation:none!important;
}
.share-promo-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.share-friends-box{
  width:100%;
  max-height:140px;
  overflow:auto;
  margin-top:12px;
  padding:8px;
  border-radius:12px;
  border:1.5px solid #3db7e888;
  background:linear-gradient(165deg,#0d3a5e,#082744);
  text-align:left;
  box-sizing:border-box;
}
.share-friends-box .challenge-friend-row{
  width:100%;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 8px;
  margin:0 0 6px;
  border-radius:10px;
  border:1px solid #2f628a;
  background:#031f38;
  color:#e8f6ff;
  cursor:pointer;
  font:inherit;
  text-align:left;
}
.share-friends-box .challenge-friend-row:last-child{margin-bottom:0}
.share-friends-box .pf-empty{
  margin:0;
  padding:8px;
  font:600 12px/1.4 'Manrope',Arial,sans-serif;
  color:#9ec8e4;
  text-align:center;
}

.share-also{
  width:100%;
  margin-top:8px;
  text-align:left;
}
.share-also>span{
  display:block;
  font:800 9px/1 'Manrope',Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffe34a;
  margin-bottom:6px;
}
.share-also-list{display:flex;flex-direction:column;gap:4px}
.share-friend-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid #2f628a;
  background:#031f38;
  color:#e8f6ff;
  cursor:pointer;
  font:700 12px/1 'Manrope',Arial,sans-serif;
}
.share-friend-row span{color:#7dffb0;font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.share-sheet-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
  margin-top:12px;
}

.share-btn{
  appearance:none;
  border:0;
  cursor:pointer;
  min-height:42px;
  padding:10px 12px;
  border-radius:11px;
  font:800 13px/1.2 'Manrope',Arial,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .12s ease,filter .12s ease;
  width:100%;
}
.share-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.share-btn:active{transform:translateY(1px) scale(.98)}
.share-btn:focus-visible{outline:2px solid #ffe34a;outline-offset:2px}

.share-btn-primary{
  color:#082747;
  background:linear-gradient(160deg,#fff1a0 0%,#ffd24a 42%,#f0b820 100%);
  border:1px solid #ffe98a;
  box-shadow:0 3px 0 #b17a12,0 8px 18px #ffc92933,inset 0 1px 0 #fff8;
}
.share-btn-secondary{
  color:#e8f6ff;
  background:linear-gradient(165deg,#0d3a5e,#082744);
  border:2px solid #3db7e8;
  box-shadow:inset 0 1px 0 #ffffff1a,0 6px 14px #0006;
}
.share-btn-wa{
  color:#042019;
  background:linear-gradient(160deg,#6dffb0 0%,#25d366 45%,#128c7e 100%);
  border:1px solid #7dffb8;
  box-shadow:0 3px 0 #0b6b5a,0 8px 18px #25d36633,inset 0 1px 0 #fff6;
}

@media(max-width:400px){
  .share-sheet{padding:20px 12px 14px;border-radius:16px}
  .share-sheet-title{font-size:22px}
  .share-badge{width:56px!important}
  .share-btn{min-height:40px;font-size:12px}
}
@media(orientation:landscape) and (max-height:420px){
  body dialog#modal.share-dialog,
  body dialog#modal:has(.share-sheet){padding:16px 4px 4px!important}
  .share-sheet{padding:14px 12px 12px}
  .share-sheet-title{font-size:18px;margin-top:0}
  .share-sheet-title:after{margin-top:5px}
  .share-sheet-sub{margin-top:6px!important;font-size:11px!important}
  .share-msg{margin-top:6px;max-height:44px;padding:6px 8px;font-size:10px}
  .share-promo{margin-top:6px;padding:6px;gap:8px}
  .share-badge{width:48px!important}
  .share-friends-box{max-height:72px;margin-top:6px}
  .share-also{margin-top:4px}
  .share-sheet-actions{margin-top:8px}
  .share-btn{min-height:34px;padding:6px 10px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  body dialog#modal.share-dialog,
  body dialog#modal:has(.share-sheet){animation:none!important}
}