/* v0.16 Shop "Today" shelf (public/js/shop.js, docs/SHOP_V016.md).
   Moonlit Couture: night-navy glass, gold hairlines, ivory display serif.
   Everything reuses the existing art (catalog emotes, frames, prestige) and
   the tokens in styles.css. Motion is one soft glow on a fresh gift, off under
   reduced motion. Every tappable target is at least 44 px tall. */

.shop-today {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; min-width: 0;
  border: 1px solid var(--line); background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--tk-gold-hot-rgb), .09), transparent 60%),
    linear-gradient(180deg, rgba(22, 29, 69, .92), rgba(var(--tk-ink-1-rgb), .94));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .06), 0 10px 30px rgba(0, 0, 0, .25);
}
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.today-reset { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.today-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; text-align: center; color: var(--muted); font-size: 13px; }
.today-empty p { margin: 0; }
.today-retry { min-height: 44px; }
.today-offline { margin: 0; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; color: var(--gold-hot); background: rgba(3, 6, 20, .55); border: 1px dashed var(--line); }
.today-note { margin: 0; font-size: 12px; color: var(--muted); }
.cd { font-variant-numeric: tabular-nums; }

/* The gift: first, full width. */
.gift-card {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border-radius: 16px; min-width: 0;
  border: 1px solid var(--line-strong);
  background: linear-gradient(100deg, rgba(var(--tk-gold-deep-rgb), .28), rgba(22, 29, 69, .6) 65%);
}
.gift-card.claimed { border-color: var(--line-soft); background: rgba(3, 6, 20, .5); }
.gift-coin {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tk-gilt-ink);
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--gold) 70%); box-shadow: 0 0 0 2px rgba(var(--tk-gold-hot-rgb), .25);
}
.gift-coin svg { width: 26px; height: 26px; }
.gift-card.claimed .gift-coin { filter: saturate(.4) brightness(.85); }
.gift-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gift-title { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.1; color: var(--ivory); }
.gift-amount { font-size: 12.5px; color: var(--gold-hot); }
.gift-card.claimed .gift-amount { color: var(--muted); }
.gift-claim { flex: none; min-height: 44px; min-width: 88px; }
.gift-next { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11.5px; color: var(--muted); text-align: right; }
.gift-plus { font-weight: 700; font-size: 13px; color: var(--gold-hot); }
.gift-card.fresh { animation: gift-glow 1.6s ease-out 1; }
@keyframes gift-glow {
  0% { box-shadow: 0 0 0 0 rgba(var(--tk-gold-hot-rgb), .55); }
  100% { box-shadow: 0 0 0 14px rgba(var(--tk-gold-hot-rgb), 0); }
}

/* The month's theme: a code-drawn sky (moon phase + constellation) per month. */
.today-theme {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 62px; border-radius: 14px; min-width: 0;
  border: 1px solid var(--line-soft); background: linear-gradient(90deg, rgba(10, 16, 48, .9), rgba(3, 6, 20, .55));
}
.tt-sky { position: absolute; inset: 0; pointer-events: none; color: var(--tt-tint, var(--tk-sky-tint-0)); }
.tt-moon-svg { position: absolute; left: 8px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); }
.tt-stars { position: absolute; right: 0; top: 0; width: 132px; height: 100%; }
.tt-star { fill: currentColor; opacity: .45; }
.tt-line-c { fill: none; stroke: currentColor; stroke-width: .6; opacity: .16; }
.tt-moon-lit { fill: currentColor; opacity: .9; }
.tt-moon-shadow { fill: #0a1030; }
.today-theme > :not(.tt-sky) { position: relative; }
.today-theme .chip { background: rgba(3, 6, 20, .8); }
.tt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tt-kicker { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.tt-name { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.15; color: var(--ivory); }
.tt-line { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--gold-hot); border: 1px solid var(--line); background: rgba(3, 6, 20, .6);
}
.chip.muted, .chip:empty { color: var(--muted); border-color: var(--line-soft); }
.chip:empty { visibility: hidden; }
.chip[data-live="ended"] { color: var(--muted); }

/* Timed offers. */
.offer-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.offer-tile {
  position: relative; width: 100%; height: 100%; min-height: 176px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 8px 10px; border-radius: 16px; cursor: pointer; color: var(--ivory); font: inherit; text-align: center;
  border: 1px solid var(--line); background: linear-gradient(180deg, #1b2352, var(--tk-panel-deep));
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, .06); transition: border-color .2s, transform .12s var(--ease);
}
.offer-tile:hover { border-color: var(--line-strong); }
.offer-tile:active { transform: translateY(1px); }
.offer-tile.done { border-color: var(--line-soft); background: linear-gradient(180deg, #141a3d, #090c22); }
.offer-tile.w-weekend { border-color: rgba(185, 200, 255, .45); }
.offer-tile.w-monthly { border-color: var(--line-strong); }
.ot-ribbon {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 15px 15px 0 0; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-hot); background: rgba(var(--tk-line-rgb), .12); border-bottom: 1px solid var(--line-soft);
}
.ot-ribbon span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-ribbon b { flex: none; letter-spacing: .04em; font-size: 11px; color: var(--tk-gilt-ink); background: var(--gold-hot); padding: 1px 6px; border-radius: 999px; }
.offer-tile.w-weekend .ot-ribbon { color: #dfe6ff; background: rgba(185, 200, 255, .12); }
.offer-tile.done .ot-ribbon b { background: var(--muted); }
.ot-foot { display: inline-flex; align-items: baseline; gap: 5px; min-height: 22px; }
.ot-was { font-size: 12px; color: var(--muted); }
.offer-tile .st-status { color: var(--muted); }

/* A catalog tile whose item is on offer above. */
.st-offer { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hot); }
.shop-tile.on-offer { border-color: var(--line); }

/* The offer block in the item sheet. */
.is-offer { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 6, 20, .5); }
.is-offer p { margin: 0; }
.is-offer-top { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.is-offer-pct { letter-spacing: .04em; font-size: 12px; color: var(--tk-gilt-ink); background: var(--gold-hot); padding: 1px 8px; border-radius: 999px; }
.is-offer-price { display: inline-flex; justify-content: center; align-items: baseline; gap: 8px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-offer-price s { font-size: 14px; font-weight: 500; color: var(--muted); }
.is-offer-price .si-cur { align-self: center; }
.is-offer-ends { font-size: 12px; color: var(--muted); }
.is-buy { min-height: 48px; }

@media (min-width: 560px) {
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .offer-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-card.fresh, .offer-tile { animation: none; transition: none; }
}
body.reduced .gift-card.fresh { animation: none; }
.is-see-offer { min-height: 44px; color: var(--gold-hot); border-color: var(--line); }

/* Operational rules behind one disclosure. */
.today-details > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none;
  font-size: 12.5px; font-weight: 600; color: var(--gold-hot);
}
.today-details > summary::-webkit-details-marker { display: none; }
.today-details > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg);
}
.today-details[open] > summary::after { transform: rotate(225deg); }
.today-rules { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* The pre-existing Earned currency chip reaches the 44 px touch target too. */
.shop-info > summary { min-height: 44px; }