/* coins.css — the purse, the receipt, the toast over the stage and the shop
   (coins.js, shop.js). Its own file so the economy can change without
   touching the stage's styles in styles.css; it loads after that file, so
   what it says about the game's own slots (.gm-earn, .gm-toast, .gm-result,
   the head) wins.

   The same two rules as the rest of the game: nothing a thumb is about to hit
   moves when a number lands (the purse has room for five figures, the
   receipt's slot holds its lines empty or full), and nothing moves at all
   for prefers-reduced-motion beyond a fade. */

.cn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the head: the title, Play / Zen and the purse ----------
   On a phone the three do not fit one line (360-390 px), so the toggle and
   the purse wrap under the title, together and still on the right; the
   purse's box never grows with the number, so the wrap is decided once. */
.gm-head-r { margin-left: auto; }
.gm-purse {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 12px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem;
  color: var(--ink); background: var(--g-well); border: 1px solid rgba(240, 196, 25, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gm-purse b {
  display: inline-block; min-width: 6ch; text-align: center;
  font: 750 .95rem var(--mono); font-variant-numeric: tabular-nums; color: var(--gold);
}
.gm-purse:hover { border-color: rgba(255, 217, 85, .8); }
.gm-purse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the coins landing: a bounce, which moves nothing around it (a transform) */
.gm-purse.cn-bump { animation: cn-bump .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cn-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(240, 196, 25, .22); }
  100% { transform: scale(1); }
}

/* ---------- the golden onion: gold where the rare one is blue ---------- */
.gm-rar.legendary {
  color: #2a1c00; border-color: rgba(255, 214, 102, .95);
  background: linear-gradient(110deg, #c9922e 0%, #ffd955 40%, #fff6d6 50%, #ffd955 60%, #c9922e 100%);
  background-size: 250% 100%; animation: gm-shimmer 2.4s linear infinite;
}
.gm-var.legendary { color: var(--gold); text-shadow: 0 0 8px rgba(240, 196, 25, .45); }

/* ---------- the mirror knife: legendary in the shop, marked where it cut ----------
   Its tile has the golden onion's chip on its swatch and a gold frame, at
   every tile's height. A board entry or a duel's cut made with it carries a
   small gold chip after the name; it does not shimmer, since a board can
   hold a dozen of them. */
.sh-tile.legendary { border-color: rgba(255, 217, 85, .75); box-shadow: 0 0 0 1px rgba(255, 217, 85, .25), 0 0 16px rgba(240, 196, 25, .16); }
.sh-tile.legendary.trying { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px rgba(240, 196, 25, .16); }
.sh-tile.legendary .sh-sw { position: relative; }
.sh-tile.legendary .gm-rar { position: absolute; left: 6px; top: 6px; font-size: .62rem; }
.gm-mirror {
  display: inline-block; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
  font-size: .66rem; font-weight: 750; line-height: 1.5; font-style: normal; color: #2a1c00; white-space: nowrap;
  background: linear-gradient(110deg, #d9a43a, #ffd955 45%, #fff3c4 55%, #f0c419); border: 1px solid rgba(255, 236, 170, .9);
}
/* on the board it sits at the end of the name's cell, by the score, and the
   name's ellipsis comes before it rather than over it */
.gm-who .gm-mirror { float: right; margin: 3px 0 0 6px; }

/* ---------- the toast over the stage ----------
   Below the HUD's corners (the clock, and the wipe button the tears add, take
   the top 80 px), so a long line never covers either. It takes no touch. */
.gm-toast { top: 84px; }
.cn-toast {
  display: inline-block; max-width: min(92%, 420px); padding: 7px 16px; border-radius: 999px;
  font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: var(--gold); text-wrap: balance;
  background: rgba(10, 12, 16, .74); border: 1px solid rgba(240, 196, 25, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: cn-toast 2.6s ease both;
}
.cn-toast.gold {
  border-radius: 16px; font-size: .92rem; color: #2a1c00; border-color: rgba(255, 236, 170, .9);
  background: linear-gradient(110deg, #d9a43a, #ffd955 45%, #fff3c4 55%, #f0c419);
  animation-duration: 4.6s;
}
@keyframes cn-toast {
  0% { opacity: 0; transform: translateY(10px) scale(.94); }
  9% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes cn-fade { 0%, 100% { opacity: 0; } 8%, 86% { opacity: 1; } }

/* ---------- the receipt on the result card ----------
   Held at the most lines the longest receipt takes at each width, empty,
   paid, or a word that this onion has paid already. Since Play's speed bonus
   that is a golden or uncommon onion cut quickly as the first onion of the
   day, under Double coins as well (power.js): three lines to 413 px, two to
   759, one from 760 (measured; before the speed line it was two lines to 699
   and one after). */
.gm-earn { margin: 8px 0 0; min-height: 2.8em; line-height: 1.4; font-size: .84rem; color: #c3cdd8; }
@media (max-width: 413px) { .gm-earn { min-height: 4.2em; } }
@media (min-width: 760px) { .gm-earn { min-height: 1.4em; } }
.cn-got { font-weight: 800; color: var(--gold); margin-right: 4px; white-space: nowrap; }
.cn-sum b { font: 650 .84rem var(--mono); color: var(--ink); }
.cn-op { color: var(--muted); }
.cn-note { color: var(--muted); }
.gm-earn.cn-new .cn-got { animation: cn-glow 1.4s ease; }
@keyframes cn-glow {
  0% { text-shadow: 0 0 0 rgba(240, 196, 25, 0); }
  30% { text-shadow: 0 0 12px rgba(240, 196, 25, .9); }
  100% { text-shadow: 0 0 0 rgba(240, 196, 25, 0); }
}
/* The card's other line that grows when the result lands: the coach's note
   under the receipt, one line before the first dicing and up to five after
   it on a narrow phone. The card's min-height (styles.css) sits under its
   content at every width, so it held nothing and the card grew by up to
   three lines as the pieces landed, taking Size colours and Share down with
   it. Held at the most lines any tip takes at each width (measured over
   every tip the coach and the replays write: two lines from 760 px, three to
   500, four to 350, five below), the card is one height empty, dicing and
   scored. The colour key's caption under it does the same on the narrowest
   phones, where naming the target piece takes it to a third line. */
.gm-note { min-height: 3em; }
@media (max-width: 759px) { .gm-note { min-height: 4.5em; } }
@media (max-width: 499px) { .gm-note { min-height: 6em; } }
@media (max-width: 349px) {
  .gm-note { min-height: 7.5em; }
  .gm-result .xp-cap { min-height: 4.5em; }
}

/* ---------- the shop ----------
   A sheet over the foot of the screen, no more than 55% of it, so the
   stage above shows whatever is tried on; edge to edge on a phone, and on a
   wide screen narrower and floating, still at the foot, since a centred
   panel would sit over the onion. The backdrop barely dims the stage. */
.gm-shop {
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; width: 100%; max-width: 100%;
  max-height: 55vh; max-height: 55dvh; overflow: hidden; color: var(--ink);
  background: var(--g-sheen), rgba(15, 19, 27, .94);
  border: 1px solid var(--g-line-strong); border-bottom: none; border-radius: 18px 18px 0 0;
  box-shadow: var(--g-hi), 0 -16px 48px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
.gm-shop[open] { display: flex; flex-direction: column; animation: sh-up .24s cubic-bezier(.2, .8, .3, 1); }
.gm-shop::backdrop { background: linear-gradient(180deg, rgba(5, 8, 12, 0) 0%, rgba(5, 8, 12, .1) 45%, rgba(5, 8, 12, .5) 100%); }
@keyframes sh-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .gm-shop {
    inset: auto 0 14px 0; margin: 0 auto; width: min(660px, calc(100% - 32px));
    max-height: min(55vh, 540px); max-height: min(55dvh, 540px);
    border-bottom: 1px solid var(--g-line-strong); border-radius: 18px;
    box-shadow: var(--g-hi), var(--g-lo), 0 24px 70px rgba(0, 0, 0, .6);
  }
}
.sh-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 12px 14px 0; }
/* only the tiles scroll: the head, the slots and the line under them keep
   their size however short the sheet */
.sh-in > :not(.sh-scroll) { flex: 0 0 auto; }
.sh-head { display: flex; align-items: center; gap: 10px; }
.sh-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.04rem; color: var(--gold); }
.sh-bal { font-weight: 700; white-space: nowrap; }
.sh-bal b { font: 750 1rem var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); }
.sh-x {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; font-size: 1rem; line-height: 1;
  color: #c3cdd8; background: var(--g-in-fill); border: 1px solid var(--g-line);
}
.sh-x:hover { background: var(--g-in-fill-hover); }
.sh-slots { display: flex; margin-top: 10px; }
.sh-slots button { flex: 1 1 0; min-height: 40px; padding: 4px 6px; font-size: .84rem; }
/* what was just done, or what a tap does: two lines held, so the tiles under
   it never move */
.sh-say { margin: 8px 0 6px; min-height: 2.6em; font-size: .8rem; line-height: 1.3; color: #c3cdd8; }
.sh-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
.sh-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px;
}
.sh-tile {
  display: flex; flex-direction: column; min-width: 0; border-radius: 12px; overflow: hidden;
  background: var(--g-in-fill); border: 1px solid var(--g-in-line);
}
.sh-tile.on { border-color: rgba(240, 196, 25, .6); }
.sh-tile.trying { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sh-look {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
}
button.sh-look:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sh-sw { display: block; height: 46px; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.sh-name { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 7px 10px 0; }
.sh-nm { font-weight: 700; font-size: .86rem; line-height: 1.25; min-width: 0; }
.sh-price { flex: 0 0 auto; font: 650 .74rem var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
/* two lines and an ellipsis; no padding below, which would show a third */
.sh-blurb {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  height: 2.6em; margin: 3px 0 8px; padding: 0 10px; font-size: .74rem; line-height: 1.3; color: var(--muted);
}
/* the one action per tile: Buy, Confirm, Equip, Put on / Take off, or a
   state (Equipped, too few coins) that a tap cannot change */
.sh-act {
  margin: 0 8px 8px; min-height: 38px; padding: 0 8px; border-radius: 10px; font: inherit; font-weight: 750; font-size: .82rem;
  color: var(--ink); background: var(--g-in-fill); border: 1px solid var(--g-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-act.buy {
  color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255, 230, 140, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.sh-act.armed {
  color: #fff; background: linear-gradient(180deg, #e9783f, #c9521f); border-color: rgba(255, 190, 150, .8);
  animation: sh-armed 1.3s ease-in-out infinite;
}
@keyframes sh-armed { 50% { box-shadow: 0 0 0 4px rgba(233, 120, 63, .3); } }
.sh-act.equip:hover, .sh-act.buy:hover { filter: brightness(1.06); }
.sh-act.on { color: var(--gold); background: transparent; border-color: rgba(240, 196, 25, .35); cursor: default; }
.sh-act.short { color: var(--muted); background: transparent; cursor: default; font-weight: 650; }
.sh-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sh-how { margin: 12px 2px 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.sh-how b { color: #c3cdd8; }

@media (prefers-reduced-motion: reduce) {
  .gm-rar.legendary { animation: none; background-position: 50% 0; }
  .gm-purse.cn-bump, .gm-earn.cn-new .cn-got, .sh-act.armed, .gm-shop[open] { animation: none; }
  .cn-toast { animation-name: cn-fade; }
}