/* ZAZA World Ambassadors (and /creators/, which loads this too), in the World's look since 2026-10-27 (owner: "overall a
   bit the ambassador and creator page to look even better"): a painting of the World behind the hero as on the start
   screen, ZAZA WORLD's gold and silver on the titles, and the start screen's dark glass panels (thin gold edges, gold
   capitals on their heads) instead of the blue cards. Titan One + Jersey 10. The public explainer, tiers, and the
   signed-in panel (apply, or an ambassador's own page). */
:root {
  --navy-950: #030a2c;
  --navy-900: #06124f;
  --navy-800: #0a1a6b;
  --bg: #070a1f;
  --card: #090c24;
  --card-2: #10143a;
  --line: rgba(232, 196, 106, 0.2);
  --line-2: rgba(232, 196, 106, 0.38);
  --tan: #e8c46a;
  --glass: linear-gradient(180deg, rgba(16, 20, 54, 0.94), rgba(9, 12, 34, 0.94));
  --glass-shadow: 0 10px 26px rgba(0, 0, 8, 0.42), inset 0 1px 0 rgba(255, 240, 200, 0.07);
  /* ZAZA WORLD's colours (world.css .title-plate) */
  --zw-gold: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c);
  --zw-silver: linear-gradient(180deg, #ffffff, #dfe6ff 55%, #9fb2ff);
  --zw-drop: drop-shadow(0 0.055em 0 rgba(40, 20, 0, 0.75));
  --gold: #ffd23f;
  --gold-2: #e8b52a;
  --gold-dark: #8a6410;
  --cyan: #7fd4ff;
  --text: #f1ecd8;
  --muted: #a9b3d6;
  --green: #5fe86f;
  --red: #ff7a7a;
  --orange: #ff8a1f;
  --bronze: #e39a5c;
  --silver: #d6dceb;
  --diamond: #8fe4ff;
  --ui: "Jersey 10", ui-monospace, monospace;
  --display: "Titan One", "Arial Black", system-ui, sans-serif;
  --wrap: min(1080px, calc(100% - 32px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--ui);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(98, 70, 150, 0.22), transparent 70%),
    linear-gradient(180deg, #0c0f2c, var(--bg) 45%, #05071a);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; }
a { color: var(--cyan); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 16px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: rgba(9, 12, 34, 0.72); color: var(--text);
  font-size: 19px; line-height: 1; text-align: center; text-decoration: none;
}
.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn:hover { border-color: var(--tan); background: rgba(40, 32, 20, 0.6); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.gold {
  font-family: var(--display); font-size: 16px; letter-spacing: 0.02em; color: var(--navy-900);
  border: 2px solid #3a2a00; background: linear-gradient(180deg, #ffe066, var(--gold-2));
  box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark);
}
.btn.gold:hover { filter: brightness(1.06); background: linear-gradient(180deg, #ffe066, var(--gold-2)); }
.btn.gold:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px #fff3b0, 0 1px 0 var(--gold-dark); }
.btn.big { min-height: 54px; padding: 12px 26px; font-size: 20px; }
.btn.gold.big { font-size: 18px; }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: 17px; }
.btn.x { background: #000; border-color: #444; color: #fff; }
.chip {
  --c: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 2px 10px; border-radius: 99px; font-size: 17px; line-height: 1.1; text-align: center;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent);
  white-space: nowrap;
}
.chip.ok { --c: var(--green); }
.chip.wait { --c: var(--cyan); }
.chip.warn { --c: var(--orange); }
.chip.bad { --c: var(--red); }
.chip.gold, .chip.t-gold { --c: var(--gold); }
.chip.t-bronze { --c: var(--bronze); }
.chip.t-silver { --c: var(--silver); }
.chip.t-diamond { --c: var(--diamond); }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 14px 6px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(7, 10, 30, 0.72); color: var(--tan); font: 400 13px/1.1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; backdrop-filter: blur(3px); }
.note { margin: 0; color: var(--muted); font-size: 19px; }
.note b { color: var(--text); font-weight: 400; }
.msg { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: 18px; }
.msg.is-error { color: var(--red); }
.msg.is-ok { color: var(--green); }
.meter { display: block; height: 10px; border-radius: 99px; background: rgba(255, 210, 63, 0.16); overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes twinkle { 0%, 100% { opacity: 0.15; scale: 0.6; } 50% { opacity: 1; scale: 1; } }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(60px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: rgba(7, 10, 30, 0.92);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.brand img { border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 210, 63, 0.35); }
.brand span { font-family: var(--display); font-size: 19px; white-space: nowrap; }
.brand b { color: var(--gold); font-weight: 400; }
.page-tag { margin-right: auto; padding: 5px 11px 4px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.top .play { min-height: 38px; padding: 6px 14px; font-size: 15px; }
.top .signin { min-height: 38px; padding: 4px 14px; font-size: 18px; white-space: nowrap; }
.top .signin img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gold); }
.top .signin[hidden] { display: none; }
.intro .again { font-size: 18px; }
.intro .again[hidden] { display: none; }
/* signed in: where they are, under the hero */
.me-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; width: var(--wrap); margin: 22px auto 0; padding: 12px 16px; border: 1px solid rgba(255, 210, 63, 0.55); border-radius: 6px; background: var(--glass); box-shadow: var(--glass-shadow), 0 0 22px rgba(255, 210, 63, 0.12); backdrop-filter: blur(4px); }
.me-strip .pfp.sm { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--t); }
.me-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 260px; min-width: 0; }
.me-line b { font: 400 21px var(--display); color: #fff; overflow-wrap: anywhere; }
.me-line small { flex-basis: 100%; color: var(--muted); font-size: 18px; }
.me-strip .btn { min-height: 42px; }
#me { position: relative; top: -80px; display: block; height: 0; }

/* ---------- intro: a painting of the World behind the words (the page's .scene picks which), shaded under them ---------- */
.intro { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; min-height: clamp(500px, 22vw + 250px, 640px); padding: 48px 16px 60px; }
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #2a2142; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-at, 50% 80%); }
.scene.pixel img { image-rendering: pixelated; }
.scene .px { z-index: 1; }
.scene::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 26, 0.9) 0%, rgba(6, 8, 26, 0.74) 32%, rgba(6, 8, 26, 0.28) 56%, transparent 72%, rgba(6, 8, 26, 0.26)),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 10, 31, 0.5) 9%, transparent 22%),
    linear-gradient(180deg, rgba(6, 8, 26, 0.45), transparent 14%); }
