/* beta.css — the Beta tag on the wordmark, and the "this will change" line.
 *
 * Its own file because public/index.html is within a few lines of its structure
 * budget and public/css/app.css is 1,606 lines with its own ceiling. One <link>
 * costs one line; growing either of those costs the ratchet.
 *
 * The tag is deliberately quiet. It has to be legible at a glance and then stop
 * asking for attention, because it sits on the wordmark on every screen, on every
 * visit, forever. A gold pill that pulsed or shimmered would fail the hundredth
 * time. This one is a flat chip that reads once and then behaves like part of the
 * logo. */

.beta-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  /* Optical, not mathematical: uppercase small caps sit high in their box, so the
     pill needs a touch more below than above to look centred on the wordmark. */
  padding-bottom: 3px;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  color: #1a1408;
  background: linear-gradient(180deg, #ffd76a, #f0b429);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  /* Never inherits the wordmark's gradient-clipped text treatment. */
  -webkit-text-fill-color: #1a1408;
}

/* On the play hero the wordmark is huge, so the tag rides the top-right of it like
   the sticker on the reference art rather than sitting on the baseline. */
.play-hero h1 .beta-tag {
  font-size: 0.3em;
  vertical-align: super;
  margin-left: 10px;
  transform: rotate(-6deg);
}

/* The standing disclaimer. Low-contrast on purpose: it is a promise, not a warning,
   and it is on screen permanently. It must never compete with the Play button. */
.beta-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
  max-width: 34ch;          /* keeps it two tidy lines rather than one long one */
  margin-inline: auto;
  text-wrap: balance;       /* no orphan on the last line */
}
.beta-note b { color: rgba(255, 255, 255, 0.62); font-weight: 700; }
.beta-note a { color: rgba(255, 255, 255, 0.62); }

/* The clause appended to the three money notes. Same size as the refund text it
   joins so it reads as one sentence, not as fine print bolted onto fine print. */
.beta-clause { opacity: 0.85; }

@media (max-width: 560px) {
  /* The wordmark text hides on phones (app.css) but the tag must not go with it:
     "are we in Beta" is exactly the question a phone player still needs answered. */
  .tb-brand .beta-tag { margin-left: 2px; }
  .beta-note { max-width: 30ch; }
}

/* ---- Beta coins on the shop spotlight ------------------------------------
   Replaces the Special Event Bundles page, which the server now retires by era.
   Four cards on one row, the dearest first, because the Diamond is the hero and
   the only one with a stock count to lose. */
.beta-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 2px 2px;
}
.beta-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  color: inherit; cursor: pointer; text-align: center;
  /* Transform + opacity only, so a hover never costs a layout pass. */
  transition: transform 140ms cubic-bezier(.16,1,.3,1), border-color 140ms, background 140ms;
}
.beta-item:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.07); }
.beta-item:active:not(:disabled) { transform: translateY(-1px); }
.beta-item:disabled, .beta-item.sold-out { opacity: .45; cursor: default; }

/* The circle clip is on the PARENT, not the <img>. The image carries `.skin-crop`,
   which scales and slides it to Kenny's hand-drawn crop, and a border-radius on a
   transformed element scales with it: the mask would grow off the card instead of
   staying a circle. Clipping the frame is what makes the crop read as a coin. */
/* CAPPED, and the cap is a BALANCE decision, not a size one. `width: 100%` made a
   coin as big as its card: 340px tall, the loudest thing in the Shop, louder than
   the rotations a player is meant to browse. 150px fixed that and still left the
   coin shelf half again as tall as the bundle shelf under it on the Drops page,
   which reads as the coins shouting over the bundles. At 104px the two shelves are
   close to even and the page settles. The crop is still legible at this size - it
   is a letter in a circle, not detail work. */
