/* zazadog.fun/creators/ (creators.js): the Ambassadors page's look (/ambassadors/amb.css) and a few pieces of its own. */
.cr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* a field only bots fill */
.cr-welcome { margin: 0 0 16px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--green) 60%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--green) 10%, transparent); color: #fff; font-size: 19px; }
.cr-me { display: grid; gap: 16px; }
.cr-me .me-name b { font: 400 28px var(--display); color: #fff; overflow-wrap: anywhere; }
.cr-me .stats { margin-top: 0; }
.cr-me .box p { margin: 0; color: var(--muted); font-size: 18px; }
.cr-me .forget { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); font-size: 17px; text-decoration: underline; cursor: pointer; }

/* Hero: a creator's own page with its targets (in front) and a phone filming a fight, in the World's dark bezels with a
   thin gold rim, a target-reached toast, a real PSA 10 card in its slab beside them and a REC chip, in front of the Colosseum's crowd (the painting is
   960 x 540: drawn pixel for pixel, its stands and banners in view). Nothing sits on the screens. */
.cr-art { min-height: 0; height: clamp(330px, 38vw, 470px); }
.cr-art .cr-phone { position: absolute; top: 0; height: 100%; aspect-ratio: 258 / 504; padding: 4.2% 4%; border-radius: 13% / 6.6%; background: linear-gradient(160deg, #3b3352, #0d0f26 38%, #1c1a38); box-shadow: inset 0 0 0 1.5px rgba(232, 196, 106, 0.62), 0 0 0 2px #05061a, 0 24px 44px rgba(0, 0, 10, 0.65), 0 0 30px rgba(255, 190, 60, 0.2); }
.cr-art .cr-phone img { position: static; display: block; width: 100%; height: 100%; border-radius: 9% / 4.5%; filter: none; }
.cr-phone-page { left: 2%; top: 9% !important; height: 90% !important; rotate: -5deg; z-index: 2; }
.cr-phone-fight { left: 46%; top: 6% !important; height: 78% !important; rotate: 6deg; z-index: 1; }
.cr-art .cr-card { position: absolute; left: 87%; top: -6%; z-index: 3; width: 14%; aspect-ratio: 400 / 682; border-radius: 4px; overflow: hidden; rotate: 9deg; box-shadow: 0 14px 24px rgba(0, 0, 10, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 26px rgba(255, 210, 63, 0.4); animation: bob 3s ease-in-out infinite; }
.cr-art .cr-card img { position: static; width: 100%; height: 100%; object-fit: cover; filter: none; }
@media (min-width: 1200px) { .cr-art .cr-card { left: 89%; top: -4%; width: 19%; } } /* room beside the art: the slab bigger */
.cr-rec { position: absolute; left: 56%; top: -2%; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 3px 9px; border-radius: 99px; background: rgba(5, 6, 22, 0.9); border: 2px solid rgba(255, 92, 92, 0.7); color: #fff; font: 400 18px/1 var(--ui); letter-spacing: 0.1em; box-shadow: 0 8px 18px rgba(0, 0, 10, 0.5); rotate: 4deg; }
.cr-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: twinkle 1.6s ease-in-out infinite; }
/* the toast a creator gets when a target is reached, over the page's top edge */
.cr-toast { position: absolute; left: -5%; top: 0; z-index: 4; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 7px 14px 7px 8px; border: 1px solid rgba(255, 241, 166, 0.9); border-radius: 12px; background: linear-gradient(180deg, #fff6c8, #ffd23f 48%, #dc9a1c); box-shadow: 0 10px 22px rgba(0, 0, 10, 0.55), 0 0 26px rgba(255, 210, 63, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); color: #2a1a00; rotate: -5deg; animation: bob 3.4s ease-in-out infinite 0.8s; }
.cr-toast > i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(42, 26, 0, 0.88); font-size: 19px; font-style: normal; line-height: 1; }
.cr-toast small { font: 400 14px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
.cr-toast b { font: 400 25px/1 var(--display); color: #1d1200; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
@media (prefers-reduced-motion: reduce) { .cr-art .cr-card, .cr-rec i, .cr-toast { animation: none; } }
.cr-scene { --scene-at: 50% 30%; }

/* Creator or ambassador: the two tracks are in amb.css (.tracks), shared with /ambassadors/. */

/* The targets as what they earn in all by each step (the homepage's Creators card does the same): bars rising left to
   right on a gold line, the total big in gold on top, the players at the foot; each bar taller and its gold stronger
   (--k 0-5), the last one solid gold on slow turning rays. The bars rise one after another the first time they come into
   view (creators.js: .wait, then .rise). Phones: the bars lie down and grow to the right. */
.cr-targets { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px 22px; align-items: start; }
.cr-earn { position: relative; isolation: isolate; overflow: hidden; padding: 18px 18px 0; border: 1px solid var(--line-2); border-radius: 6px; background: radial-gradient(55% 75% at 92% 100%, rgba(255, 190, 60, 0.22), transparent 70%), var(--glass); box-shadow: var(--glass-shadow); }
.cr-earn::before { content: ""; position: absolute; z-index: -1; right: calc(18px + (100% - 86px) / 12); bottom: 285px; width: 520px; aspect-ratio: 1; translate: 50% 50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 120, 0.2) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, 0.45) 36%, transparent 70%); mask-image: radial-gradient(closest-side, #000 10%, rgba(0, 0, 0, 0.45) 36%, transparent 70%);
  animation: spin 90s linear infinite; }
.cr-earn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 14px; }
.cr-earn-head b { font: 400 24px var(--display); color: #fff; }
.cr-earn-head span { color: var(--muted); font-size: 18px; }
.ladder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 10px; margin: 0; padding: 0; border-bottom: 3px solid rgba(255, 210, 63, 0.6); list-style: none; }
.ladder li { --k: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; min-height: calc(132px + var(--k) * 30px); padding: 14px 4px 10px; border: 2px solid color-mix(in srgb, var(--gold) calc(28% + var(--k) * 12%), transparent); border-bottom: 0; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) calc(9% + var(--k) * 6%), #10143a), rgba(9, 12, 34, 0.92)); box-shadow: 0 0 calc(4px + var(--k) * 6px) rgba(255, 210, 63, calc(0.05 + var(--k) * 0.05)); text-align: center; }
.ladder li:nth-child(2) { --k: 1; }
.ladder li:nth-child(3) { --k: 2; }
.ladder li:nth-child(4) { --k: 3; }
.ladder li:nth-child(5) { --k: 4; }
.ladder li:nth-child(n + 6) { --k: 5; }
.ladder em { order: -1; margin-bottom: auto; font: 400 clamp(18px, 23cqi, 42px)/1 var(--display); font-style: normal; white-space: nowrap; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); filter: var(--zw-drop); }
.ladder b { font: 400 24px/1 var(--display); color: #fff; }
.ladder span { color: var(--muted); font-size: 15px; letter-spacing: 0.1em; line-height: 1.1; text-transform: uppercase; }
.ladder i { margin-top: 3px; color: var(--cyan); font-size: 15px; font-style: normal; line-height: 1.05; }
.ladder li:last-child { border-color: #fff1a6; background: linear-gradient(180deg, #fff6c8, #ffd23f 42%, #dc9a1c); box-shadow: 0 0 44px rgba(255, 210, 63, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.ladder li:last-child em { color: #1d1200; background-image: none; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.6)); }
.ladder li:last-child b { color: #1d1200; }
.ladder li:last-child span, .ladder li:last-child i { color: #4a3000; }
.ladder.wait li { opacity: 0; translate: 0 26px; }
.ladder.rise li { animation: rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) calc(var(--k) * 110ms) both; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@media (prefers-reduced-motion: reduce) { .cr-earn::before { animation: none; } }
.cr-shot { grid-row: span 2; margin: 0; display: grid; justify-items: center; gap: 8px; }
.cr-shot img { width: 100%; height: auto; padding: 9px; border-radius: 30px; background: linear-gradient(160deg, #3b3352, #0d0f26 38%, #1c1a38); box-shadow: inset 0 0 0 1.5px rgba(232, 196, 106, 0.62), 0 0 0 2px #05061a, 0 18px 34px rgba(0, 0, 10, 0.55), 0 0 26px rgba(255, 190, 60, 0.16); }
.cr-shot figcaption { color: var(--muted); font-size: 17px; text-align: center; }
.cr-why { margin: 0; padding: 0; list-style: none; }

/* Video ideas: a real game picture over each. */
.cr-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cr-ideas li { display: grid; align-content: start; gap: 6px; padding: 8px 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); box-shadow: var(--glass-shadow); transition: border-color 0.15s, translate 0.15s; }
.cr-ideas li:hover { border-color: var(--line-2); translate: 0 -2px; }
.cr-ideas figure { margin: 0 0 4px; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: #04061a; box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.16); }
.cr-ideas img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cr-ideas b { padding: 0 4px; font: 400 19px/1.15 var(--display); color: #fff; }
.cr-ideas small { padding: 0 4px; color: var(--muted); font-size: 17px; }

/* Their page: targets with a bar to the next one. */
.cr-goal { display: grid; gap: 10px; }
.cr-goal .goal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.cr-goal .goal-head b { font: 400 22px var(--display); color: #fff; }
.cr-goal .goal-head span { color: var(--muted); font-size: 18px; }
.cr-goal .goal-head span b { font-size: 26px; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); filter: var(--zw-drop); }
.cr-goal .meter { height: 14px; }
.cr-goal .meter > span { background: linear-gradient(90deg, #dc9a1c, #ffd23f 75%, #fff1a6); box-shadow: 0 0 12px rgba(255, 210, 63, 0.55); }
.cr-goal ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-goal li { display: grid; justify-items: center; gap: 0; padding: 8px 6px; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 6, 20, 0.42); color: var(--muted); font-size: 16px; text-align: center; }
.cr-goal li b { font: 400 22px var(--display); color: #fff; }
.cr-goal li em { margin-top: 2px; font: 400 19px var(--display); font-style: normal; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); filter: var(--zw-drop); }
.cr-goal li.done { border-color: color-mix(in srgb, var(--green) 60%, var(--line)); background: color-mix(in srgb, var(--green) 9%, transparent); }
.cr-goal li.done em { color: var(--green); background-image: none; font: 400 18px var(--ui); filter: none; }
.cr-goal li.next { border-color: rgba(255, 210, 63, 0.85); background: radial-gradient(80% 90% at 50% 100%, rgba(255, 196, 60, 0.2), transparent 75%), rgba(20, 16, 30, 0.6); box-shadow: 0 0 18px rgba(255, 210, 63, 0.28), inset 0 0 0 1px rgba(255, 210, 63, 0.35); }
.cr-goal .earned { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 18px; }
.cr-goal .earned b { color: var(--gold); font-weight: 400; }
.cr-goal .earned small { color: var(--cyan); font-size: 16px; }
/* Signing in with the wallet they paired, above the form. */
.cr-signin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 18px; margin-bottom: 22px; padding: 16px; border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 6px; background: linear-gradient(180deg, rgba(40, 32, 20, 0.35), rgba(4, 6, 20, 0.45)); }
.cr-signin h3 { margin: 0 0 4px; font: 400 22px var(--display); color: #fff; }
.cr-signin-go { display: grid; justify-items: end; gap: 6px; }
.cr-signin-go .note { font-size: 16px; text-align: right; }
.cr-signin .cr-lost { grid-column: 1 / -1; font-size: 17px; }
.cr-signin .msg { grid-column: 1 / -1; margin: 0; }
.cr-signin .msg:empty { display: none; }

/* Their numbers: a period, the funnel as tiles, then new players a day. */
.cr-nums-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.cr-period { display: flex; gap: 6px; }
.cr-period button { min-height: 38px; padding: 4px 13px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(4, 6, 20, 0.6); color: var(--text); font: inherit; font-size: 17px; cursor: pointer; }
.cr-period button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.14); color: #fff; box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.3); }
.cr-me .cr-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cr-stats .stat small { color: var(--cyan); font-size: 15px; }
.cr-chart { display: grid; gap: 10px; margin: 6px 0 0; }
.cr-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.cr-chart figcaption b { font: 400 19px var(--display); color: #fff; }
.cr-chart figcaption span { color: var(--muted); font-size: 16px; }
.cr-plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 150px auto; column-gap: 6px; row-gap: 6px; }
.cr-y { position: relative; }
.cr-y span { position: absolute; right: 0; transform: translateY(50%); color: var(--muted); font-size: 15px; line-height: 1; }
.cr-cols { position: relative; display: flex; align-items: stretch; gap: 2px; }
.cr-grid-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); pointer-events: none; }
.cr-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; }
.cr-bar { position: relative; z-index: 1; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--gold-2); }
.cr-col:hover .cr-bar, .cr-col:focus-visible .cr-bar, .cr-col:focus .cr-bar { background: var(--gold); }
.cr-col:hover::before, .cr-col:focus::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(255, 210, 63, 0.08); }
.cr-tip { position: absolute; z-index: 3; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; display: grid; gap: 1px; min-width: 120px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--navy-950); box-shadow: 0 8px 20px rgba(0, 0, 10, 0.55); color: var(--text); font-size: 16px; line-height: 1.15; text-align: left; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.cr-tip b { color: #fff; font-weight: 400; }
.cr-col.l .cr-tip { left: 0; translate: none; }
.cr-col.r .cr-tip { left: auto; right: 0; translate: none; }
.cr-col:hover .cr-tip, .cr-col:focus .cr-tip { opacity: 1; }
.cr-x { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; }
.cr-table summary { color: var(--cyan); font-size: 16px; cursor: pointer; }
.cr-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 16px; }
.cr-table th, .cr-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.cr-table th:first-child, .cr-table td:first-child { text-align: left; }
.cr-table th { color: var(--muted); font-weight: 400; }
.cr-table tbody { display: block; max-height: 240px; overflow: auto; }
.cr-table thead, .cr-table tbody tr { display: table; width: 100%; table-layout: fixed; }

/* Their wallet and their players. */
.cr-me .cr-grid { margin-top: 0; align-items: start; }
.cr-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cr-addr code { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(3, 10, 44, 0.6); color: var(--gold); font: 400 20px var(--ui); }
.cr-addr small { color: var(--muted); font-size: 16px; }
.cr-me .cr-small { font-size: 16px; }
.cr-wallet .msg { margin: 0; }
.cr-wallet .msg:empty { display: none; }
.cr-players h4 .chip { margin-left: 4px; vertical-align: 3px; }
.cr-players .list b { color: #fff; font-weight: 400; overflow-wrap: anywhere; }

/* Dollars or cards (their pick, saved at once). */
.pay-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-pick > span { flex-basis: 100%; color: #fff; font: 400 18px var(--display); }
.pay-pick small { flex-basis: 100%; color: var(--muted); font-size: 16px; }

@media (max-width: 860px) {
  .cr-art { height: 320px; max-width: 360px; }
  .cr-targets { grid-template-columns: 1fr; }
  .cr-shot { grid-row: auto; max-width: 240px; justify-self: center; }
  .cr-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .cr-me .cr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cr-me .stats, .cr-me .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-me .cr-stats .stat.hl { order: -1; grid-column: 1 / -1; }
  .cr-signin { grid-template-columns: 1fr; }
  .cr-signin-go { justify-items: start; }
  .cr-signin-go .note { text-align: left; }
  .cr-plot { grid-template-rows: 130px auto; grid-template-columns: 26px minmax(0, 1fr); column-gap: 4px; }
  .cr-cols { gap: 1px; }
}
@media (max-width: 560px) {
  .cr-ideas { grid-template-columns: 1fr; }
  .cr-art { height: 300px; max-width: 320px; }
  .cr-toast { left: -3%; top: -8%; column-gap: 7px; padding: 5px 10px 5px 6px; }
  .cr-toast > i { width: 28px; height: 28px; font-size: 16px; }
  .cr-toast small { font-size: 12px; }
  .cr-toast b { font-size: 19px; }
  .cr-earn { padding: 14px 14px 14px 0; }
  .cr-earn::before { display: none; }
  .cr-earn-head { padding-left: 14px; }
  .ladder { grid-auto-flow: row; grid-auto-columns: auto; align-items: start; gap: 8px; border-bottom: 0; border-left: 3px solid rgba(255, 210, 63, 0.6); }
  .ladder li { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; width: calc(58% + var(--k) * 8.4%); min-height: 0; padding: 9px 12px 8px; border: 2px solid color-mix(in srgb, var(--gold) calc(28% + var(--k) * 12%), transparent); border-left: 0; border-radius: 0 12px 12px 0; text-align: left; }
  .ladder em { margin: 0 auto 0 0; padding-right: 8px; font-size: 26px; }
  .ladder b { font-size: 19px; }
  .ladder span { font-size: 13px; }
  .ladder i { flex-basis: 100%; margin-top: 2px; font-size: 14px; }
  .ladder.wait li { translate: -26px 0; }
  @keyframes rise { from { opacity: 0; translate: -26px 0; } }
}