/* a warm glow and slow gold rays behind the hero's pictures */
.hero-art::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 120, 0.16) 0 5deg, transparent 5deg 15deg), radial-gradient(closest-side, rgba(255, 196, 70, 0.42), rgba(255, 160, 40, 0.12) 50%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side, #000 14%, rgba(0, 0, 0, 0.5) 40%, transparent 72%); mask-image: radial-gradient(closest-side, #000 14%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
  animation: spin 160s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero-art::before { animation: none; } }
.px { position: absolute; width: 12px; height: 12px; background: var(--gold); clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); animation: twinkle 2.8s ease-in-out infinite; }
.px.p1 { left: 8%; top: 18%; }
.px.p2 { left: 46%; top: 84%; width: 9px; height: 9px; background: var(--cyan); animation-delay: 0.6s; }
.px.p3 { right: 8%; top: 14%; width: 15px; height: 15px; animation-delay: 1.2s; }
.px.p4 { right: 30%; top: 80%; width: 9px; height: 9px; background: var(--cyan); animation-delay: 1.8s; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px; width: var(--wrap); margin: 0 auto; }
.hero-text { display: grid; justify-items: start; gap: 14px; }
/* the title in ZAZA WORLD's colours: a silver line over a big gold one */
.headline { display: grid; justify-items: start; margin: 0; font: 400 clamp(2.6rem, 6vw, 4.3rem) / 1 var(--display); letter-spacing: 0.01em; filter: var(--zw-drop) drop-shadow(0 6px 16px rgba(0, 0, 8, 0.5)); }
.headline span { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); }
.headline .hl-small { font-size: 0.56em; line-height: 1.05; letter-spacing: 0.03em; background-image: var(--zw-silver); }
.lede { margin: 0; max-width: 560px; color: #d3d9f2; font-size: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.lede b { color: #fff; font-weight: 400; }
.intro .note { color: #c3cae6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero-art { position: relative; isolation: isolate; height: clamp(240px, 32vw, 340px); }
.hero-art img { position: absolute; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55)); }
.art-pack { left: 18%; top: 2%; height: 92%; width: auto; rotate: -8deg; animation: bob 3s ease-in-out infinite; }
.art-slab { left: 52%; top: 8%; height: 80%; width: auto; rotate: 9deg; }
.art-coin { left: 4%; bottom: -2%; width: 30%; height: auto; animation: bob 2.4s ease-in-out infinite 0.6s; }

