/* ============================================================
   A Sorte do Dia — widget diário de tarô no hub (home)
   Usa os tokens do hub (--ink*, --color-accent, --color-primary)
   com fallbacks neutros pra funcionar claro/escuro.
   ============================================================ */
.widget--sorte { text-align: center; }
.sorte__prog { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink-faint, #8286bf); margin: 0 0 10px; }
.sorte__sub { font-size: 13px; color: var(--ink-soft, #6b6f9c); margin: 8px 0 0; }
.sorte__sub b { color: var(--ink, #e8eaff); }

.sorte__stage { position: relative; width: 150px; margin: 0 auto 12px; aspect-ratio: 5 / 8; perspective: 1100px; }
.sorte__card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.sorte__card.tap { cursor: pointer; animation: sorteBreathe 3s ease-in-out infinite; }
.sorte__card.tap:hover { filter: brightness(1.06); }
.sorte__card.flip { transform: rotateY(180deg); animation: none; }
.sorte__card.dim { filter: grayscale(.35) brightness(.7); }
@keyframes sorteBreathe { 50% { transform: translateY(-5px); } }

.sorte__face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); }
.sorte__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sorte__front { transform: rotateY(180deg); background: #12123a; }
.sorte__front.win { box-shadow: 0 0 0 2px var(--color-accent, #F5921A), 0 12px 30px -8px rgba(245, 146, 26, .5); }

.sorte__hint { font-size: 13px; color: var(--ink-soft, #b9bce6); min-height: 20px; margin-bottom: 8px; }
.sorte__hint b { color: var(--ink, #eef0ff); }
.sorte__timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--color-accent, #F5921A); }

.sorte__info { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 8px; }
.sorte__info .nm { font-weight: 800; font-size: 15px; color: var(--ink, #eef0ff); }
.sorte__info .tp { font-size: 12px; color: var(--ink-soft, #b9bce6); }
.sorte__pts { font-size: 12.5px; font-weight: 800; color: var(--color-accent, #F5921A); }
.sorte__cta { display: inline-block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--color-primary-2, #8b90e6); text-decoration: none; }
.sorte__cta:hover { text-decoration: underline; }
.sorte__next { font-size: 11.5px; color: var(--ink-faint, #8286bf); margin-top: 4px; }

.sorte__strip { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.sorte__slot { width: 24px; height: 32px; border-radius: 5px; display: grid; place-items: center; font-size: 13px; background: rgba(128, 132, 170, .14); border: 1px solid rgba(128, 132, 170, .22); opacity: .55; transition: transform .2s; }
.sorte__slot.on { opacity: 1; background: linear-gradient(160deg, #2d2e6e, #4d52af); color: #fff; border-color: var(--color-accent, #F5921A); transform: translateY(-1px); }

.sorte__deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 8px; }
.sorte__deck img { width: 100%; border-radius: 6px; display: block; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }

.sorte__cta-login { display: inline-block; margin-top: 8px; font-weight: 800; font-size: 13px; color: #fff; background: var(--color-accent, #F5921A); padding: 9px 14px; border-radius: 10px; text-decoration: none; }
.sorte__cta-login:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .sorte__card, .sorte__card.tap { animation: none; transition: opacity .3s; }
  .sorte__card.flip { transform: rotateY(180deg); }
}