/* The Lost Games - Insert Coin nudge (v2): a small donation prompt for the arcade player.

   Built on the FeralUI "Nudge" pattern (feralui.dev/nudge): a photo header with a
   verified chip, a title and one line of copy, amount pills, one big call to
   action, and a quiet
   "No thanks" that gets a playful reaction on hover - here a gold coin pops up
   and pleads, and the cassette art loses its colour. Redesigned in the site's
   Insert Coin look (cabinet glass, amber neon, coin tokens, the TLG-CREDIT slot),
   and its checkout is the hub's own PayPal flow. Behaviour: donate-nudge-v2.js.

   Loaded by the arcade player and every dedicated game page. */

.tlg-nudge {
  --amber: #ffb443;
  --cyan: #4df2ff;
  --magenta: #ff4ca8;
  --ink: #f7f2e8;
  --muted: #aeb8b5;
  --pixel: "Consolas", "Courier New", monospace;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  /* above a game's player and its touch controls in the hub (the hub's
     turn-your-phone card sits one step higher still) */
  z-index: 2147482000;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 12px 12px 10px;
  border: 1px solid rgba(255, 180, 67, 0.45);
  border-radius: 28px;
  color: var(--ink);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 180, 67, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 40%),
    rgba(8, 9, 13, 0.97);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 36px rgba(255, 180, 67, 0.16);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.tlg-nudge.is-in {
  opacity: 1;
  transform: none;
}

.tlg-nudge.is-out {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition-duration: 0.25s, 0.3s;
}

.tlg-nudge button {
  font: inherit;
  cursor: pointer;
}

.tlg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* one step at a time: ask -> pay -> thanks */
.tlg-nudge[data-step="ask"] .tlg-nudge-pay,
.tlg-nudge[data-step="ask"] .tlg-nudge-thanks,
.tlg-nudge[data-step="pay"] .tlg-nudge-ask,
.tlg-nudge[data-step="pay"] .tlg-nudge-thanks,
.tlg-nudge[data-step="thanks"] .tlg-nudge-ask,
.tlg-nudge[data-step="thanks"] .tlg-nudge-pay {
  display: none;
}

.tlg-nudge-pay,
.tlg-nudge-thanks {
  animation: tlgNudgeSheet 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.tlg-nudge-x {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(8, 9, 13, 0.72);
  backdrop-filter: blur(6px);
}

.tlg-nudge-x svg {
  width: 16px;
  height: 16px;
}

.tlg-nudge-x:hover,
.tlg-nudge-x:focus-visible {
  border-color: rgba(77, 242, 255, 0.7);
  outline: none;
}

/* ------------------------------------------------------------------ ask */
.tlg-nudge-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}

.tlg-nudge-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: filter 0.35s ease, transform 0.6s ease;
}

.tlg-nudge-fade {
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(transparent, rgba(8, 9, 13, 0.92));
}

.tlg-nudge-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(255, 180, 67, 0.42);
  border-radius: 999px;
  color: #fff1bd;
  background: rgba(8, 9, 13, 0.78);
  font: 700 11px/1 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.tlg-nudge-chip svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.tlg-nudge .coin-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle, rgba(0, 0, 0, 0.34) 0 18%, transparent 19%),
    conic-gradient(from 18deg, #ffb443, #f7f2e8, #cf7d24, #ffdb74, #ffb443);
  box-shadow: inset 0 0 0 1px rgba(50, 25, 4, 0.48), 0 0 12px rgba(255, 180, 67, 0.36);
}

