/* petiscos: contador do osso (menu, resultado), loja de bônus e HUD dos bônus da partida — petiscos.js */

/* contador: barra branca que enche de pêssego até o limite, com o osso (Treat) saindo pela esquerda, como no menu do client */
.snackpill { position: absolute; height: 36px; min-width: 150px; padding: 0 12px 0 42px; background: #fff; border: 3px solid var(--ink); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); white-space: nowrap; }
.snackpill i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: #ffd8ad; border-radius: 6px; }
.snackpill img { position: absolute; left: -16px; top: 50%; width: 52px; height: 52px; transform: translateY(-50%); filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.snackpill b { position: relative; }
button.snackpill:hover { filter: brightness(1.05); }
button.snackpill:active { transform: translateY(2px); }
.snackpill.bump { animation: bump .25s ease; }
.snackpill .sn-add { position: absolute; right: 6px; top: 100%; font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; pointer-events: none; animation: snadd 1.4s ease-out forwards; }
@keyframes snadd { 0% { opacity: 0; translate: 0 30px; } 25% { opacity: 1; translate: 0 6px; } 70% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }

/* ícone de bônus com selo (+1 / -1) */
.bn-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bn-ico img { object-fit: contain; }
.bn-ico b { position: absolute; right: -8px; bottom: -6px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; padding: 0 4px; font-family: var(--display); font-weight: 700; line-height: 1.15; color: var(--ink); }
.bn-ico.big img { width: 70px; height: 70px; }
.bn-ico.big b { font-size: 16px; }
.bn-ico.huge img { width: 104px; height: 104px; }
.bn-ico.huge b { font-size: 24px; right: -14px; bottom: -8px; }
.bn-ico.mini img { width: 22px; height: 22px; }
.bn-ico.mini b { display: none; }
/* dois sprites (icon2): o primeiro atrás, à esquerda e acima; o segundo na frente, à direita e abaixo */
.bn-ico.duo img { transform: translate(-17%, -13%) scale(.8); }
.bn-ico.duo img.i2 { position: absolute; left: 0; top: 0; transform: translate(19%, 15%) scale(.8); filter: drop-shadow(-2px -2px 0 rgba(0,0,0,.18)); }
.bn-ico.mini.duo img { transform: translate(-12%, -8%) scale(.85); }
.bn-ico.mini.duo img.i2 { transform: translate(14%, 10%) scale(.85); filter: none; }

/* raridade: etiqueta no alto do cartão (Comum branca, Raro azul, Épico roxa) */
.sn-rar { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); z-index: 2; padding: 1px 12px; border: 3px solid var(--ink); border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.sn-rar.comum { background: #fff; color: var(--ink); }
.sn-rar.raro { background: #2d8ee8; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.sn-rar.epico { background: #a14fe0; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.sn-rar.static { position: static; transform: none; display: inline-block; margin-top: 6px; font-size: 18px; }

/* ---------- loja ---------- */
.sn-title { position: absolute; left: 116px; top: 8px; height: 54px; padding: 0 18px; background: #ff6a00; border: 4px solid var(--ink); border-radius: 9px; display: flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 30px; color: #5a2205; white-space: nowrap; }
/* uma linha por raridade (3 comuns, 3 raros, 4 épicos), centradas */
.sn-grid { position: absolute; left: 36px; top: 98px; width: 684px; display: flex; flex-direction: column; gap: 36px; }
.sn-row { display: flex; justify-content: center; gap: 20px; }
/* cartão: sprite BoardPack (o do PackShop) com o ícone no papel e o nome na faixa laranja */
.sn-card { position: relative; width: 156px; height: 156px; border-radius: 16px; outline-offset: 5px; transition: transform .1s ease; }
.sn-card .sn-board { position: absolute; inset: 0; background: url("../img/sprites/BoardPack.png") center / 100% 100% no-repeat; filter: drop-shadow(0 5px 0 rgba(0,0,0,.25)); }
.sn-card:hover .sn-board { filter: brightness(1.07) drop-shadow(0 5px 0 rgba(0,0,0,.25)); }
.sn-card.sel { outline: 4px solid #fff; transform: translateY(-4px); }
.sn-card .bn-ico.big { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); pointer-events: none; }
.sn-card .sn-band { position: absolute; left: 5%; right: 5%; top: 63%; height: 22%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; color: #4e2408; white-space: nowrap; pointer-events: none; }
.sn-card .sn-band.long { font-size: 15px; line-height: .95; white-space: normal; text-align: center; }
.sn-card .sn-price { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 6px; height: 30px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.sn-card .sn-price img { width: 26px; height: 26px; }
.sn-card.short .sn-price { color: #c0322d; }
.sn-card.owned .sn-price { padding: 0 10px; font-size: 15px; }
.sn-card .sn-check { position: absolute; left: -16px; top: -20px; width: 60px; height: 60px; z-index: 3; transform: rotate(-4deg); pointer-events: none; }
.sn-card.pop { animation: punch .3s linear; }

/* cartão do item escolhido */
.sn-detail { position: absolute; left: 740px; top: 84px; width: 480px; height: 562px; background: #fff; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 rgba(0,0,0,.25); padding: 22px 26px 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); }
.sn-pic { width: 144px; height: 144px; flex: none; border: 4px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f6efe4; }
.sn-pic.raro { background: #dcecff; }
.sn-pic.epico { background: #efdefd; }
.sn-pic.pop { animation: punch .3s linear; }
.sn-nm { margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.05; color: var(--orange); -webkit-text-stroke: 1.5px #7a3d00; paint-order: stroke fill; }
.sn-rule { position: relative; align-self: stretch; height: 3px; background: var(--ink); margin: 16px 0 14px; }
.sn-rule i { position: absolute; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px; background: #fff; border: 3px solid var(--ink); border-radius: 5px; }
.sn-text { margin: 0; font-family: var(--body); font-weight: 800; font-size: 20px; line-height: 1.3; }
.sn-text img { width: 24px; height: 24px; vertical-align: -5px; }
.sn-meta { margin: 12px 0 0; font-family: var(--body); font-weight: 700; font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.sn-meta img { width: 22px; height: 22px; }
.sn-buy { left: 80px; bottom: 34px; width: 312px; height: 66px; font-size: 30px; }
.sn-buy .ico { width: 40px; height: 40px; margin-left: 4px; }
.sn-short { position: absolute; left: 0; right: 0; bottom: 8px; font-family: var(--body); font-weight: 800; font-size: 15px; color: #c0322d; }
.sn-help { left: 60px; right: auto; bottom: 14px; max-width: 1160px; }

/* menu e escolha de modo */
.sn-next { position: absolute; left: 430px; top: 652px; width: 420px; min-height: 44px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 4px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-family: var(--body); font-weight: 800; font-size: 15px; color: var(--ink); }
.sn-next > img { width: 30px; height: 30px; }
.sn-next:hover { filter: brightness(.97); }

/* HUD da loja: ícones dos bônus da partida e o balão com os textos */
.pill.bn-hud { gap: 5px; padding: 0 8px; }
.bn-pop { display: none; position: absolute; right: -3px; top: calc(100% + 10px); width: 400px; z-index: 9; background: #fff; border: 4px solid var(--ink); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 6px 0 rgba(0,0,0,.25); white-space: normal; flex-direction: column; gap: 8px; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); pointer-events: none; }
.bn-hud:hover .bn-pop, .bn-hud:focus .bn-pop { display: flex; }
.bn-pop .hd { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 19px; color: #b8580e; }
.pill .bn-pop .hd img { width: 30px; height: 30px; }
.bn-pop .ln { display: flex; gap: 8px; align-items: flex-start; }
.bn-pop .ln .bn-ico { margin-top: 1px; }
.pill .bn-pop .ln span img { width: 16px; height: 16px; vertical-align: -3px; }
.pill .bn-ico.mini img { width: 22px; height: 22px; }

/* fim de jogo: o total de petiscos da partida */
.sn-total { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: 516px; display: flex; align-items: center; gap: 6px; font-size: 17px; }
.sn-total img { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .snackpill .sn-add, .snackpill.bump, .sn-card.pop, .sn-pic.pop { animation: none !important; } }