/* ---------- blocks ---------- */
.block { width: var(--wrap); margin: 52px auto 0; scroll-margin-top: 80px; }
.intro + .block { margin-top: 12px; }
/* a heading in ZAZA WORLD's gold, the start screen's gold rule and diamond under it */
.block-head { display: grid; justify-items: start; gap: 8px; max-width: 820px; margin-bottom: 18px; }
.block-head h2 { order: -1; margin: 0; font: 400 clamp(1.8rem, 3.6vw, 2.5rem) / 1.1 var(--display); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); filter: var(--zw-drop); }
.block-head::before { content: ""; width: 150px; height: 10px; margin: -2px 0 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .8 9.2 5 5 9.2.8 5z' fill='%23ffd23f' stroke='%23e8c46a'/%3E%3C/svg%3E") left center / 10px 10px no-repeat, linear-gradient(90deg, var(--tan), transparent) 14px center / calc(100% - 14px) 1px no-repeat; }
.sub { margin: 22px 0 10px; font: 400 22px var(--display); color: #fff; }
.card, .panel, .steps li, .way, .tier {
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; align-content: start; gap: 6px; padding: 16px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; margin: -2px 0 2px -3px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, #fff3b0, var(--gold) 45%, #c8901a); color: #2a1a00; font: 400 17px var(--display); }
.steps b { font: 400 21px var(--display); color: #fff; }
.steps span { color: var(--muted); font-size: 19px; }
.steps span b { font: inherit; color: var(--text); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.way { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.way-icon { font-size: 30px; line-height: 1; }
.way b { display: block; font: 400 19px var(--display); color: #fff; margin-bottom: 4px; }
.way span { color: var(--muted); font-size: 18px; }

/* ---------- tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tier { --t: var(--gold); position: relative; display: grid; justify-items: center; gap: 6px; padding: 18px 14px 16px; text-align: center; border-color: color-mix(in srgb, var(--t) 40%, transparent); background: radial-gradient(90% 60% at 50% 22%, color-mix(in srgb, var(--t) 14%, transparent), transparent 70%), var(--glass); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--t) 70%, transparent), var(--glass-shadow); }
.tier.t-bronze { --t: var(--bronze); }
.tier.t-silver { --t: var(--silver); }
.tier.t-diamond { --t: var(--diamond); }
/* the tier medal: the ZAZA coin in the tier's metal (a filter on the real coin art), hanging from a ribbon, with a glint */
.medal { --coin: none; --rib: var(--t); position: relative; display: block; width: 112px; height: 128px; margin-bottom: 2px; }
.tier.t-bronze .medal { --coin: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-24deg) brightness(0.78) contrast(1.2); --rib: #b5592a; }
.tier.t-silver .medal { --coin: grayscale(1) brightness(1.2) contrast(1.18); --rib: #8d9bb8; }
.tier.t-gold .medal { --coin: saturate(1.08) brightness(1.04); --rib: #e8b52a; }
.tier.t-diamond .medal { --coin: grayscale(1) sepia(1) hue-rotate(158deg) saturate(2.4) brightness(1.18) contrast(1.05); --rib: #36b8ff; }
.medal .ribbon { position: absolute; left: 50%; top: 0; width: 70px; height: 54px; translate: -50% 0; filter: drop-shadow(0 3px 2px rgba(0, 4, 24, 0.5)); }
.medal .ribbon .r1 { fill: var(--rib); }
.medal .ribbon .r2 { fill: color-mix(in srgb, var(--rib) 72%, #000a2e); }
.medal .ribbon .r3 { fill: rgba(255, 255, 255, 0.55); }
.medal .coin, .medal .glint { position: absolute; left: 50%; bottom: 0; width: 98px; height: 98px; translate: -50% 0; border-radius: 50%; }
.medal .coin { filter: var(--coin) drop-shadow(0 6px 6px rgba(0, 4, 24, 0.55)) drop-shadow(0 0 16px color-mix(in srgb, var(--t) 55%, transparent)); transition: transform 0.3s; }
.medal .glint { overflow: hidden; pointer-events: none; }
.medal .glint::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.65) 50%, transparent 58%); translate: -110% 0; animation: glint 5s ease-in-out infinite; }
.tier.t-silver .medal .glint::after { animation-delay: 0.6s; }
.tier.t-gold .medal .glint::after { animation-delay: 1.2s; }
.tier.t-diamond .medal .glint::after { animation-delay: 1.8s; }
@keyframes glint { 0%, 55% { translate: -110% 0; } 80%, 100% { translate: 110% 0; } }
.medal .spark { position: absolute; width: 14px; height: 14px; background: #e9fbff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #8fe4ff); animation: twinkle 2.4s ease-in-out infinite; }
.medal .spark.s1 { left: 4px; top: 58px; }
.medal .spark.s2 { right: 2px; top: 44px; width: 10px; height: 10px; animation-delay: 0.8s; }
.medal .spark.s3 { right: 14px; bottom: 2px; width: 12px; height: 12px; animation-delay: 1.6s; }
.tier:hover .medal .coin { transform: rotate(-6deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .medal .glint::after, .medal .spark { animation: none; } }
.tier b { font: 400 24px var(--display); color: var(--t); }
.tier .who { color: #fff; font-size: 20px; }
.tier .mult { margin-top: 6px; font: 400 48px / 1 var(--display); color: var(--t); text-shadow: 0 3px 0 #000a2e, 0 0 22px color-mix(in srgb, var(--t) 40%, transparent); }
.tier .mult-cap { color: var(--muted); font-size: 18px; }

/* ---------- the signed-in panel ---------- */
.panel { padding: 20px; }
.panel h3 { margin: 0 0 8px; font: 400 24px var(--display); color: #fff; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.connect { display: grid; justify-items: start; gap: 12px; }
.who-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 18px; }
.who-line button { border: 0; background: none; color: var(--cyan); font-size: 18px; padding: 0; }
form.apply { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field { display: grid; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field > span { color: var(--muted); font-size: 18px; }
.field > span em { color: var(--text); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 4px; background: rgba(4, 6, 20, 0.66);
  font-size: 20px;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.2; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.field small { color: var(--muted); font-size: 16px; }
.channels { display: grid; gap: 8px; }
.channel { display: grid; grid-template-columns: 130px minmax(0, 1fr) 120px 40px; gap: 8px; }
.channel button { border: 1px solid var(--line-2); border-radius: 10px; background: none; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 18px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* applying: pair the wallet, verify X, the form */
.apply-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.apply-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--muted); font-size: 18px; }
.apply-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(169, 179, 214, 0.16); font: 400 15px var(--display); color: var(--muted); }
.apply-steps i { font-style: normal; }
.apply-steps .now { border-color: var(--gold); color: #fff; }
.apply-steps .now b { background: var(--gold); color: var(--navy-900); }
.apply-steps .done { border-color: color-mix(in srgb, var(--green) 50%, var(--line)); color: var(--text); }
.apply-steps .done b { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.xstep { display: grid; gap: 12px; }
.xstep h3 { margin: 0; }
.xrow { display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: start; align-items: end; gap: 10px; }
.xrow .btn { min-height: 44px; }
.xcode { margin: 0; color: var(--muted); font-size: 19px; }
.xcode b { color: #fff; font-weight: 400; }
.xcode .code { display: inline-block; margin-left: 4px; padding: 2px 10px; border: 1px dashed var(--gold); border-radius: 8px; color: var(--gold); letter-spacing: 0.08em; user-select: all; }
.xok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; }
.xok a { color: var(--cyan); font-size: 20px; text-decoration: none; }
.xok button { border: 0; background: none; padding: 0; color: var(--cyan); font-size: 18px; }
.xstep .linkish { border: 0; background: none; padding: 0; color: var(--cyan); font: inherit; text-decoration: underline; cursor: pointer; }
.field input[readonly] { color: var(--muted); }
.status-box { display: grid; gap: 10px; padding: 16px; border: 1px dashed var(--line-2); border-radius: 6px; background: rgba(4, 6, 20, 0.4); }
.status-box p { margin: 0; }

/* the ambassador's own page */
.me-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.pfp { --t: var(--gold); width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--navy-800); box-shadow: 0 0 0 4px var(--t), 0 0 22px color-mix(in srgb, var(--t) 50%, transparent); }
.pfp.t-bronze { --t: var(--bronze); } .pfp.t-silver { --t: var(--silver); } .pfp.t-diamond { --t: var(--diamond); }
.me-name { display: grid; gap: 6px; min-width: 0; }
.me-name b { font: 400 28px var(--display); color: #fff; overflow-wrap: anywhere; }
.me-name .row { gap: 6px; }
.pfp-tools { display: grid; gap: 6px; justify-items: end; }
.pfp-tools label { cursor: pointer; }
.paused { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--orange); background: rgba(255, 138, 31, 0.1); color: #ffd2a8; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.box { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(4, 6, 20, 0.42); }
.box h4 { margin: 0; font: 400 15px/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tan); }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.link-row input { min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(3, 10, 44, 0.6); color: var(--gold); font-size: 19px; }
.card-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255, 210, 63, 0.6); background: var(--navy-800); aspect-ratio: 1200 / 630; }
.card-wrap canvas { display: block; width: 100%; height: auto; }
.post-text { width: 100%; min-height: 168px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(3, 10, 44, 0.6); font-size: 19px; line-height: 1.2; resize: vertical; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.stat { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 6, 20, 0.42); text-align: center; }
.stat b { font: 400 30px var(--display); color: #fff; }
.stat span { color: var(--muted); font-size: 17px; }
.stat.hl b { color: var(--gold); }
.bonus { display: grid; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 18px; }
.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 6, 20, 0.36); }
.list li > span { display: grid; gap: 2px; min-width: 0; }
.list li small { color: var(--muted); font-size: 16px; }
.list .empty { justify-content: center; color: var(--muted); border-style: dashed; }
.pack-card { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pack-card > span { display: grid; gap: 2px; min-width: 0; }
.pack-card img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; }
.scroll { max-height: 380px; overflow: auto; padding-right: 2px; }

/* keeping the tier */
.keep { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(4, 6, 20, 0.42); }
.keep.k-review { border-color: color-mix(in srgb, var(--orange) 60%, var(--line)); background: rgba(255, 138, 31, 0.07); }
.keep.k-up { border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.06); }
.keep-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.keep h4 { margin: 0; font: 400 20px var(--display); color: var(--gold); }
.keep-bar { position: relative; margin: 26px 0 2px; }
.keep-bar .meter { height: 12px; }
.keep.k-review .keep-bar .meter > span { background: linear-gradient(90deg, #c4580c, var(--orange)); }
.keep-bar .mark { position: absolute; top: -6px; width: 2px; height: 24px; translate: -1px 0; background: var(--text); font-style: normal; }
.keep-bar .mark.up { background: var(--gold); }
.keep-bar .mark span { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; padding: 0 6px; border-radius: 6px; background: var(--navy-900); color: var(--text); font-size: 16px; white-space: nowrap; }
.keep-bar .mark.up span { color: var(--gold); }
.keep-bar .mark[style*="left:100%"] span { left: auto; right: -2px; translate: 0 0; }
.keep-now, .keep-say { margin: 0; color: var(--muted); font-size: 19px; }
.keep-now b { font: 400 24px var(--display); color: #fff; }
.keep-say b { color: #fff; font-weight: 400; }
.keep-notes { display: grid; gap: 4px; margin: 2px 0 0; padding: 10px 0 0 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 17px; }
.keep-now small { display: block; margin-top: 2px; font-size: 17px; }

/* bringing other creators in: their link for creators, and their recruits */
.box.recruit { margin-top: 18px; }
.recruit .keep-head h4 { margin: 0; }
.recruit-sum { margin: 0; color: var(--muted); font-size: 19px; }
.recruit-sum b { color: #fff; font-weight: 400; }
.recruit .list li > .pack-card { display: flex; }
.recruit .pack-card img { flex: none; width: 44px; height: 44px; border-radius: 50%; }
.recruit .list b .chip { margin-left: 4px; vertical-align: 2px; }
.box.invite { margin-top: 22px; }
.invite .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; }
.invite h4 + .list { margin-top: -2px; }
.invite details.mine summary { cursor: pointer; color: var(--gold); font-size: 19px; }
.invite details.mine[open] summary { margin-bottom: 8px; }
.apply .via { padding: 10px 12px; border: 1px dashed rgba(255, 210, 63, 0.5); border-radius: 12px; }

/* post ideas for X: tabs of ideas, one shown at a time, and the link-in-a-reply box under them */
.kit { display: grid; gap: 12px; margin-top: 18px; 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)); }
.kit-head { display: grid; gap: 4px; }
.kit h4 { margin: 0; font: 400 24px var(--display); color: var(--gold); }
.kit-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-ideas button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 99px; background: rgba(3, 10, 44, 0.6); color: var(--text); font-size: 18px; }
.kit-ideas button[aria-selected="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); }
.kit-ideas button i { font-style: normal; color: var(--green); }
.kit-idea, .kit-reply { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: rgba(4, 6, 20, 0.5); }
.kit-reply h5 { margin: 0; font: 400 20px var(--display); color: #fff; }
.kit-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.kit-words { display: grid; gap: 4px; }
.kit-words .post-text { min-height: 150px; }
.kit-under { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kit-count { color: var(--muted); font-size: 16px; }
.kit-count.over { color: var(--red); }
.kit .linkish { border: 0; background: none; padding: 0; color: var(--cyan); font-size: 17px; cursor: pointer; }
.kit-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kit-media .thumb-me { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; background: radial-gradient(circle, #1d4bff 0%, var(--navy-900) 75%); }
.kit-media .thumb-me img { width: 44%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gold); }
.kit-media button { position: relative; display: grid; gap: 4px; padding: 4px 4px 6px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(3, 10, 44, 0.6); color: var(--muted); font-size: 16px; text-align: center; }
.kit-media button img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.kit-media button[aria-checked="true"] { border-color: var(--gold); color: #fff; box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.35); }
.kit-media .play { position: absolute; left: 50%; top: calc(4px + (100% - 30px) / 2); translate: -50% -50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(3, 10, 44, 0.75); color: var(--gold); font-style: normal; font-size: 14px; }
.kit-view { overflow: hidden; border: 2px solid rgba(255, 210, 63, 0.6); border-radius: 14px; background: var(--navy-800); }
.kit-view video, .kit-view img, .kit-view canvas { display: block; width: 100%; height: auto; background: #000; }
.kit-view video { aspect-ratio: 16 / 9; object-fit: cover; }
.kit-link { display: grid; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: #000; }
.kit-link img { width: 100%; height: auto; }
.kit-link span { padding: 6px 10px; color: var(--muted); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- leaderboard ---------- */
.board { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.board li { display: grid; grid-template-columns: 44px 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); }
.board li.note { display: block; text-align: center; border-style: dashed; background: none; }
.board .rank { font: 400 22px var(--display); color: var(--muted); text-align: center; }
.board li:nth-child(1) .rank { color: var(--gold); }
.board li:nth-child(2) .rank { color: var(--silver); }
.board li:nth-child(3) .rank { color: var(--bronze); }
.board img, .board .nopic { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--navy-800); box-shadow: 0 0 0 2px var(--line-2); }
.board .name { display: grid; gap: 2px; min-width: 0; }
.board .name b { font: 400 19px var(--display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .name a { color: var(--cyan); font-size: 17px; text-decoration: none; }
.board .score { display: grid; justify-items: end; }
.board .score b { font: 400 24px var(--display); color: var(--gold); }
.board .score span { color: var(--muted); font-size: 15px; }
.won { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.won figure { display: grid; justify-items: center; gap: 6px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); box-shadow: var(--glass-shadow); text-align: center; }
.won img { width: 110px; height: 154px; object-fit: cover; border-radius: 6px; }
.won figcaption { color: var(--muted); font-size: 16px; }
.won figcaption b { display: block; color: #fff; font-weight: 400; font-size: 17px; }

/* ---------- the closing band: the page's painting again, one line and the way in ---------- */
.finale { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 12px; margin: 64px 0 0; padding: 64px 16px 70px; text-align: center; }
.finale .scene::after { background: radial-gradient(60% 75% at 50% 50%, rgba(6, 8, 26, 0.78), rgba(6, 8, 26, 0.45) 70%, rgba(6, 8, 26, 0.25)), linear-gradient(180deg, var(--bg), transparent 26%, transparent 74%, var(--bg)); }
.finale h2 { margin: 0; font: 400 clamp(2rem, 4.4vw, 3.1rem) / 1.05 var(--display); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: var(--zw-gold); filter: var(--zw-drop) drop-shadow(0 6px 16px rgba(0, 0, 8, 0.5)); }
.finale p { margin: 0; max-width: 620px; color: #d3d9f2; font-size: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.finale .cta { justify-content: center; margin-top: 6px; }
.finale + .foot { margin-top: 0; }

/* ---------- rules, footer ---------- */
.rules { display: grid; gap: 4px; margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); box-shadow: var(--glass-shadow); }
.rules dt { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(232, 196, 106, 0.12); font: 400 19px var(--display); color: #fff; }
.rules dt::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--tan); background: var(--gold); rotate: 45deg; box-shadow: 0 0 6px rgba(255, 210, 63, 0.6); }
.rules dd { padding-left: 18px; }
.rules dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rules dd { margin: 0; color: var(--muted); font-size: 19px; }
.rules dd b { color: var(--text); font-weight: 400; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; width: var(--wrap); margin: 56px auto 0; padding: 22px 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 18px; }
.foot a { color: var(--tan); text-decoration: none; }
.foot a:hover { color: var(--gold); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .intro { min-height: 0; padding: 40px 16px 56px; }
  .scene::after { background: linear-gradient(180deg, rgba(6, 8, 26, 0.72), rgba(6, 8, 26, 0.62) 55%, rgba(6, 8, 26, 0.3) 80%, var(--bg)); }
  .hero { grid-template-columns: 1fr; }
  .hero-art { height: 220px; max-width: 360px; width: 100%; justify-self: center; }
  .steps, .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 19px; }
  .page-tag { display: none; }
  .brand { margin-right: auto; }
  .intro { padding-top: 22px; }
  .badge { padding: 6px 12px 5px; font-size: 11px; letter-spacing: 0.12em; }
  .lede { font-size: 20px; }
  .steps { grid-template-columns: 1fr; }
  .tiers { gap: 10px; }
  .tier { padding: 14px 10px; }
  .tier b { font-size: 21px; }
  form.apply { grid-template-columns: 1fr; }
  .xrow { grid-template-columns: 1fr; align-items: stretch; }
  .apply-steps { gap: 4px; }
  .apply-steps li { gap: 6px; padding-right: 8px; font-size: 17px; }
  .apply-steps b { width: 24px; height: 24px; font-size: 13px; }
  .apply-steps i { display: none; }
  .channel { grid-template-columns: 1fr 1fr 40px; }
  .channel input[type="url"] { grid-column: 1 / -1; grid-row: 1; }
  .me-head { grid-template-columns: auto minmax(0, 1fr); }
  .pfp { width: 76px; height: 76px; }
  .pfp-tools { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .board li { grid-template-columns: 30px 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .board img, .board .nopic { width: 44px; height: 44px; }
  .panel { padding: 16px; }
  .top { gap: 8px; }
  .top .signin { padding: 4px 10px; font-size: 17px; }
  .kit { padding: 12px; }
  .kit-idea, .kit-reply { padding: 12px; }
  .kit-ideas { gap: 6px; }
  .kit-ideas button { min-height: 36px; padding: 4px 11px; font-size: 17px; }
  .kit-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-strip { padding: 12px; }
  .me-line { flex-basis: 200px; }
  .me-strip .btn { flex: 1 1 100%; }
}
/* Ambassador or creator (owner 2026-10-06: "better split the difference"): two tracks side by side, the same rows in the
   same order, on /ambassadors/ and /creators/ (.here = the page you're on). */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.track { display: grid; align-content: start; gap: 14px; padding: 0 18px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); box-shadow: var(--glass-shadow); }
.track.here { border-color: rgba(255, 210, 63, 0.6); box-shadow: 0 0 0 1px rgba(255, 210, 63, 0.18), 0 0 26px rgba(255, 210, 63, 0.1), var(--glass-shadow); }
/* the panel's head, as on the start screen's panels */
.track-tag { margin: 0 -18px; padding: 13px 18px 12px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); font: 400 15px/1.1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); }
.track.here .track-tag { color: var(--gold); background: linear-gradient(90deg, rgba(255, 210, 63, 0.1), transparent 70%); }
.track ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.track li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--muted); font-size: 19px; line-height: 1.2; }
.track li b { font-size: 22px; line-height: 1; font-weight: 400; }
.track li strong { color: var(--text); font-weight: 400; }
.track .btn { justify-self: start; }
/* The Ambassadors' Plaza in the World: the plinths for the first Gold and Diamond ambassadors' statues. */
.plaza { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.plaza figure { margin: 0; }
.plaza img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--glass-shadow), 0 0 0 4px rgba(7, 10, 30, 0.8), 0 0 0 5px var(--line); }
.plaza figcaption { margin-top: 8px; color: var(--muted); font-size: 17px; }
.plaza-text { display: grid; gap: 10px; }
.plaza-text p { margin: 0; color: var(--muted); font-size: 20px; }
.plaza-text p b { color: var(--text); font-weight: 400; }
.plaza-text .t-silver { color: var(--silver); }
.plaza-text .t-gold { color: var(--gold); }
.plaza-text .t-diamond { color: var(--diamond); }
.plaza-text .btn { justify-self: start; }
@media (max-width: 860px) { .tracks, .plaza { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .track li { font-size: 18px; } }
/* the header's Sign in / My page next to Play: the coin alone stands for ZAZA World */
@media (max-width: 430px) { .brand span { display: none; } }