.tlg-nudge-kicker {
  margin: 12px 6px 2px;
  color: var(--amber);
  font: 700 10px/1 var(--pixel);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tlg-nudge h2 {
  margin: 6px 6px 4px;
  font: 900 22px/1.05 "Arial Black", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.tlg-nudge-desc {
  margin: 0 6px 12px;
  color: var(--muted);
  font-size: 14px;
}

.tlg-nudge-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 2px;
}

.tlg-nudge-pills button {
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  font: 700 14px/1 var(--pixel);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s,
    transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.tlg-nudge-pills button:hover,
.tlg-nudge-pills button:focus-visible {
  border-color: rgba(255, 180, 67, 0.72);
  outline: none;
}

.tlg-nudge-pills button:active {
  transform: scale(0.92);
}

/* the chosen amount becomes a coin */
.tlg-nudge-pills button[aria-pressed="true"] {
  border-color: rgba(255, 220, 112, 0.95);
  color: #241503;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.7) 0 7%, transparent 8%),
    conic-gradient(from 18deg, #ffb443, #f7e3b0, #cf7d24, #ffdb74, #ffb443);
  box-shadow: inset 0 0 0 2px rgba(80, 40, 6, 0.35), 0 0 16px rgba(255, 180, 67, 0.42);
  transform: translateY(-1px);
}

.tlg-nudge-custom {
  display: grid;
  gap: 6px;
  margin: 10px 4px 0;
  color: rgba(247, 242, 232, 0.75);
  font: 700 10px/1 var(--pixel);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tlg-nudge-custom[hidden] {
  display: none;
}

.tlg-nudge-custom input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(2, 3, 8, 0.84);
  font: 700 16px var(--pixel);
  outline: none;
}

.tlg-nudge-custom input:focus {
  border-color: rgba(77, 242, 255, 0.74);
  box-shadow: 0 0 0 2px rgba(77, 242, 255, 0.14);
}

/* the re-wording: words that changed roll in, the rest hold still */
.tlg-morph > span[aria-hidden] {
  display: inline-block;
}

.tlg-morph > .is-new {
  animation: tlgNudgeMorph 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.tlg-nudge-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 180, 67, 0.7);
  border-radius: 999px;
  color: #fff8e6;
  background:
    linear-gradient(180deg, rgba(255, 180, 67, 0.42), rgba(255, 76, 168, 0.18)),
    rgba(22, 13, 8, 0.94);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 0 24px rgba(255, 180, 67, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.35);
  font: 700 13px/1 var(--pixel) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.2s, border-color 0.2s, opacity 0.15s;
}

.tlg-nudge-cta:hover,
.tlg-nudge-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(77, 242, 255, 0.75);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 0 30px rgba(77, 242, 255, 0.24),
    0 14px 30px rgba(0, 0, 0, 0.4);
  outline: none;
}

.tlg-nudge-cta:active {
  transform: scale(0.97);
}

.tlg-nudge-cta:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* the coin slot on the button */
.tlg-nudge-slot {
  flex: 0 0 auto;
  width: 22px;
  height: 6px;
  border-radius: 999px;
  background: #06070a;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 180, 67, 0.45);
}

.tlg-nudge-foot {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.tlg-nudge-no {
  position: relative;
  z-index: 2;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font: 600 13px/1 "Segoe UI", system-ui, sans-serif !important;
  transition: color 0.15s;
}

.tlg-nudge-no:hover,
.tlg-nudge-no:focus-visible {
  color: var(--ink);
  outline: none;
}

/* The feral moment: pointing at "No thanks" brings a coin up from the bottom
   edge of the card to plead, the cassette art drains of colour and the Insert
   button glows harder. "No thanks" still works on the first click - the coin
   only asks. */
.tlg-nudge-buddy {
  position: absolute;
  left: calc(50% - 104px);
  bottom: -2px;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0 8%, transparent 9%),
    conic-gradient(from 18deg, #ffb443, #f7e3b0, #cf7d24, #ffdb74, #ffb443);
  box-shadow: inset 0 0 0 3px rgba(80, 40, 6, 0.45), 0 4px 10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(44px) rotate(-24deg) scale(0.7);
  transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.3, 1), opacity 0.2s;
  pointer-events: none;
}

.tlg-nudge-buddy i {
  position: absolute;
  top: 14px;
  width: 6px;
  height: 9px;
  border-radius: 3px;
  background: #2a1604;
}

.tlg-nudge-buddy i:first-child {
  left: 12px;
}

.tlg-nudge-buddy i:nth-child(2) {
  right: 12px;
}

/* a worried little mouth */
.tlg-nudge-buddy b {
  position: absolute;
  left: 50%;
  top: 27px;
  width: 12px;
  height: 6px;
  margin-left: -6px;
  border: 2px solid #2a1604;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.tlg-nudge-bubble {
  position: absolute;
  left: calc(50% - 132px);
  bottom: 44px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 10px 10px 10px 2px;
  color: #2a1604;
  background: #fff1bd;
  font: 800 11px/1 var(--pixel);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 1.4, 0.3, 1);
  pointer-events: none;
}

.tlg-nudge.is-tempted .tlg-nudge-buddy {
  opacity: 1;
  transform: none;
  animation: tlgNudgeWag 1.2s 0.45s ease-in-out infinite;
}

