/* Prism draw card (themes/prism/components/lottery/card-lottery.php):
   a white card on a soft shadow. The picture in a rounded well, the kind
   on a white chip, the time left on a dark chip, a spectrum dot for every
   number a ticket carries, three facts in pale wells and the sales meter
   as a slim bar filling with the accent, red near the end. */
@import url("../../../lottery/card-lottery.css");
@import url("../_balls.css");

.ed-card-lottery, html.dark .ed-card-lottery {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, border-color .2s ease;
}
.ed-card-lottery::after, .ed-card-lottery::before, html.dark .ed-card-lottery::before { display: none; }
.ed-card-lottery:hover, .ed-card-lottery:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--psm-accent-line); }
@media (prefers-reduced-motion: reduce) { .ed-card-lottery:hover, .ed-card-lottery:focus-within { transform: none; } }

/* The picture in a rounded well */
.psm-lc__lid { position: relative; padding: 8px 8px 0; }
.psm-lc__window { position: relative; height: 12.5rem; overflow: hidden; border-radius: calc(var(--radius) - 8px); background: var(--paper-3); }
.psm-lc__pic { position: absolute; inset: 0; background-color: var(--paper-3); background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.ed-card-lottery:hover .psm-lc__pic { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ed-card-lottery:hover .psm-lc__pic { transform: none; } }

/* The kind on a white chip at the well's corner */
.psm-lc__kind {
  position: absolute; z-index: 1; top: 18px; inset-inline-start: 18px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .26rem .65rem; border-radius: 999px;
  background: var(--paper-2); color: var(--ink);
  font: 600 11.5px/1.3 var(--font-ui); letter-spacing: .02em;
  box-shadow: 0 2px 8px -2px rgba(16, 18, 28, .2);
}
.psm-lc__kind::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--psm-live); }

/* The time left on a dark chip */
.psm-lc__clock, .psm-lu__clock {
  position: absolute; z-index: 1; bottom: 12px; inset-inline-end: 18px;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem;
  background: var(--psm-panel); color: var(--psm-on-panel);
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(16, 18, 28, .45);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.psm-lc__button { flex-shrink: 0; width: 10px; height: 10px; background: currentColor; opacity: .8; -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat; }
.ed-card-lottery:hover .psm-lc__clock { transform: translateY(-2px); }
.psm-lc__clock .countdown-timer, .psm-lu__clock .countdown-timer { font: 600 12.5px/1.15 var(--font-num); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ed-card-lottery:hover .psm-lc__clock { transform: none; } }

/* The card */
.psm-lc__body { padding: .9rem 1.1rem 1.1rem; gap: .7rem; }
.psm-lc__title { margin: 0; font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); unicode-bidi: plaintext; overflow-wrap: break-word; }
.psm-lc__desc { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A spectrum dot for every number a ticket carries */
.psm-lc__dots { display: flex; flex-wrap: wrap; gap: 5px; }
.psm-lc__dots span { --b: var(--px-ball-1); width: 10px; height: 10px; border-radius: 999px; background: var(--b); }
.psm-lc__dots span:nth-child(6n+2) { --b: var(--px-ball-2); }
.psm-lc__dots span:nth-child(6n+3) { --b: var(--px-ball-3); }
.psm-lc__dots span:nth-child(6n+4) { --b: var(--px-ball-4); }
.psm-lc__dots span:nth-child(6n+5) { --b: var(--px-ball-5); }
.psm-lc__dots span:nth-child(6n+6) { --b: var(--px-ball-6); }

.psm-lc__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.psm-lc__facts > div { padding: .5rem .6rem; min-width: 0; border-radius: var(--radius-sm); background: var(--paper-3); }
.psm-lc__k { margin: 0 0 .15rem; font: 500 11px/1.2 var(--font-ui); letter-spacing: .02em; color: var(--ink-soft); overflow-wrap: break-word; }
.psm-lc__v { margin: 0; font: 600 1rem/1.2 var(--font-num); color: var(--ink); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.psm-lc__v small { font: 500 10.5px/1 var(--font-ui); color: var(--ink-soft); }
.psm-lc__v--free { font-family: var(--font-ui); font-weight: 600; color: var(--psm-good); }

.psm-lc__salesrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .6rem; margin-bottom: .4rem; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.psm-lc__pct { font-family: var(--font-num); font-weight: 600; font-size: .9rem; color: var(--psm-accent-text) !important; }
.psm-lc__pct[style*="psm-bad"] { color: var(--psm-bad) !important; }
.psm-lc__inf { color: var(--ink); font-weight: 700; }
/* The meter: a slim rounded bar */
.psm-lc__meter { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule); }
.psm-lc__meter > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme-400), var(--psm-accent)) !important; transition: width .5s ease; }
.psm-lc__meter > div[style*="psm-bad"] { background: var(--psm-bad) !important; }

.psm-lc__cta { margin-top: .3rem; white-space: normal; text-align: center; line-height: 1.25; text-wrap: balance; }

/* ── Upcoming draw (themes/prism/components/lottery/card-upcoming.php):
   the picture behind a band of frosted glass with a small prism in it ── */
.psm-lu { position: relative; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease; }
.psm-lu:hover, .psm-lu:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: reduce) { .psm-lu:hover, .psm-lu:focus-within { transform: none; } }
.psm-lu__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
@media (min-width: 768px) { .psm-lu__link { flex-direction: row; min-height: 210px; } }
.psm-lu__window { position: relative; flex-shrink: 0; min-height: 190px; margin: 8px; border-radius: calc(var(--radius) - 8px); overflow: hidden; background: var(--paper-3); }
@media (min-width: 768px) { .psm-lu__window { width: 38%; margin-inline-end: 0; } }
.psm-lu__pic { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.8); }
.psm-lu__band { position: absolute; z-index: 1; inset-inline: 0; top: 50%; height: 46px; margin-top: -23px; background: var(--psm-glass); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border-block: 1px solid var(--psm-glass-line); }
.psm-lu__band::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--psm-accent); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat; }
.psm-lu__clock { bottom: 12px; inset-inline-start: 12px; inset-inline-end: auto; z-index: 2; }
.psm-lu__body { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.15rem 1.15rem; min-width: 0; }
.psm-lu__kicker { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.psm-lu__title { margin: 0; font: 700 1.2rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: break-word; }
.psm-lu__desc { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft); }
.psm-lu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--rule-soft); }
.psm-lu__price { font: 600 1rem/1.2 var(--font-num); color: var(--ink); }
.psm-lu__price small { font: 500 .72rem/1 var(--font-ui); color: var(--ink-soft); }
.psm-lu__more { display: inline-flex; align-items: center; gap: .3rem; font-size: .84rem; font-weight: 600; color: var(--psm-accent-text); }
.psm-lu:hover .psm-lu__more { text-decoration: underline; text-underline-offset: 4px; }