/* play: owned by the play agent. Small playful moments; nothing here takes up layout space. */

/* Toasts, just above the HUD chip */
.pl-toasts { position: fixed; left: 20px; bottom: 62px; z-index: 45; width: calc(100vw - 40px); max-width: 420px; pointer-events: none; }
.pl-toast { position: absolute; left: 0; bottom: 0; max-width: 100%; transition: translate .3s var(--ease); margin: 0; padding: 7px 13px; border-radius: 999px; background: rgba(12,17,26,.84); color: var(--cream); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 700 13px/1.3 var(--body); letter-spacing: .02em; box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); animation: pl-in .35s var(--ease) both; }
.pl-toast.out { animation: pl-out .4s ease both; }
@keyframes pl-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes pl-out { to { opacity: 0; transform: translateY(-4px); } }

/* Cheddar in the HUD */
.pl-hud-ched { color: var(--gold); display: inline-block; }
.pl-bump { animation: pl-bump .5s var(--ease); }
@keyframes pl-bump { 40% { transform: translateY(-3px) scale(1.12); } }

/* The payoff line under the last Play button. Absolutely placed so it never moves anything. */
#signup .play-group, .closing .play-group { position: relative; }
.play-group .pl-payoff { position: absolute; top: 100%; left: 0; margin: 12px 0 0; max-width: 46ch; font: 700 13px/1.45 var(--body); letter-spacing: .02em; color: var(--gold); opacity: .9; }
.pl-payoff:empty { display: none; }

/* Press C: flash and a polaroid that drops into the corner */
.pl-flash { position: fixed; inset: 0; z-index: 60; background: #FFF8EA; pointer-events: none; animation: pl-flash .5s ease-out both; }
@keyframes pl-flash { from { opacity: .55; } to { opacity: 0; } }
.pl-polaroid { position: fixed; right: 24px; bottom: 24px; z-index: 46; width: 172px; margin: 0; padding: 10px 10px 8px; background: #FBF8F1; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 24px 40px -18px rgba(0,0,0,.65); rotate: 4deg; pointer-events: none; animation: pl-drop 3.3s var(--ease) both; }
.pl-shot { display: block; aspect-ratio: 1; background: #cfd8de linear-gradient(#EEF2F2, #DCE8F0) center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pl-polaroid figcaption { margin-top: 6px; font: 700 19px/1.05 'Caveat', 'Bradley Hand', cursive; color: #23222B; text-align: center; }
.pl-stamp { position: absolute; top: 16px; right: 16px; font: 800 10px/1 var(--body); letter-spacing: .06em; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes pl-drop {
  0% { opacity: 0; transform: translateY(-46px) scale(1.08); rotate: -8deg; }
  14% { opacity: 1; transform: none; rotate: 4deg; }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(12px); }
}

/* Konami: the logo lands a 360 */
.pl-spin { animation: pl-spin .9s cubic-bezier(.3,.7,.2,1); }
@keyframes pl-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* Powder puffs and powder days */
.pl-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

/* The chairlift between Social and Clipping: zero height, drawn over the two sections' padding */

/* 404: the wandering pin */
.pl-lost { position: absolute; right: 5%; top: 50%; width: min(420px, 36vw); translate: 0 -50%; pointer-events: none; }
.pl-lost svg { display: block; width: 100%; height: auto; }
.pl-lost rect { fill: rgba(30,58,48,.6); stroke: #C49A55; stroke-width: 2; }
.pl-lost path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pl-lost .t { stroke: rgba(241,233,216,.4); stroke-width: 2; }
.pl-lost .w { stroke: var(--cream); stroke-width: 2.2; stroke-dasharray: 1 8; opacity: .75; }
.pl-lost .pin { fill: var(--coral); stroke: var(--night); stroke-width: 1.5; }
.pl-lost circle { fill: var(--cream); }
.pl-lost text { text-anchor: middle; }
.pl-lost .n { fill: var(--cream); font: 700 14px 'Cinzel', serif; letter-spacing: 2px; }
.pl-lost .y { fill: var(--gold); font: 700 24px 'Caveat', cursive; }

@media (max-width: 760px) {
  .pl-toasts { left: 16px; bottom: 16px; width: calc(100vw - 32px); }
  .pl-lost { top: auto; bottom: 28px; right: 12px; width: 230px; translate: none; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-toast, .pl-toast.out, .pl-bump, .pl-spin { animation: none; transition: none; }
  .pl-polaroid { animation: pl-fade 3.3s linear both; }
  @keyframes pl-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}
/* In the crew section the social links follow the Play button: keep room for the payoff line above them. */
#signup .signup-play { padding-bottom: 58px; }
#signup .follow { margin-top: 6px; }