.tlg-nudge.is-tempted .tlg-nudge-bubble {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

.tlg-nudge.is-tempted .tlg-nudge-hero img {
  filter: saturate(0.3) brightness(0.8);
  transform: scale(1.03);
}

.tlg-nudge.is-tempted .tlg-nudge-cta {
  animation: tlgNudgeBeg 1.1s ease-in-out infinite;
}

/* ------------------------------------------------------------------ pay */
.tlg-nudge-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin: 2px 0 0 4px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  font: 700 11px/1 var(--pixel) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tlg-nudge-back svg {
  width: 14px;
  height: 14px;
}

.tlg-nudge-receipt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 180, 67, 0.45);
  border-radius: 14px;
  background: rgba(255, 180, 67, 0.06);
  font: 700 12px/1.2 var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tlg-nudge-receipt span:nth-child(2) {
  color: var(--muted);
}

.tlg-nudge-receipt b {
  color: var(--amber);
  font-size: 18px;
}

.tlg-nudge-paypal {
  min-height: 110px;
  margin: 0 4px;
  padding: 12px;
  border-radius: 16px;
  color: #2a1a06;
  background: #f7f2e8;
  font: 600 13px/1.4 "Segoe UI", system-ui, sans-serif;
}

.tlg-nudge-paypal[data-state="loading"],
.tlg-nudge-paypal[data-state="missing"] {
  display: grid;
  place-items: center;
  text-align: center;
}

.tlg-nudge-note {
  margin: 10px 6px 4px;
  color: rgba(255, 180, 67, 0.86);
  font: 700 10px/1.4 var(--pixel);
  text-transform: uppercase;
}

/* --------------------------------------------------------------- thanks */
.tlg-nudge-thanks {
  position: relative;
  padding: 34px 12px 22px;
  overflow: hidden;
  text-align: center;
}

.tlg-nudge-thanks p {
  margin: 0;
  color: var(--muted);
}

.tlg-nudge-coins i {
  position: absolute;
  top: -30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(from 18deg, #ffb443, #f7e3b0, #cf7d24, #ffdb74, #ffb443);
  box-shadow: inset 0 0 0 2px rgba(80, 40, 6, 0.4);
  animation: tlgNudgeCoinFall 1.6s cubic-bezier(0.4, 0, 0.8, 0.6) infinite;
}

.tlg-nudge-coins i:nth-child(1) { left: 12%; animation-delay: 0s; }
.tlg-nudge-coins i:nth-child(2) { left: 32%; animation-delay: 0.35s; }
.tlg-nudge-coins i:nth-child(3) { left: 52%; animation-delay: 0.15s; }
.tlg-nudge-coins i:nth-child(4) { left: 72%; animation-delay: 0.55s; }
.tlg-nudge-coins i:nth-child(5) { left: 88%; animation-delay: 0.25s; }

@keyframes tlgNudgeSheet {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes tlgNudgeMorph {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes tlgNudgeWag {
  0% { transform: scale(1) rotate(0deg); }
  18% { transform: scale(0.92) rotate(0deg); }
  40% { transform: scale(1.04) rotate(11deg); }
  62% { transform: scale(1.02) rotate(-9deg); }
  82% { transform: scale(1) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes tlgNudgeBeg {
  0%, 100% { box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 0 24px rgba(255, 180, 67, 0.22), 0 12px 26px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 180, 67, 0.55), 0 12px 26px rgba(0, 0, 0, 0.35); }
}

@keyframes tlgNudgeCoinFall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(220px) rotate(300deg); opacity: 0; }
}

/* phones: a bottom sheet across the screen */
@media (max-width: 520px) {
  .tlg-nudge {
    right: 10px;
    left: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    border-radius: 24px;
    transform-origin: 50% 100%;
  }
}

/* short screens - a phone held sideways in a game's player: drop the photo
   and tighten, so the whole ask fits without scrolling */
@media (max-height: 520px) {
  .tlg-nudge {
    width: min(330px, calc(100vw - 24px));
    padding: 8px 10px 6px;
    border-radius: 22px;
  }

  .tlg-nudge-hero {
    display: none;
  }

  .tlg-nudge-x {
    top: 10px;
    right: 10px;
  }

  .tlg-nudge-kicker {
    margin-top: 6px;
    margin-right: 40px;
  }

  .tlg-nudge h2 {
    font-size: 18px;
  }

  .tlg-nudge-desc {
    margin-bottom: 8px;
    font-size: 12.5px;
  }

  .tlg-nudge-pills button {
    min-height: 36px;
  }

  .tlg-nudge-cta {
    min-height: 44px;
  }

  .tlg-nudge-no {
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlg-nudge,
  .tlg-nudge * {
    animation: none !important;
    transition: none !important;
  }
}