/* 💰 $CARDS rewards arrived (world/js/cards-rewards-ui.js), in the start screen's look like the profile window and the
   quest strip (owner, 2026-11-08: "make the style just a little bit more adapted to the new style of zaza world"): the
   dusk town painting behind the head with the payout's coin in a gold burst over the sky and a dark plate under the
   words, small gold capitals spaced wide, the gold-gradient amount; the three choices as dark glass panels with a thin
   gold edge. A buy ends in the $ZAZA coin over the same painting, a count-up, a shower of coins and an "In your wallet"
   stamp. */
.modal:has(.crw) {
  --tan: #e8c46a; --line: rgba(232, 196, 106, 0.34); --soft: #b9bfdc; --mute: #9ea6cc;
  padding: 14px; background: linear-gradient(180deg, #10143a, #070a1e); border-color: #c99a22; overflow-x: hidden;
}
.modal:has(.crw) > .modal-x { z-index: 4; }
.crw { position: relative; display: grid; gap: 12px; text-align: center; }

/* The head: the start screen's painting, the coin over its sky, the words on a dark plate. */
.crw-head {
  position: relative; display: grid; justify-items: center; overflow: hidden; padding: 6px 40px 14px;
  border: 1px solid var(--line); border-radius: 4px; background: #2a2142 url("/world/assets/start/town-1280.webp") 50% 38% / cover no-repeat;
}
.crw-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 28, 0.35), rgba(5, 8, 28, 0.1) 34%, rgba(5, 8, 28, 0.62) 72%, rgba(5, 8, 28, 0.85)); }
.crw-head > * { position: relative; }
.crw-hero { position: relative; width: 150px; height: 112px; display: grid; place-items: center; }
.crw-rays {
  position: absolute; inset: -34px -50px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0.3) 0deg 7deg, rgba(255, 222, 140, 0) 7deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  animation: crw-spin 18s linear infinite;
}
.crw-glow { position: absolute; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 140, 0.7), rgba(255, 190, 60, 0.16) 55%, transparent 72%); animation: crw-breathe 2.2s ease-in-out infinite; }
.crw-coin { position: relative; width: 76px; height: 76px; filter: drop-shadow(0 5px 0 rgba(5, 8, 28, 0.6)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.5)); animation: crw-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both, crw-bob 2.6s ease-in-out 0.7s infinite; }
.crw-sp { position: absolute; width: 12px; height: 12px; background: #fff3c4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: crw-twinkle 1.8s ease-in-out infinite; }
.crw-sp.s1 { left: 8px; top: 16px; }
.crw-sp.s2 { right: 6px; top: 28px; width: 9px; height: 9px; animation-delay: 0.5s; }
.crw-sp.s3 { left: 24px; bottom: 4px; width: 8px; height: 8px; animation-delay: 1s; }
.crw-sp.s4 { right: 22px; bottom: 0; animation-delay: 1.3s; }
.crw-plate { display: grid; justify-items: center; gap: 2px; margin-top: -4px; padding: 6px 44px 4px; background: radial-gradient(closest-side, rgba(8, 10, 32, 0.78), rgba(8, 10, 32, 0.5) 64%, rgba(8, 10, 32, 0) 100%); }
.modal .crw-kick { margin: 0; color: var(--tan); font: 400 12px/1.2 var(--display); letter-spacing: 0.32em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.modal .crw-title { margin: 2px 0 0; color: #fff; font: 400 26px/1.1 var(--display); text-shadow: 0 2px 0 rgba(5, 8, 28, 0.9), 0 0 14px rgba(0, 0, 0, 0.5); text-wrap: balance; }
.modal .crw-amt { margin: 2px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; line-height: 1; }
.crw-amt b {
  font: 400 48px/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 20, 0, 0.9));
}
.crw-amt span { color: var(--tan); font: 400 13px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.modal .crw-sub { margin: 4px auto 0; max-width: 470px; color: var(--soft); font-size: 17px; line-height: 1.3; text-shadow: 0 1px 2px #000; }

/* The question, as a panel's name: small gold capitals between two thin gold rules. */
.modal .crw-ask { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; color: var(--tan); font: 400 12px/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.crw-ask::before, .crw-ask::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.crw-ask::after { background: linear-gradient(90deg, var(--line), transparent); }

/* The three choices: big filled buttons in strong colours, gold, blue and violet, each with a light top edge and a dark
   ledge under it (owner, 2026-11-08: "make bigger contrast on these buttons", then "fill them to make them way more
   appealing to click. and stronger colors", then "how about green color ? ... for the buy ? and the buttons dont have to
   be as big..", then "keep it golden as before"): gold for Buy with dark words, blue and violet with white words. */
.crw-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crw-pick {
  --c1: #ffe680; --c2: #ffc928; --c3: #e89a0c; --edge: #6e4a06; --ledge: #4a3004; --glow: 255, 205, 50;
  --ink: #1b1440; --ink2: #3d2c06; --hi: #1b1440; --ring: rgba(110, 74, 6, 0.85);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 8px 10px;
  border: 2px solid var(--edge); border-radius: 8px;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  box-shadow: 0 5px 0 var(--ledge), 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  color: var(--ink); cursor: pointer; font: inherit; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.crw-pick:hover, .crw-pick:focus-visible { transform: translateY(-3px); filter: brightness(1.08) saturate(1.08); box-shadow: 0 8px 0 var(--ledge), 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--glow), 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.18); outline: 0; }
.crw-pick:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.crw-pick:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ledge), 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.crw-wall { --c1: #6cc4ff; --c2: #2f8cf0; --c3: #1a5cc8; --edge: #0c2f78; --ledge: #08204f; --glow: 80, 170, 255; --ink: #fff; --ink2: #e6f3ff; --hi: #fff6c2; --ring: rgba(255, 255, 255, 0.85); }
.crw-vault { --c1: #c49bff; --c2: #9257f5; --c3: #6a2fd6; --edge: #36157a; --ledge: #230d52; --glow: 170, 110, 255; --ink: #fff; --ink2: #f1e8ff; --hi: #ffe68a; --ring: rgba(255, 255, 255, 0.85); }
.crw-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 23px; line-height: 1; border: 2px solid var(--ring); background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 55%, rgba(0, 0, 0, 0.18)); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.crw-ico img { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.crw-buy .crw-ico { background: radial-gradient(circle at 40% 32%, #2a2364, #120d38); }
.crw-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crw-txt b { color: var(--ink); font: 400 17px/1.15 var(--display); letter-spacing: 0.01em; }
.crw-txt b { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.crw-buy .crw-txt b { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.crw-buy .crw-txt small, .crw-buy .crw-line { text-shadow: none; }
.crw-txt small { color: var(--ink2); font-size: 15px; line-height: 1.15; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.crw-line { min-height: 18px; margin-top: 2px; color: var(--hi); font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.crw-line b { color: inherit; font: inherit; letter-spacing: 0; }
.crw-buy .crw-line { font-weight: 700; }
.crw-line em { font-style: normal; opacity: 0.75; }
.crw-pick.off { cursor: default; filter: saturate(0.7); }
.crw-pick.off:hover { transform: none; filter: saturate(0.7); box-shadow: 0 5px 0 var(--ledge), 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.crw-pick.busy { filter: none; }
.crw-pick.busy .crw-line { animation: crw-blink 1s ease-in-out infinite; }
/* The Buy Wall until its tower opens: still blue, a dashed light edge. */
.crw-pick[aria-disabled="true"] { border: 2px dashed rgba(230, 245, 255, 0.85); }
.crw-press { animation: crw-press 0.3s ease-out; }
.crw-nope { animation: crw-shake 0.4s ease-out; }

.modal .crw-msg { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 18, 50, 0.92), rgba(7, 10, 30, 0.92)); color: #e2e6fa; font-size: 16px; }
.modal .crw-msg.err { border-color: rgba(255, 120, 100, 0.5); background: rgba(60, 14, 14, 0.6); color: #ffb3b3; }
.crw-msg a, .crw-sub a { color: #9fd0ff; }
.modal .crw-note { margin: 10px 0 0; font-size: 15px; color: var(--mute); }

/* ⚡ Charge the vault: lightning through the card and the window. */
.crw-zap { border-color: #e2c8ff !important; box-shadow: 0 0 0 2px rgba(199, 155, 255, 0.6), 0 0 32px rgba(199, 155, 255, 0.9) !important; animation: crw-jolt 0.12s steps(2) 5; }
.crw-zap .crw-ico { background: radial-gradient(circle, #fff, #c79bff 45%, #43307e); box-shadow: 0 0 22px rgba(199, 155, 255, 0.9); }
.crw-flash::after { content: ""; position: absolute; inset: -40px; background: radial-gradient(circle at 80% 70%, rgba(230, 210, 255, 0.85), transparent 60%); pointer-events: none; animation: crw-flash 0.75s ease-out forwards; }

/* The buy landed: the $ZAZA coin over the painting. */
.crw-won > .crw-head, .crw-won > .crw-stage { display: none; }
.crw-win { position: relative; display: grid; gap: 10px; }
.crw-head-z { padding-bottom: 16px; }
.crw-hero-z { width: 180px; height: 150px; }
.crw-hero-z .crw-rays { animation-duration: 7s; background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0.42) 0deg 7deg, rgba(255, 222, 140, 0) 7deg 20deg); }
.crw-zcoin { width: 112px; height: 112px; animation: crw-flip 1.1s cubic-bezier(0.2, 1.3, 0.4, 1) both, crw-bob 2.6s ease-in-out 1.1s infinite; }
.crw-amt-z b { font-size: 54px; }
.modal .crw-stamp {
  display: inline-block; margin: 8px 0 2px; padding: 4px 16px; border: 3px solid #5fe86f; border-radius: 6px; color: #5fe86f; background: rgba(5, 8, 28, 0.55);
  font: 400 19px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-6deg); opacity: 0;
}
.modal .crw-stamp.on { opacity: 1; animation: crw-stamp 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.crw-win .crw-sub { text-shadow: none; }
.crw-win .actions { justify-content: center; margin-top: 2px; }
.crw-fly { position: absolute; z-index: 3; width: 30px; height: 30px; pointer-events: none; animation: crw-fly 1.7s cubic-bezier(0.25, 0.6, 0.4, 1) both; }

@keyframes crw-spin { to { transform: rotate(360deg); } }
@keyframes crw-breathe { 50% { transform: scale(1.12); opacity: 0.8; } }
@keyframes crw-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes crw-bob { 50% { transform: translateY(-6px); } }
@keyframes crw-twinkle { 0%, 100% { transform: scale(0.4) rotate(0); opacity: 0.2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes crw-blink { 50% { opacity: 0.45; } }
@keyframes crw-press { 0% { transform: scale(1); } 35% { transform: scale(0.94); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes crw-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes crw-jolt { 50% { transform: translate(2px, -2px) scale(1.02); } }
@keyframes crw-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crw-flip { 0% { transform: scale(0) rotateY(0); } 60% { transform: scale(1.18) rotateY(540deg); } 100% { transform: scale(1) rotateY(720deg); } }
@keyframes crw-stamp { 0% { transform: rotate(-6deg) scale(2.6); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
@keyframes crw-fly {
  0% { transform: translate(0, 0) rotate(0) scale(0.6); opacity: 0; }
  10% { opacity: 1; }
  40% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--spin) * 0.5)) scale(1); }
  100% { transform: translate(calc(var(--dx) * 1.25), var(--fall)) rotate(var(--spin)) scale(0.9); opacity: 0; }
}

/* Phones: a shorter head, the choices as rows with the icon on the left. */
@media (max-width: 560px) {
  .modal:has(.crw) { padding: 10px; }
  .crw-head { padding: 4px 10px 12px; }
  .crw-hero { width: 120px; height: 92px; }
  .crw-coin { width: 60px; height: 60px; }
  .crw-plate { padding: 4px 8px 2px; }
  .modal .crw-title { font-size: 18px; }
  .crw-amt b { font-size: 38px; }
  .crw-picks { grid-template-columns: 1fr; gap: 8px; }
  .crw-pick { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; }
  .crw-ico { flex: none; width: 40px; height: 40px; font-size: 20px; }
  .crw-ico img { width: 34px; height: 34px; }
  .crw-hero-z { width: 150px; height: 124px; }
  .crw-zcoin { width: 88px; height: 88px; }
  .crw-amt-z b { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .crw *, .crw::after, .crw-fly { animation: none !important; transition: none !important; }
  .modal .crw-stamp.on { opacity: 1; }
}