/* The Merchant (/tip): Ozwald's merchant window. Our own frame in the site's bronze trim; item names in the usual
   item-quality colors; the art (portrait, icons) is a placeholder until Alex's own captures replace it after launch. */
.merchant-band { padding-top: 40px; }
.merchant {
  position: relative; max-width: 600px; margin: 0 auto; padding: 18px 22px 12px;
  border: 7px solid #493212; border-image: url("/img/trim.png") 7 / 7px stretch;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(201, 142, 90, 0.10), transparent 60%),
    linear-gradient(180deg, #221810, #160f0a);
  background-clip: padding-box;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  cursor: url("/img/cursor-point.png") 1 1, auto; /* the game's gauntlet over the whole window; the coin bag over items */
}
.m-back { cursor: url("/img/cursor-point.png") 1 1, pointer !important; }
.m-amount input { cursor: text; }

/* head: the portrait in a gold ring, the name like a nameplate with its guild under it */
.m-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.m-portrait { position: relative; flex: none; width: 92px; height: 92px; }
.m-portrait > img:first-child {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid #b8863b; box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18);
}
.m-mug { position: absolute; width: 34px; height: 34px; right: -6px; bottom: -4px; border: 2px solid #493212;
  border-radius: 3px; opacity: 0; transform: translate(30px, 20px) rotate(0); pointer-events: none; }
.m-title h2 { margin: 0; font-size: 28px; color: var(--gold); text-shadow: 0 1px 2px #000; }
.m-title p { margin: 0; color: var(--muted); font-size: 17px; }

/* the items: two columns of slots, like a merchant page */
.m-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.m-item {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; text-align: left;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); border-radius: 3px; color: var(--text);
  font: inherit; cursor: url("/img/cursor-buy.png") 1 1, pointer; /* the game's buy cursor (coin bag), over items only */
  transition: background 0.15s, border-color 0.15s;
}
.m-item:hover, .m-item:focus-visible { background: rgba(255, 209, 0, 0.07); border-color: #6e4022; outline: none; }
.m-item:focus-visible { box-shadow: 0 0 0 2px var(--bronze); }
/* an icon slot like the header's action bar: the whole icon inside, on the slot's black, the trim only on the edge */
.m-icon { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 4px; background: #0c0700; }
.m-icon img { width: 38px; height: 38px; }
.m-icon img[src$="coffee.jpg"] { width: 30px; height: 30px; transform: translateY(-1px); } /* (the mug sits on black: smaller, like the header's) */
.m-icon::after { content: ""; position: absolute; inset: 0; border: 5px solid transparent; border-image: url("/img/trim.png") 7 / 5px stretch; }
.m-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.m-name { font-weight: 700; font-size: 18px; text-shadow: 0 1px 1px #000; }
.m-price { color: var(--gold); font-size: 16px; }

/* item quality colors */
.q-common .m-name, .m-tt-name.q-common { color: #ffffff; }
.q-uncommon .m-name, .m-tt-name.q-uncommon { color: #1eff00; }
.q-rare .m-name, .m-tt-name.q-rare { color: #3d9bff; } /* (a touch lighter than the game's #0070dd, readable on dark) */
.q-epic .m-name, .m-tt-name.q-epic { color: #c27bff; }
.q-legendary .m-name, .m-tt-name.q-legendary { color: #ff8000; }

/* the tooltip: an item tooltip, shown on hover (mouse only) */
.m-shop { position: relative; }
.m-tooltip {
  position: absolute; z-index: 5; width: 260px; padding: 8px 11px; pointer-events: none;
  background: rgba(8, 6, 16, 0.94); border: 1px solid #5d5d7a; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); font-size: 16px; line-height: 1.35; color: #fff;
}
.m-tooltip p { margin: 0; }
.m-tt-name { font-weight: 700; font-size: 17px; }
.m-tt-use { color: #1eff00; margin-top: 2px !important; }
.m-tt-flavor { color: #ffd100; font-style: italic; margin-top: 2px !important; }
.m-tt-price { color: #fff; margin-top: 4px !important; }
.m-tt-hint { color: #00ff00; margin-top: 2px !important; }

/* pay */
.m-picked { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.m-picked .m-text .m-use { color: #1eff00; font-size: 16px; }
.m-amount { margin-bottom: 14px; }
.m-amount label { display: block; margin-bottom: 6px; color: var(--cream); }
.m-amount-row { display: flex; align-items: center; gap: 8px; }
.m-dollar { color: var(--gold); font-size: 22px; }
.m-amount input {
  width: 110px; padding: 7px 10px; font: 700 20px var(--body); color: var(--cream);
  background: #0c0806; border: 1px solid var(--bronze-lo); border-radius: 3px;
}
.m-amount input:focus { outline: 2px solid var(--bronze); outline-offset: 1px; }
.m-form { min-height: 40px; }
.m-form.loading::before { content: "Opening the purse…"; color: var(--muted); font-style: italic; }
.m-error { color: #ff6b5a; margin: 10px 0 0; }
.m-back {
  margin-top: 14px; padding: 0; background: none; border: 0; color: var(--bronze); font: 500 17px var(--body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.m-back:hover, .m-back:focus-visible { color: var(--cream); }

/* thanks: Ozwald drinks it, a heal number floats up, and he says thanks */
.m-thanks { text-align: center; padding: 0 0 4px; }
/* the heal number floats above Ozwald's head (it takes no room in the window) */
.m-fct { position: absolute; z-index: 3; top: 34px; left: 22px; width: 92px; text-align: center; pointer-events: none;
  margin: 0; font: 700 30px var(--display); color: #3cff3c;
  text-shadow: 0 0 2px #000, 0 2px 3px #000; opacity: 0; }
.m-say { margin: 4px 0 0; font-size: 19px; color: #fff; }
.m-say { font-style: italic; }
.merchant.drink .m-mug { animation: m-drink 2.2s ease-in-out forwards; }
.merchant.drink .m-portrait > img:first-child { animation: m-glow 2.2s ease-out forwards; }
.merchant.drink .m-fct { animation: m-float 2.4s ease-out 1.5s forwards; } /* (after the sip, not over the mug) */
@keyframes m-drink {
  0% { opacity: 0; transform: translate(40px, 24px) rotate(0); }
  20% { opacity: 1; transform: translate(4px, 0) rotate(0); }
  35% { transform: translate(-14px, -28px) rotate(-35deg); }   /* at his mouth: lower right of the face */
  70% { opacity: 1; transform: translate(-14px, -28px) rotate(-75deg); }
  100% { opacity: 0; transform: translate(10px, 8px) rotate(0); }
}
@keyframes m-glow {
  0%, 45% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
  65% { box-shadow: 0 0 0 2px #3a2610, 0 0 26px rgba(60, 255, 60, 0.75); }
  100% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
}
@keyframes m-float {
  0% { opacity: 0; transform: translateY(14px) scale(0.7); }
  15% { opacity: 1; transform: translateY(0) scale(1.15); }
  30% { transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px); }
}
/* the pouch of gold isn't drunk: it drops into Ozwald's hands, jingles, a few coins pop out, the number is gold */
.merchant.loot .m-mug { animation: m-catch 2.2s ease-out forwards; }
.merchant.loot .m-portrait > img:first-child { animation: m-glow-gold 2.2s ease-out forwards; }
.merchant.loot .m-fct { color: #ffd100; animation: m-float 2.4s ease-out 0.9s forwards; }
.m-coins { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.m-coins i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 35%, #fff6b0, #ffd100 45%, #a8740b); box-shadow: 0 0 4px rgba(255, 209, 0, 0.8); }
.merchant.loot .m-coins { left: 72%; top: 70%; } /* the coins spill out of the pouch */
.merchant.loot .m-coins i { animation: m-coin 1.1s ease-out 0.75s forwards; }
.m-coins i:nth-child(1) { --x: -46px; --y: -40px; } .m-coins i:nth-child(2) { --x: -18px; --y: -58px; }
.m-coins i:nth-child(3) { --x: 16px; --y: -60px; } .m-coins i:nth-child(4) { --x: 44px; --y: -38px; }
.m-coins i:nth-child(5) { --x: -36px; --y: -10px; } .m-coins i:nth-child(6) { --x: 38px; --y: -12px; }
@keyframes m-catch {   /* pops in where the anvil lands (lower right of the portrait), one little hop as the coins spill */
  0% { opacity: 0; transform: translate(-6px, -4px) scale(0.5); }
  14% { opacity: 1; transform: translate(-6px, -4px) scale(1.12); }
  22% { transform: translate(-6px, -4px) scale(1); }
  31% { transform: translate(-6px, -4px) scale(1); }
  36% { transform: translate(-6px, -10px) scale(1.04); }
  42% { transform: translate(-6px, -4px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-6px, -4px) scale(1); }
}


@keyframes m-coin {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes m-glow-gold {
  0%, 30% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
  55% { box-shadow: 0 0 0 2px #3a2610, 0 0 28px rgba(255, 209, 0, 0.85); }
  100% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
}
/* the repair kit: the anvil lands by Ozwald and takes three hammer strikes, each one throwing sparks */
.merchant.forge .m-mug { animation: m-strike 2.2s ease-out forwards; }
.merchant.forge .m-portrait > img:first-child { animation: m-glow-forge 2.2s ease-out forwards; }
.merchant.forge .m-fct { animation: m-float 2.4s ease-out 1.5s forwards; }
.merchant.forge .m-coins { left: 72%; top: 70%; }
.merchant.forge .m-coins i { width: 6px; height: 6px; margin: -3px;
  background: radial-gradient(circle, #fff 0 25%, #ffb347 45%, #d9530b); box-shadow: 0 0 5px rgba(255, 150, 40, 0.9);
  animation: m-spark 0.45s ease-out forwards; }
.merchant.forge .m-coins i:nth-child(1), .merchant.forge .m-coins i:nth-child(2) { animation-delay: 0.6s; }
.merchant.forge .m-coins i:nth-child(3), .merchant.forge .m-coins i:nth-child(4) { animation-delay: 0.95s; }
.merchant.forge .m-coins i:nth-child(5), .merchant.forge .m-coins i:nth-child(6) { animation-delay: 1.3s; }
.merchant.forge .m-coins i:nth-child(odd) { --x: -22px; --y: -26px; }
.merchant.forge .m-coins i:nth-child(even) { --x: 20px; --y: -28px; }
@keyframes m-strike {
  0% { opacity: 0; transform: translate(-6px, -40px); }
  20% { opacity: 1; transform: translate(-6px, -4px); }
  27% { transform: translate(-6px, -4px) scale(1); }
  29% { transform: translate(-6px, -1px) scale(1.08, 0.92); }
  33% { transform: translate(-6px, -4px) scale(1); }
  43% { transform: translate(-6px, -4px) scale(1); }
  45% { transform: translate(-6px, -1px) scale(1.08, 0.92); }
  49% { transform: translate(-6px, -4px) scale(1); }
  59% { transform: translate(-6px, -4px) scale(1); }
  61% { transform: translate(-6px, -1px) scale(1.08, 0.92); }
  65% { transform: translate(-6px, -4px) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-6px, -4px); }
}
@keyframes m-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes m-glow-forge {
  0%, 25% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
  45%, 60% { box-shadow: 0 0 0 2px #3a2610, 0 0 24px rgba(255, 140, 40, 0.7); }
  100% { box-shadow: 0 0 0 2px #3a2610, 0 0 16px rgba(255, 209, 0, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .merchant.forge .m-mug, .merchant.forge .m-portrait > img:first-child, .merchant.forge .m-coins i { animation: none; }
  .merchant.forge .m-fct { animation: none; opacity: 1; }
  .merchant.loot .m-mug, .merchant.loot .m-portrait > img:first-child, .merchant.loot .m-coins i { animation: none; }
  .merchant.loot .m-fct { animation: none; opacity: 1; }
  .merchant.drink .m-mug, .merchant.drink .m-portrait > img:first-child { animation: none; }
  .merchant.drink .m-fct { animation: none; opacity: 1; }
}

.m-foot { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.merchant:not([data-state="shop"]) .m-foot { visibility: hidden; }
.m-notes { max-width: 600px; margin: 22px auto 0; color: var(--muted); }
.m-notes p { margin-bottom: 8px; }

@media (max-width: 560px) {
  .merchant { padding: 14px 12px 10px; }
  .m-items { grid-template-columns: 1fr; }
  .m-portrait, .m-portrait > img:first-child { width: 72px; height: 72px; }
  .m-fct { left: 12px; width: 72px; font-size: 26px; }
  .m-title h2 { font-size: 24px; }
}
.m-notes .small, .m-amount .small { font-size: 15px; color: var(--muted); }
/* above the form: a padlock line and Stripe's official badge (the white one, made for dark backgrounds),
   linked to stripe.com as Stripe asks */
.m-secure { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 14px; }
.m-lock { display: inline-flex; align-items: center; gap: 7px; color: #5fd36a; font-weight: 500; font-size: 16px; }
.m-lock svg { flex: none; }
.m-stripe { display: block; opacity: 0.8; transition: opacity 0.15s; }
.m-stripe:hover, .m-stripe:focus-visible { opacity: 1; }
.m-stripe img { display: block; width: 110px; height: auto; }
.m-pay .m-back { display: block; }

/* the whisper: WoW's whisper pink for the label, a dark box like the amount field */
.m-whisper { margin-bottom: 12px; }
.m-whisper label { display: block; margin-bottom: 2px; color: #ff80ff; font-weight: 500; }
.m-whisper label .small { color: var(--muted); font-weight: 400; }
.m-whisper textarea {
  width: 100%; resize: vertical; min-height: 54px; padding: 7px 10px; font: 17px/1.4 var(--body); color: #ffffff;
  background: #0c0806; border: 1px solid var(--bronze-lo); border-radius: 3px; cursor: text;
}
.m-whisper textarea::placeholder { color: #7d6a5a; }
.m-whisper textarea:focus { outline: 2px solid #b35ab3; outline-offset: 1px; }
.m-email { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.45; }

/* recent purchases: like loot lines in the chat frame, anonymous */
.m-log { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.m-log-title { margin: 0 0 6px; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.m-log ul { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 1.5; }
.m-log li { color: #d9cbb3; }
.m-log .m-link, .m-receipt .m-link { font-weight: 700; }
.m-log .q-common.m-link, .m-receipt .q-common.m-link { color: #ffffff; } .m-log .q-uncommon.m-link, .m-receipt .q-uncommon.m-link { color: #1eff00; } .m-log .q-rare.m-link, .m-receipt .q-rare.m-link { color: #3d9bff; }
.m-log .q-epic.m-link, .m-receipt .q-epic.m-link { color: #c27bff; } .m-log .q-legendary.m-link, .m-receipt .q-legendary.m-link { color: #ff8000; }
.m-log .m-ago { color: var(--muted); }
/* the receipt: a small loot card under Ozwald's thanks */
.m-receipt { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto 2px;
  padding: 10px 18px 9px; background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }
.m-receipt-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; color: var(--text); font-size: 17px; }
.m-receipt-meta { color: var(--muted); font-size: 14px; letter-spacing: 0.02em; }
.m-pay.asking .m-whisper, .m-pay.asking .m-secure, .m-pay.asking .m-email { display: none; }
.m-help { margin: -2px 0 6px; color: var(--muted); font-size: 15px; }
/* item links in the list: plain text that acts like a link in chat */
.m-log button.m-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; cursor: url("/img/cursor-buy.png") 1 1, pointer; }
.m-log button.m-link:hover, .m-log button.m-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; }
.m-picked .m-icon { cursor: url("/img/cursor-point.png") 1 1, default; }
.m-picked .m-icon:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
/* Continue (the pouch's amount): the site's coffee button, a priest's frame that casts Power Word: Shield on hover */
.m-continue.btn-coffee.btn-small { padding-left: 14px; cursor: url("/img/cursor-point.png") 1 1, pointer; }
/* the passer-by's name: two slot-machine reels, each a little window on a rolling strip of words */
.m-reel {
  display: inline-block; position: relative; vertical-align: middle; overflow: hidden;
  height: 1.6em; padding: 0 0.45em; margin: 0 1px; text-align: center;
  border: 1px solid #6e4022; border-radius: 3px;
  background: linear-gradient(180deg, #050302 0%, #2a1d12 30%, #3a2817 50%, #2a1d12 70%, #050302 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.8), 0 0 0 1px #1a1009;
}
.m-reel { margin: 0; }
.m-reel:first-of-type { min-width: 5.6em; }
.m-reel:nth-of-type(2) { min-width: 6.8em; }
.m-strip { display: block; }
.m-strip > span { display: block; height: 1.6em; line-height: 1.6em; color: var(--gold); font-weight: 700; white-space: nowrap;
  position: relative; top: -0.12em; } /* (Alegreya sits low in a tight box: nudged up to look centered) */
.m-reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* the glass: dark at the top and bottom edges */
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 30%, transparent 70%, rgba(0,0,0,0.55)); }
.m-thanks .m-back { display: block; margin: 16px auto 0; } /* (under the receipt card, never beside it) */

/* back in the shop: the new purchase drops in at the top of the list with a golden flash, like fresh loot */
.m-log li.m-new { position: relative; border-radius: 3px; animation: m-new-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.2) 0.5s both, m-new-glow 2.6s ease-out 0.5s both; }
.m-log li.m-new::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 230, 140, 0.45) 45%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  animation: m-new-shine 0.9s ease-out 0.95s both; }
.m-log li.m-new .m-ago { color: var(--gold); }
@keyframes m-new-in { 0% { opacity: 0; transform: translateY(-14px) scale(0.96); } 100% { opacity: 1; transform: none; } }
@keyframes m-new-glow { 0% { background: rgba(255, 209, 0, 0.22); box-shadow: 0 0 0 1px rgba(255, 209, 0, 0.5); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; } }
@keyframes m-new-shine { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) { .m-log li.m-new, .m-log li.m-new::after { animation: none; } }
/* the thanks, front and center */
.m-thanks-title { margin: 2px 0 8px; font: 700 clamp(22px, 3.4vw, 28px)/1.25 var(--display); color: var(--gold);
  text-shadow: 0 1px 2px #000, 0 0 18px rgba(255, 209, 0, 0.35); animation: m-title-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.15) both; }
@keyframes m-title-in { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m-thanks-title { animation: none; } }

/* fireworks: a canvas reaching past both sides and above the window (never catches clicks) */
.merchant-band { overflow-x: clip; }
.m-fireworks { position: absolute; z-index: -1; /* behind the window: bursts open around it and slip behind its edges */ left: -220px; right: -220px; top: -180px; bottom: 0;
  width: calc(100% + 440px); height: calc(100% + 180px); pointer-events: none; }
.merchant.again .m-fct { animation: none !important; opacity: 0 !important; } /* (the number floats up once) */
/* the window glows while the thank-you is on screen (box-shadow only: a filter would trap the fireworks inside it) */
.merchant.celebrate { animation: m-card-glow 2.4s ease-in-out infinite; }
.merchant.celebrate.big { animation-name: m-card-glow-big; }
@keyframes m-card-glow {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 209, 0, 0.18); }
  50% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 42px rgba(255, 209, 0, 0.42); }
}
@keyframes m-card-glow-big {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 190, 0, 0.3); }
  50% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 70px rgba(255, 190, 0, 0.65); }
}
@media (prefers-reduced-motion: reduce) {
  .merchant.celebrate { animation: none; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 209, 0, 0.3); }
}
/* the amount in the window's top right corner during the thank-you: it lands, then bobs and shimmers on a loop
   (green like a heal number; gold for the pile) */
.m-badge { display: none; position: absolute; z-index: 3; top: 30px; right: 22px; margin: 0; pointer-events: none;
  align-items: center; gap: 7px; font: 700 34px/1 var(--display); letter-spacing: 0.02em;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 10px rgba(60, 255, 60, 0.35)); }
.m-badge .m-coin-slot { width: 40px; height: 40px; padding: 3px; } /* the game's gold coin item icon (64 px), in a slot like the shop's */
.m-badge .m-coin-slot img { width: 34px; height: 34px; }
.m-badge span {
  background: linear-gradient(100deg, #3cff3c 0%, #3cff3c 40%, #eaffea 50%, #3cff3c 60%, #3cff3c 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.merchant.big .m-badge { filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 12px rgba(255, 209, 0, 0.5)); }
.merchant.big .m-badge span {
  background-image: linear-gradient(100deg, #ffd100 0%, #ffd100 40%, #fff8d0 50%, #ffd100 60%, #ffd100 100%); }
/* the badge lands as one; then the coin and the amount each have their own loop: the coin flips over now and
   then with a glint, the number bobs and shimmers */
.merchant.celebrate .m-badge { display: flex; animation: m-badge-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.3) 0.4s both; }
.merchant.celebrate .m-badge span { display: inline-block; animation: m-badge-bob 2.6s ease-in-out 1s infinite, m-badge-shine 2.6s linear 1s infinite; }
.merchant.celebrate .m-coin-slot { animation: m-coin-flip 3.4s ease-in-out 1.6s infinite; }
@keyframes m-coin-flip {
  0%, 62%, 100% { transform: scaleX(1); filter: none; }
  70% { transform: scaleX(0.05); filter: brightness(1.6); }
  78% { transform: scaleX(1); filter: brightness(1.9); }
  86% { transform: scaleX(1) translateY(-3px); filter: brightness(1.15); }
  92% { transform: scaleX(1); filter: none; }
}
@keyframes m-badge-in { 0% { opacity: 0; transform: translateY(-12px) scale(0.6); } 100% { opacity: 1; transform: none; } }
@keyframes m-badge-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes m-badge-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
@media (max-width: 560px) { .m-badge { top: 22px; right: 14px; font-size: 24px; gap: 5px; } .m-badge .m-coin-slot { width: 30px; height: 30px; padding: 2px; } .m-badge .m-coin-slot img { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .merchant.celebrate .m-badge, .merchant.celebrate .m-badge span, .merchant.celebrate .m-coin-slot { animation: none; } }
/* the amount: no browser spinner arrows, and our own error line (red and bold, like the game's error text) */
.m-amount input { -moz-appearance: textfield; appearance: textfield; }
.m-amount input::-webkit-outer-spin-button, .m-amount input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-amount input.bad { border-color: #c0392b; box-shadow: 0 0 0 1px #c0392b, 0 0 10px rgba(255, 60, 40, 0.35); }
.m-amount-error { margin: 8px 0 0; min-height: 1.5em; color: #ff4b3a; font-weight: 700; font-size: 16px; line-height: 1.5;
  text-shadow: 0 1px 1px #000; white-space: nowrap; visibility: hidden; } /* (its line is always there: no height change) */
.m-amount-error.show { visibility: visible; animation: m-shake 0.35s ease-in-out; }
@keyframes m-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .m-amount-error.show { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* on a phone the amount badge sits over the name's end: during the thank-you, the name makes room (it wraps) */
@media (max-width: 560px) { .merchant.celebrate .m-title { padding-right: 96px; } }