/* Share sheet (js/share.js) and the "shared with you" welcome on the title screen.
   Phones: a bottom sheet. Desktop: a centred card. Cream paper, burgundy outlines, CuppaPug pinks, like the rest of the game. */
#shareSheet{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);
  background:rgba(43,14,30,.72);font-family:'Fredoka',system-ui,sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none}
@media (hover:hover) and (pointer:fine){#shareSheet{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
.sh-panel{position:relative;width:min(100%,440px);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--cream);color:var(--burg);
  border:4px solid var(--burg);border-radius:22px;padding:14px 16px 16px;box-shadow:0 8px 0 var(--pink),0 20px 40px rgba(20,4,12,.45);display:flex;flex-direction:column;gap:10px}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Pacifico's loops reach well outside the letters: generous line height and side room so nothing is clipped */
.sh-head h2{margin:0;padding:0 .2em .12em .1em;font:400 clamp(24px,6vmin,30px)/1.5 Pacifico,cursive;color:var(--burg);overflow:visible;text-wrap:balance;min-width:0}
.sh-close{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:3px solid var(--burg);background:#fff;color:var(--burg);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 3px 0 var(--pink)}
.sh-close svg{width:20px;height:20px}
.sh-tabs{position:relative;display:flex;gap:4px;background:#ffe3ef;border-radius:99px;padding:4px;align-self:center}
.sh-tab{position:relative;z-index:1;font:600 14px/1 'Fredoka',sans-serif;color:var(--burg);background:none;border:0;border-radius:99px;padding:8px 14px;min-height:36px;cursor:pointer;transition:color .25s ease}
.sh-tab[aria-selected="true"]{color:#fff}
.sh-tabs .tab-ind{background:var(--burg)}
.sh-stage{display:flex;justify-content:center}
/* the frame's size comes from two numbers (--pw width, --ar height/width), so switching Post and Story glides between shapes */
.sh-preview{--pw:min(100%,280px);--ar:1.25;position:relative;width:var(--pw);height:calc(var(--pw) * var(--ar));transition:width .5s cubic-bezier(.3,1.15,.4,1),height .5s cubic-bezier(.3,1.15,.4,1),transform .5s cubic-bezier(.3,1.15,.4,1);border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#ffd1e4,#ffb0cf);
  box-shadow:0 10px 22px -6px rgba(60,10,30,.45),0 0 0 3px #fff;transform:rotate(-1.5deg)}
.sh-preview[data-format="story"]{--ar:1.7778;--pw:min(100%,190px);transform:rotate(1.2deg)}
.sh-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.sh-preview img.incoming{opacity:0}
.sh-preview img:not([src]){display:none}
.sh-spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:4px solid rgba(255,255,255,.6);border-top-color:var(--pink);opacity:0}
.sh-preview.busy .sh-spin{opacity:1;animation:shSpin .8s linear infinite}
.sh-preview.busy img{opacity:.35}
.sh-preview.none{display:none}
@keyframes shSpin{to{transform:rotate(360deg)}}
.sh-formats{display:flex;justify-content:center;gap:6px}
.sh-formats{position:relative;align-self:center;gap:2px;background:#fff;border:2px solid rgba(124,23,62,.18);border-radius:99px;padding:3px}
.sh-format{position:relative;z-index:1;font:600 13px/1 'Fredoka',sans-serif;color:var(--burg);background:none;border:0;border-radius:99px;padding:7px 14px;cursor:pointer;transition:color .25s ease}
.sh-format[aria-pressed="true"]{color:#fff}
.sh-formats .tab-ind{top:3px;bottom:3px;background:var(--pink)}
.sh-text{margin:0;font-size:14px;font-weight:500;line-height:1.35;color:#5b2239;text-align:center;text-wrap:balance}
.sh-actions{display:flex;flex-direction:column;gap:8px}
.sh-primary{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:16px;border:3px solid var(--burg);color:#fff;cursor:pointer;
  font:700 19px/1 'Fredoka',sans-serif;background:linear-gradient(90deg,#e8458b,#9e1849);box-shadow:0 5px 0 var(--burg)}
.sh-primary svg{width:24px;height:24px}
.sh-primary:disabled{opacity:.6;cursor:wait}
.sh-primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--burg)}
.sh-row{display:flex;gap:8px}
.sh-sec{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border-radius:14px;border:3px solid var(--burg);background:#fff;color:var(--burg);
  font:600 15px/1 'Fredoka',sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--pink)}
.sh-sec svg{width:20px;height:20px;color:var(--pink)}
.sh-sec:not([href]):is(a){opacity:.5;pointer-events:none}
.sh-sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pink)}
.sh-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:2px}
.sh-app{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--burg);font:600 11px/1.1 'Fredoka',sans-serif;padding:4px 0}
.sh-app svg{width:42px;height:42px;padding:10px;border-radius:50%;color:#fff;box-sizing:border-box;box-shadow:0 2px 0 rgba(124,23,62,.25)}
.sh-app.whatsapp svg{background:#25d366}.sh-app.x svg{background:#111}.sh-app.facebook svg{background:#1877f2}
.sh-app.threads svg{background:#111}.sh-app.email svg{background:var(--pink)}
.sh-app:active svg{transform:scale(.94)}
.sh-close:focus-visible,.sh-tab:focus-visible,.sh-format:focus-visible,.sh-primary:focus-visible,.sh-sec:focus-visible,.sh-app:focus-visible{outline:3px solid #ffe38a;outline-offset:2px}
@media (pointer:coarse),(max-width:520px){
  #shareSheet{align-items:flex-end;padding:0}
  .sh-panel{width:100%;max-width:520px;border-radius:24px 24px 0 0;border-bottom:0;padding:12px 16px calc(var(--sab) + 16px);box-shadow:0 -6px 0 var(--pink),0 -16px 40px rgba(20,4,12,.4)}
  .sh-panel::before{content:"";align-self:center;width:44px;height:5px;border-radius:99px;background:rgba(124,23,62,.25);margin:-2px 0 2px}
  .sh-preview{--pw:min(62vw,240px)}
  .sh-preview[data-format="story"]{--pw:min(40vw,160px)}
}
@media (max-height:700px){.sh-preview{--pw:min(52vw,200px)}.sh-preview[data-format="story"]{--pw:min(32vw,120px)}.sh-text{font-size:13px}}
@media (max-height:500px) and (orientation:landscape){
  .sh-panel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr;column-gap:16px;width:min(100%,720px);border-radius:22px;border-bottom:4px solid var(--burg)}
  #shareSheet{align-items:center;padding:8px}
  .sh-panel::before{display:none}
  .sh-head{grid-column:1/3}.sh-stage{grid-column:1;grid-row:2/5}.sh-tabs,.sh-formats,.sh-text,.sh-actions{grid-column:2}
  .sh-preview{--pw:calc((100vh - 110px) / 1.25)}.sh-preview[data-format="story"]{--pw:calc((100vh - 110px) / 1.7778)}
}
@media (prefers-reduced-motion:reduce){.sh-preview.busy .sh-spin{animation:none}.sh-preview,.sh-preview img{transition:none}}

/* ---- arrivals: a friend's share shown on the title screen ---- */
.shared-in{display:flex;align-items:center;gap:12px;margin:-2px 0 10px;padding:10px 12px;background:#fff;border:3px solid var(--burg);border-radius:16px;
  box-shadow:0 3px 0 var(--pink);text-align:left;max-width:420px}
.shared-in .si-pics{flex:0 0 auto;display:flex;flex-direction:row-reverse}
.shared-in .si-pics img{width:52px;height:52px;border-radius:6px;object-fit:cover;background:#f6dccd;box-shadow:0 0 0 3px #fff,0 3px 8px rgba(60,10,30,.3);margin-left:-18px;transform:rotate(-4deg)}
.shared-in .si-pics img:nth-child(2n){transform:rotate(5deg)}
.shared-in .si-pics img:last-child{margin-left:0}
.shared-in .si-big{flex:0 0 auto;font:700 30px/1 'Fredoka',sans-serif;color:var(--pink);text-shadow:2px 2px 0 var(--burg)}
.shared-in .si-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.shared-in b{font-size:16px;line-height:1.2;color:var(--burg)}
.shared-in span{font-size:13px;line-height:1.3;color:#7a4a5c;font-weight:500}
.shared-in a{font-size:13px;font-weight:700;color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.gr-link.invite{margin-top:6px}
#challengeLine{margin:2px 0 4px;font-weight:700;font-size:17px;color:var(--burg)}
#challengeLine.won{color:#17784a}
#hudChallenge{font-size:clamp(11px,2.6vmin,15px)}
@media (max-height:420px){.shared-in{padding:6px 10px;margin-bottom:6px}.shared-in .si-pics img{width:40px;height:40px}.shared-in b{font-size:14px}.shared-in span{display:none}}

/* ---- share entry points: deck header, results row, title links ---- */
.dk-headbtns{display:flex;gap:8px;flex:0 0 auto}
.dk-shareall svg{color:var(--pink)}
.res-row{display:flex;gap:8px;width:100%;align-items:stretch;margin:2px 0 4px}
.res-row .res-grumble{flex:1;margin:0;min-width:0}
.res-share{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:14px;border:3px solid var(--burg);background:var(--pink);color:#fff;
  font:700 15px/1 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 3px 0 var(--burg);touch-action:manipulation;min-height:44px}
.res-share svg{width:20px;height:20px}
.res-share:active{transform:translateY(2px);box-shadow:0 1px 0 var(--burg)}
.res-row .res-grumble.hidden + .res-share{flex:1;justify-content:center}
.title-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.title-links .gr-link{margin:0}
.gr-link.invite svg{width:18px;height:18px;color:var(--pink)}
@media (max-height:700px){#title .card.has-shared #titleGizmo{display:none}}
@media (max-height:420px){.title-links{margin-top:5px}.res-share{min-height:36px;padding:4px 12px}}

/* sliding selection pill shared by the share sheet and the grumble deck tabs (js slide()) */
.tab-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:99px;pointer-events:none;
  transition:transform .42s cubic-bezier(.3,1.25,.5,1),width .42s cubic-bezier(.3,1.25,.5,1)}
@media (prefers-reduced-motion:reduce){.tab-ind{transition:none}}