/* offer.css — the Offer of the Day strip: the free claim and the paid deal, together.
 *
 * renderDailyOffer() used to draw the free claim and RETURN, so the freebie stood in
 * front of the daily deal rather than beside it, and a player who never claimed never
 * saw the $9 offer at all.
 *
 * THE PHONE DECIDES THIS LAYOUT. app.css records, measured: at 320x568 one hero was
 * 221px against 269px of usable page. So the halves stay SIDE BY SIDE at every width
 * and get shorter instead of stacking — stacked measures 255px, two across measures
 * 192px. Same lesson the rails below it learned: on a phone, shorten the block, do not
 * add pages.
 *
 * Split out of app.css, which had one line left against its budget.
 */

  /* Offer of the Day card */
  .offer-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid rgba(255,215,94,0.35); background: linear-gradient(120deg, rgba(255,215,94,0.08), rgba(215,139,255,0.08)); }
  /* The free card was hardcoded GREEN here, so a red freebie wore the rarest colour in the game. It takes `.offer-card.rar-*` below now, and says "free" in words. */
  .offer-swatch { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #10131f;
    /* A BUTTON now: the art is how you look at the skin up close (js/shop.js). The
       ring comes free from ui.css. */
    padding: 0; border: 0; cursor: zoom-in; transition: transform 0.12s ease, box-shadow 0.15s ease; }
  .offer-swatch:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
  .offer-swatch:active { transform: scale(0.97); }
  @media (prefers-reduced-motion: reduce) { .offer-swatch { transition: none; } .offer-swatch:hover, .offer-swatch:active { transform: none; } }
  /* The offer art is a standard `.swatch.loot` (so it gets the shared per-skin
     crop); this just sizes it to fill the 60px disc. */
  .offer-swatch .offer-art { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .offer-info { flex: 1 1 auto; min-width: 0; }
  .offer-name { font-size: 15px; font-weight: 800; color: #fff; }
  .offer-plus { color: #7fe3b0; font-size: 13px; font-weight: 700; }
  .offer-tag { font-size: 12px; color: #a9b2d6; margin-top: 2px; }
  /* "Just for you" — marks the per-player daily rotation. */
  .just-for-you { font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: #1a1330; background: linear-gradient(100deg, #ffd75e, #d78bff); padding: 2px 7px; border-radius: 999px; }
  .offer-rarity { margin: 4px 0 2px; }
  .offer-rarity .sp-tag { font-size: 9.5px; padding: 3px 9px; }
  .offer-btn { flex: 0 0 auto; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    color: #1a1330; border: none; border-radius: 10px; background: linear-gradient(180deg, #ffe27a, #f4c343); }
  .offer-btn:hover { filter: brightness(1.05); }
  .offer-btn:disabled { opacity: 0.62; cursor: default; filter: grayscale(0.8); }
  /* The paid Offer of the Day wears the RARITY of the skin it's selling — a gold
     card around a red skin reads as a Gold and misprices the offer (Kenny). */
  .offer-card.rar-red    { border-color: rgba(224,120,120,0.45); background: linear-gradient(120deg, rgba(255,90,90,0.10), rgba(180,86,86,0.06)); }
  .offer-card.rar-purple { border-color: rgba(184,150,236,0.5);  background: linear-gradient(120deg, rgba(150,90,255,0.12), rgba(140,96,214,0.06)); }
  .offer-card.rar-gold   { border-color: rgba(228,198,130,0.5);  background: linear-gradient(120deg, rgba(244,180,50,0.12), rgba(196,164,80,0.06)); }
  .offer-card.rar-green  { border-color: rgba(104,224,152,0.5);  background: linear-gradient(120deg, rgba(52,214,110,0.12), rgba(74,222,128,0.06)); }
  .offer-btn.rar-red     { color: #2a0d0d; background: linear-gradient(180deg, #ff9a9a, #e35d5d); }
  .offer-btn.rar-purple  { color: #1e0f33; background: linear-gradient(180deg, #d9b6ff, #a86bf0); }
  .offer-btn.rar-gold    { color: #2a1f06; background: linear-gradient(180deg, #ffe27a, #f4c343); }
  .offer-btn.rar-green   { color: #06240f; background: linear-gradient(180deg, #8affc0, #35d67d); }
  /* The claim button keeps the neutral gold. It is deliberately NOT green: green is a
     RARITY in this shop, and the free card was once hardcoded that colour, so a red
     freebie wore the rarest look in the game. The card says "free" in words instead. */

  /* ---- The strip: two halves, one row, at every width ----------------------
     `flex: 1 1 auto` is load-bearing. app.css:1393 makes #offerBody a flex container,
     so the strip is a flex ITEM and defaults to `flex: 0 1 auto`, which sizes it to
     its content: it measured 957px inside a 1149px section and left a quarter of the
     strip empty on the right. Kenny saw it immediately. The old layout never showed
     this because a single card filled the row by being the only thing in it. */
  .offer-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 auto; min-width: 0; }
  /* One half is one card. When only the paid offer exists (no freebie authored at
     all) it takes the strip on its own rather than sitting in half of it looking
     like something is missing beside it. */
  .offer-strip.solo { grid-template-columns: 1fr; }

  /* ---- Claimed: the skin you got, greyed and stamped ----------------------
     This half used to show a fogged question mark reading "Tomorrow's free skin", and
     counted down the DAILY offer reset beside it. The free drop is MONTHLY, so it was
     promising every player a new free skin every night. Kenny, correctly, was furious.

     What it shows instead is the skin they actually claimed, desaturated so it reads
     as past rather than available, with a stamp on it. Recognition, not a receipt:
     "oh yeah I remember claiming that skin." */
  .offer-card.claimed { border-color: rgba(150,160,200,0.26);
    background: linear-gradient(120deg, rgba(140,150,190,0.06), rgba(90,100,140,0.03)); }
  .offer-card.claimed .offer-name { color: #b9c3e4; }
  .offer-card.claimed .offer-tag { color: #8b95bb; }

  .offer-claimed-art { position: relative; flex: 0 0 auto; display: block; }
  /* Grey, not hidden. The art is the whole point of showing this at all, so it stays
     legible: enough desaturation to read as spent, not so much it becomes a smudge. */
  .offer-claimed-art .offer-swatch { filter: grayscale(0.85) brightness(0.72); }

  /* The stamp. Tilted like one, but only slightly: a real rubber stamp lands askew and
     a 30-degree banner reads as a sale sticker, which is the opposite of what this
     says. It sits ACROSS the art rather than beside it so the two are one object. */
  .offer-stamp {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-11deg);
    font-size: 8px; font-weight: 900; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase;
    color: #cfd8f5; padding: 3px 5px; border-radius: 3px; white-space: nowrap;
    border: 1.5px solid rgba(207,216,245,0.75); background: rgba(16,19,31,0.72);
    pointer-events: none;
  }

  /* ---- Narrow: shorter, never stacked --------------------------------------
     TWO IDs on every selector here, matching `#shopHomePage #offerSection` in
     app.css. Written with one ID first, and none of it applied: app.css's narrow
     block is more specific, so the swatch stayed 44px, the gap stayed 10px and the
     name stayed 13.5px while this file believed it had set all three. The strip
     measured 219px against 205px of room and the shop overflowed by 14. Loading
     later than another stylesheet only wins ties. */
  @media (max-width: 900px) {
    #shopHomePage #offerSection .offer-strip { gap: 6px; }
    /* The card turns vertical INSIDE its half: art over name over button. A row
       layout at 135px of width leaves the name about forty pixels to live in. */
    #shopHomePage #offerSection .offer-card {
      flex-direction: column; text-align: center; gap: 5px; padding: 8px 6px;
    }
    /* 44px, not 38px: this is a tap target now, and 44 is the floor docs/ui-rules.xml sets. */
    #shopHomePage #offerSection .offer-swatch { width: 44px; height: 44px; }
    #shopHomePage #offerSection .offer-stamp { font-size: 7px; padding: 2px 4px; }
    /* Two lines, then an ellipsis. A third line of a long skin name costs more than
       the end of the name is worth, and the card is a doorway to the skin, not the
       place you read its full title. */
    #shopHomePage #offerSection .offer-name {
      font-size: 12px; line-height: 1.25;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      overflow: hidden;
    }
    #shopHomePage #offerSection .offer-plus { display: block; font-size: 11px; }
    #shopHomePage #offerSection .offer-rarity { margin: 1px 0 0; }
    #shopHomePage #offerSection .offer-btn { width: 100%; padding: 6px 4px; font-size: 12px; }
  }