/* Game Night auction card: the lot set out on the board. A cream space
   under the track; the product stands on a red space in the lamp's pool,
   the time left on a walnut tile, the live state on a red tile, the price
   in the display face. Builds on the plugin's own card styles. */
@import url("../../../components/auction_card.css");

.ed-card-auction, html.dark .ed-card-auction {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s ease, border-color .2s ease;
}
.ed-card-auction:hover, .ed-card-auction:focus-within { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-md); border-color: var(--gmn-print); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction:hover, .ed-card-auction:focus-within { transform: none; } }
.ed-card-auction::before, html.dark .ed-card-auction::before {
  top: 0; bottom: auto; left: 0; right: 0; height: 6px; border-radius: 0; z-index: 2;
  background: var(--gmn-track);
}
.ed-card-auction.auction-ended-winner::before { opacity: .55; }
.ed-card-auction .ed-folio { color: #2b1a10; font-family: var(--font-ui); font-weight: 800; padding: .16rem .5rem; background: #fffaee; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(91, 58, 38, .25), 0 2px 0 #a68558; }
.ed-card-auction h3 { font-family: var(--font-display); font-weight: 800; unicode-bidi: plaintext; }

/* The photo well: the board in the lamp's pool, a red space where the
   lot stands */
.ed-card-auction > [class*="aspect-"] {
  border-bottom: 0 !important;
  background:
    radial-gradient(38% 10% at 50% 84%, rgba(217, 72, 65, .14) 0 70%, #d94841 72% 82%, transparent 85%),
    radial-gradient(60% 50% at 50% 0%, rgba(255, 250, 230, .95), transparent 70%),
    var(--gmn-linen),
    linear-gradient(180deg, #fbf3df, #efe1c0) !important;
}
html.dark .ed-card-auction > [class*="aspect-"] {
  background:
    radial-gradient(38% 10% at 50% 84%, rgba(240, 100, 90, .16) 0 70%, #f0645a 72% 82%, transparent 85%),
    radial-gradient(60% 50% at 50% 0%, rgba(255, 196, 120, .24), transparent 70%),
    linear-gradient(180deg, #2a1d14, #1a120c) !important;
}
.ed-card-auction > [class*="aspect-"] img { transform: translateY(-3%) scale(.7); filter: drop-shadow(0 10px 8px rgba(43, 26, 16, .35)); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.ed-card-auction:hover > [class*="aspect-"] img { transform: translateY(-6%) scale(.7); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction:hover > [class*="aspect-"] img { transform: translateY(-3%) scale(.7); } }
/* The live state on a red tile and the time left on a walnut one */
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 { padding: .24rem .6rem; background: #c0392f; color: #ffffff !important; border-radius: 999px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); font-family: var(--font-ui); font-weight: 800; letter-spacing: .05em; }
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 [style*="#16a34a"] { background: #ffffff !important; }
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 {
  padding: .3rem .65rem; border-radius: 10px;
  background: var(--gmn-grain), #5b3a26; color: #fbf3df !important;
  box-shadow: 0 3px 0 #34200f, 0 6px 10px -4px rgba(43, 26, 16, .5);
}
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 [data-end] { font-family: var(--font-ui) !important; font-weight: 800; font-size: 13px; color: #fbf3df !important; opacity: 1 !important; font-variant-numeric: tabular-nums; }

/* The price row: the display face over a dotted rule */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0; padding: .9rem 0 .2rem;
  background: none;
  border: 0 !important;
  border-top: 2px dotted var(--rule) !important;
  border-radius: 0;
  box-shadow: none;
}
.ed-card-auction .flex.items-end.justify-between.border-t :is(span, p, div):not(.auction-current-bid):not(.font-display) { color: var(--ink-soft) !important; letter-spacing: .05em; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-display); font-weight: 800 !important; font-size: clamp(1.3rem, 5vw, 1.5rem); color: var(--ink) !important; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ed-card-auction .info-btn { border: 2px solid var(--rule) !important; color: var(--ink) !important; border-radius: 11px !important; background: var(--paper-2); box-shadow: 0 3px 0 var(--rule); transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease; }
.ed-card-auction .info-btn:hover { border-color: var(--gmn-wood) !important; }
.ed-card-auction .info-btn :is(svg, i) { color: var(--ink) !important; }
.ed-card-auction .info-btn:active { transform: translateY(3px); box-shadow: none; }
/* The status word inside the badge takes the badge's own ink */
.ed-status [style*="--ink-soft"] { color: inherit !important; }

/* The info button fills with ink on hover; its icon takes the paper colour
   with it instead of keeping the ink it has at rest. */
.ed-card-auction .info-btn:hover,
.ed-card-auction .info-btn:hover :is(svg, i) { color: var(--paper) !important; }