.beta-art { width: min(100%, 104px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.beta-art img { width: 100%; height: 100%; object-fit: contain; }
.beta-name { font-weight: 700; font-size: 13px; }
/* The Gems get equal billing with the price: choosing between $10 and $30 is
   really choosing between 13,500 and 45,000 Gems, and burying that would be a
   good deal told badly. */
.beta-gems { font-size: 13px; font-weight: 800; color: #8fe4ff; }
.beta-price { font-size: 12px; opacity: .8; }
.beta-stock { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }

/* Rarity edge, matching the melt tier the card is actually sold at. */
.beta-item.rarity-green  { border-color: rgba(80, 230, 160, .5); }
.beta-item.rarity-gold   { border-color: rgba(240, 180, 41, .5); }
.beta-item.rarity-purple { border-color: rgba(170, 120, 240, .45); }

@media (max-width: 720px) { .beta-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Loot bubble odds + melt, as ONE control ------------------------------
   The odds strip and the melt panel used to be two stacked boxes listing the same
   four rarities. Collapsed it is one plain invitation to open it; open it shows the
   rarity chips, what each rarity melts for, and the door to the full per-skin table. */
.loot-melt { margin: 7px 0 0; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.loot-melt > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  min-height: 44px; padding: 4px 10px; cursor: pointer; list-style: none; font-size: 11px; color: #cdd8f5;
}
.loot-melt > summary::-webkit-details-marker { display: none; }
.loot-melt > summary::after { content: "▾"; opacity: .55; transition: transform 140ms ease; }
.loot-melt[open] > summary::after { transform: rotate(180deg); }
.lm-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 10px 6px; }
.lm-sum-hint { color: #8b97bd; font-weight: 700; }
/* Tabular figures: these sit in a column and must not jitter. */
.lm-chance, .lm-melt { font-variant-numeric: tabular-nums; }
.lm-table { padding: 0 10px 6px; }
.lm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 3px 0; font-size: 12px; }
.lm-row.lm-head { opacity: .5; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 4px; margin-bottom: 2px; }
.lm-rarity { font-weight: 600; }
.lm-melt { min-width: 72px; text-align: right; }
.lm-all {
  display: block; width: calc(100% - 20px); margin: 0 10px 10px; min-height: 40px;
  font: inherit; font-size: 11px; font-weight: 700; color: #8b97bd; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
}
.lm-all:hover { color: #cdd8f5; border-color: rgba(255,255,255,.22); }
.loot-cur-melt { opacity: .7; font-size: 11px; }

/* ---- Beta coin preview -----------------------------------------------------
   Opened by a card click. The purchase lives in here rather than on the card,
   because a founder coin is the most expensive thing in the game and it used to
   be one click from anywhere in the shop. */
.beta-preview {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(5, 7, 16, .72); padding: 20px;
}
.beta-preview[hidden] { display: none; }
.beta-preview-card {
  position: relative; width: min(340px, 92vw); text-align: center;
  background: #12162a; border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.beta-preview-x {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  background: none; border: 0; color: #8e99bd; font-size: 15px; cursor: pointer; border-radius: 8px;
}
.beta-preview-x:hover { background: rgba(255,255,255,.08); color: #eaf1ff; }
/* Same clip as the card: the crop scales the image, so the circle is on the frame. */
.beta-preview-art {
  width: 150px; aspect-ratio: 1; display: grid; place-items: center;
  overflow: hidden; border-radius: 50%;
}
.beta-preview-art img { width: 100%; height: 100%; object-fit: contain; }
.beta-preview-name { font-size: 19px; font-weight: 700; color: #fff; }
.beta-preview-gems { font-size: 14px; color: #7dd3ff; }
.beta-preview-stock { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.beta-preview-actions { display: flex; gap: 10px; margin-top: 4px; width: 100%; }
.beta-preview-actions .btn { flex: 1; }
.beta-preview-note { font-size: 11px; color: #7f88ad; margin: 2px 0 0; }
/* Empty until the checkout says something, so it takes no space in the resting card
   and cannot push the buttons around when it fills. */
.beta-preview-msg { font-size: 12px; color: #9fb0d8; margin: 0; min-height: 0; }
.beta-preview-msg:empty { display: none; }
.beta-preview-msg.error { color: #ff9d9d; }