/* ---------- MAIOR OU MENOR (hilo) ---------- */

.th-hl { display: flex; align-items: center; gap: 12px; }
.th-hl i {
  width: 44px; height: 62px; border-radius: 5px;
  background: linear-gradient(180deg, #F7FAEE, var(--papel) 60%, var(--papel-2));
  font-family: var(--f-display); font-style: normal; font-size: 17px; line-height: 1;
  color: #14261B; padding: 6px 7px; transform: rotate(-6deg);
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.th-hl i.verm { color: #B22036; }
.th-hl i b { display: block; font-size: 13px; font-family: var(--f-corpo); margin-top: 2px; }
.th-hl span { font-family: var(--f-digito); font-weight: 900; font-size: 30px; line-height: 1; color: var(--led); text-shadow: 0 0 12px rgba(82,255,160,.6); display: flex; flex-direction: column; }
.th-hl span em { font-style: normal; color: var(--tarja); text-shadow: 0 0 12px rgba(255,61,85,.5); }
.card-jogo:hover .th-hl span { animation: thHlSobe .9s ease-in-out infinite alternate; }
@keyframes thHlSobe { to { transform: translateY(-5px); } }

.palco-hl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hl-hist { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 52px; max-width: 100%; }
.hl-cena { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 170px; }
.hl-pilha { position: relative; width: 110px; height: 154px; flex: none; perspective: 700px; }
.hl-pilha .hl-carta { position: absolute; inset: 0; }
.hl-mult {
  font-family: var(--f-digito); font-weight: 900;
  font-size: clamp(36px, 6vw, 56px); line-height: 1;
  color: var(--texto-2); min-width: 130px;
}
.hl-mult.win { color: var(--led); text-shadow: 0 0 18px rgba(82,255,160,.6); }
.hl-mult.pop { animation: hlPop .32s cubic-bezier(.3,1.6,.4,1); }
@keyframes hlPop { 45% { transform: scale(1.14); } }

.hl-escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(420px, 100%); }
.hl-btn { flex-direction: column; gap: 3px; padding: 12px 10px; font-size: 16px; }
.hl-btn small { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .75; }
.hl-aux { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); }

/* cartela de comprimido — tamanho pela variável --w */
.hl-carta {
  --w: 110px;
  position: relative; flex: none;
  width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * .07);
  background: linear-gradient(180deg, #F7FAEE, var(--papel) 58%, var(--papel-2));
  color: var(--papel-tinta);
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 #fff;
  outline: 1px dashed rgba(20,38,27,.16); outline-offset: calc(var(--w) * -.06);
  font-family: var(--f-display);
  transform-style: preserve-3d;
}
.hl-carta.verm { color: #B22036; }
.hl-canto { position: absolute; top: 7%; left: 8%; font-size: calc(var(--w) * .2); line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hl-canto i { font-style: normal; font-size: calc(var(--w) * .16); font-family: var(--f-corpo); }
.hl-canto.inv { top: auto; left: auto; bottom: 7%; right: 8%; transform: rotate(180deg); }
.hl-naipe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--w) * .46); font-family: var(--f-corpo); }
.hl-hist .hl-carta { --w: 36px; }
.hl-hist .hl-carta .hl-canto.inv { display: none; }
.hl-hist .hl-carta .hl-naipe { font-size: 14px; padding-top: 12px; }
.hl-hist .hl-carta.acerto { box-shadow: 0 0 0 2px var(--led-2), 0 4px 10px rgba(0,0,0,.4); }
.hl-hist .hl-carta.erro { box-shadow: 0 0 0 2px var(--tarja), 0 4px 10px rgba(0,0,0,.4); opacity: .85; }
.hl-hist .hl-carta.pulo { opacity: .45; }
.hl-carta.sai { animation: hlSai .42s ease-in forwards; }
@keyframes hlSai { to { transform: translateX(-80px) rotate(-10deg) scale(.5); opacity: 0; } }
.hl-carta.entra { animation: hlEntra .42s cubic-bezier(.2,.9,.3,1.08) backwards; }
@keyframes hlEntra { from { transform: translateX(96px) rotateY(70deg); opacity: 0; } }

@media (max-width: 480px) {
  .hl-cena { gap: 18px; }
  .hl-pilha { width: 92px; height: 129px; }
  .hl-pilha .hl-carta { --w: 92px; }
}