:root{
  --carbon:#14100c;
  --carbon-2:#1e1811;
  --carbon-3:#26201a;
  --crema:#fff4dc;
  --crema-apag:#b7a98e;
  --oro:#ffc93c;
  --oro-suave:#ffd97a;
  --carmesi:#e8404e;
  --carmesi-osc:#8f1f2a;
  --menta:#ffc93c;
  --tinta:#1b1206;
}
/* ============================================================
   MODAL (overlay + panel estilo HUD)
============================================================ */
.modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 1000;
    display: none;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    background:var(--color-amarillo-oscuro);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.modal.abierto {
    display: flex;
}

/* viñeta de foco */
.modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* scanlines sutiles de arcade */
.modal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
    opacity: .35;
}

.modal-caja {
    position: relative;
    z-index: 3;
    width: 100%;
    height: calc(100% - clamp(30px, 4vw, 60px));
    overflow: hidden;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 244, 220, .028) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255, 244, 220, .028) 0 1px, transparent 1px 26px);
    border: 3px solid #4a3a26;
    padding: clamp(15px, 2vw, 30px);
    user-select: none;
}

.modal.abierto .modal-caja {
    animation: panelEntra .5s cubic-bezier(.2, .9, .3, 1.18);
}
.prod-img{
    width: 100%;
    object-fit: cover;
}
.modal.cerrando .modal-caja {
    animation: panelSale .3s ease forwards;
}

@keyframes panelEntra {
    from {
        opacity: 0;
        transform: translateY(36px) scale(.92);
    }
}

@keyframes panelSale {
    to {
        opacity: 0;
        transform: translateY(20px) scale(.94);
    }
}

/* temblor del panel en el golpe final */
.modal-caja.temblor-feliz {
    animation: panelShake .4s linear;
}

@keyframes panelShake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-7px, 4px);
    }

    40% {
        transform: translate(6px, -5px);
    }

    60% {
        transform: translate(-5px, -3px);
    }

    80% {
        transform: translate(4px, 3px);
    }
}

/* esquinas HUD */
.esquina {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 0 solid var(--oro);
    pointer-events: none;
}

.esquina.tl {
    top: -3px;
    left: -3px;
    border-top-width: 4px;
    border-left-width: 4px;
}

.esquina.tr {
    top: -3px;
    right: -3px;
    border-top-width: 4px;
    border-right-width: 4px;
}

.esquina.bl {
    bottom: -3px;
    left: -3px;
    border-bottom-width: 4px;
    border-left-width: 4px;
}

.esquina.br {
    bottom: -3px;
    right: -3px;
    border-bottom-width: 4px;
    border-right-width: 4px;
}

/* rayos de luz giratorios (momento loot) */
.rayos {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 0;
    width: 1100px;
    height: 1100px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255, 201, 60, .15) 0deg 9deg, rgba(255, 201, 60, 0) 9deg 18deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 60%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 60%);
    opacity: 0;
    transition: opacity .6s ease;
    animation: girarRayos 16s linear infinite;
}

@keyframes girarRayos {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.abierto-caja .rayos {
    opacity: 1;
}

/* destello blanco al reventar */
.flash {
    position: absolute;
    inset: 0;
    z-index: 60;
    background: #fff6e0;
    opacity: 0;
    pointer-events: none;
}

.flash.va {
    animation: destello .55s ease-out;
}

@keyframes destello {
    0% {
        opacity: 0;
    }

    14% {
        opacity: .95;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- cabecera del modal ---------- */
.modal-cabecera {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
}

.modal-titulo {
    font-family: 'Bungee', cursive;
    font-size: clamp(21px, 4vw, 32px);
    color: var(--color-blanco);
    letter-spacing: 1px;
    text-shadow: 3px 3px 0 var(--color-negro);
}

.modal-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--color-negro);
    letter-spacing: 1px;
    margin-top: 9px;
    line-height: 1.8;
}

.cabecera-botones {
    display: flex;
    gap: 8px;
}

.btn-icono {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: var(--color-blanco);
    border: 2px solid #000000;
    border-radius: 6px;
    color: var(--color-negro);
    transition: border-color .15s, transform .15s;
}

.btn-icono:hover {
    border-color: var(--oro);
    transform: translateY(-2px);
}

.btn-icono svg {
    width: 18px;
    height: 18px;
}

/* toggle de sonido */
#btnSonido .ico-off {
    display: none;
}

#btnSonido.apagado .ico-on {
    display: none;
}

#btnSonido.apagado .ico-off {
    display: block;
}

#btnSonido.apagado {
    color: #8d8071;
}

/* ============================================================
   ESCENA 3D
============================================================ */
.escena {
    position: relative;
    z-index: 4;
    height: 85%;
    perspective: 1100px;
    cursor: pointer;
    touch-action: manipulation;
}

.caja-hitbox {
    position: absolute;
    left: 50%;
    top: 49%;
    width: 310px;
    height: 340px;
    transform: translate(-50%, -50%);
    outline: none;
}

.caja-hitbox:focus-visible {
    outline: 3px dashed var(--oro);
    outline-offset: 10px;
    border-radius: 24px;
}

.caja-escena {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 180px;
    height: 150px;
    transform: translate(-50%, -50%) rotateX(-16deg);
    transform-style: preserve-3d;
}

.caja-float,
.caja-tilt,
.caja-spin,
.caja-hit {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.caja-float {
    animation: flotar 1.6s ease-in-out infinite alternate;
}

@keyframes flotar {
    from {
        transform: translateY(6px);
    }

    to {
        transform: translateY(-14px);
    }
}

.caja-spin {
    animation: girarCaja 2.6s ease-in-out infinite alternate;
}

@keyframes girarCaja {
    from {
        transform: rotateY(-33deg);
    }

    to {
        transform: rotateY(-17deg);
    }
}

.caja-hit {
    transform-origin: 50% 100%;
}

.caja-hit.g1 {
    animation: golpe1 .3s ease-out;
}

.caja-hit.g2 {
    animation: golpe2 .32s ease-out;
}

.caja-hit.g3 {
    animation: golpe3 .34s ease-out;
}

@keyframes golpe1 {
    30% {
        transform: scale(1.12, .8) rotate(2deg);
    }

    62% {
        transform: scale(.94, 1.07);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes golpe2 {
    28% {
        transform: scale(1.2, .72) rotate(-3deg);
    }

    60% {
        transform: scale(.9, 1.12) rotate(1deg);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes golpe3 {
    26% {
        transform: scale(1.28, .64) rotate(4deg);
    }

    58% {
        transform: scale(.86, 1.18) rotate(-2deg);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* --- caras del cuerpo (cel-shading por cara: colores planos) --- */
.cara {
    position: absolute;
    left: 0;
    top: 0;
    width: 180px;
    height: 150px;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .14);
}

.cara::after {
    /* cinta vertical */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 36px;
    height: 100%;
    transform: translateX(-50%);
    background: var(--oro);
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .28), inset -3px 0 0 rgba(0, 0, 0, .14);
}

.cara.frente {
    transform: translateZ(90px);
    background: #ea4452;
}

.cara.atras {
    transform: rotateY(180deg) translateZ(90px);
    background: #b02a36;
}

.cara.izq {
    transform: rotateY(-90deg) translateZ(90px);
    background: #c93240;
}

.cara.der {
    transform: rotateY(90deg) translateZ(90px);
    background: #d63a48;
}

.cara.t-int {
    top: -15px;
    transform: rotateX(90deg) translateZ(75px);
    background: #54121e;
    height: 180px;
}

.cara.fondo {
    top: -15px;
    transform: rotateX(-90deg) translateZ(75px);
    background: #7a1a26;
    height: 180px;
}

.cara.fondo {
    transform: rotateX(-90deg) translateZ(75px);
    background: #7a1a26;
    height: 180px;
}

.cara.fondo::after {
    background: #c79a30;
}

/* barrido de brillo cartoon en la cara frontal */
.barrido {
    position: absolute;
    top: -10%;
    left: -35%;
    width: 22px;
    height: 120%;
    background: rgba(255, 255, 255, .2);
    transform: skewX(-18deg);
    animation: barrer 4s ease-in-out infinite;
    pointer-events: none;
}

.cara.frente {
    overflow: hidden;
}

@keyframes barrer {

    0%,
    55% {
        left: -35%;
    }

    78%,
    100% {
        left: 120%;
    }
}

/* grietas de luz que aparecen al golpear */
.grieta {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.grieta path {
    fill: none;
    stroke: var(--oro-suave);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
}

.fisurada .grieta.g-a {
    opacity: 1;
    animation: trazoGrieta .4s ease-out forwards;
}

.al-borde .grieta.g-b {
    opacity: 1;
    animation: trazoGrieta .35s ease-out forwards;
}

@keyframes trazoGrieta {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- tapa 3D --- */
.tapa3d {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 204px;
    height: 48px;
    margin-left: -102px;
    margin-top: -24px;
    transform: translate3d(0, -99px, 0);
    transform-style: preserve-3d;
    transition: transform .16s ease-out;
}

.tensa .tapa3d {
    transform: translate3d(0, -110px, 0);
    animation: tremeTapa .1s .16s infinite alternate;
}

@keyframes tremeTapa {
    from {
        transform: translate3d(-1.5px, -110px, 0);
    }

    to {
        transform: translate3d(1.5px, -110px, 0);
    }
}

.tapa3d .cara {
    width: 204px;
    height: 48px;
}

.tapa3d .cara::after {
    width: 38px;
}

.tapa3d .cara.frente {
    transform: translateZ(102px);
    background: #f25361;
}

.tapa3d .cara.atras {
    transform: rotateY(180deg) translateZ(102px);
    background: #bb2f3c;
}

.tapa3d .cara.izq {
    transform: rotateY(-90deg) translateZ(102px);
    background: #d63a48;
}

.tapa3d .cara.der {
    transform: rotateY(90deg) translateZ(102px);
    background: #e34856;
}

.tapa3d .cara.arriba {
    top: -78px;
    transform: rotateX(90deg) translateZ(24px);
    height: 204px;
    background: #ff5f6d;
}

.tapa3d .cara.arriba::after {
    display: none;
}

/* cruz de cinta en la cara superior */
.tapa3d .cara.arriba .cv,
.tapa3d .cara.arriba .ch {
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--oro);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1);
}

.tapa3d .cara.arriba .cv {
    width: 38px;
    height: 100%;
    transform: translate(-50%, -50%);
}

.tapa3d .cara.arriba .ch {
    width: 100%;
    height: 38px;
    transform: translate(-50%, -50%);
}

/* la tapa sale volando al cuarto golpe */
.abierto-caja .tapa3d {
    animation: vueloTapa 1s cubic-bezier(.25, .5, .35, 1) forwards;
}

@keyframes vueloTapa {
    0% {
        transform: translate3d(0, -99px, 0);
        opacity: 1;
    }

    16% {
        transform: translate3d(0, -86px, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(-150px, -440px, 190px) rotateZ(-46deg) rotateX(58deg);
        opacity: 0;
    }
}

/* saltito de celebración del cuerpo */
.abierto-caja .caja-hit {
    animation: saltito .55s cubic-bezier(.3, 1.6, .4, 1);
}

@keyframes saltito {
    0% {
        transform: scale(1.14, .8);
    }

    45% {
        transform: translateY(-26px) scale(.96, 1.06);
    }

    100% {
        transform: translateY(0) scale(1, 1);
    }
}

/* --- moño (SVG de pie sobre la tapa) --- */
.mono {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 150px;
    height: 86px;
    transform: translate(-50%, -92%) translateZ(8px);
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .25));
}

/* --- sombra y aro de invocación en el suelo --- */
.sombra-suelo {
    position: absolute;
    left: 50%;
    top: 79%;
    width: 200px;
    height: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    filter: blur(7px);
    animation: sombrFlota 1.6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes sombrFlota {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: .55;
    }

    to {
        transform: translate(-50%, -50%) scale(.84);
        opacity: .34;
    }
}

.aro-suelo {
    position: absolute;
    left: 50%;
    top: 80%;
    width: 236px;
    height: 236px;
    margin: -118px 0 0 -118px;
    pointer-events: none;
}

.aro-suelo::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px dashed rgba(255, 201, 60, .5);
    border-radius: 50%;
    animation: girarAro 12s linear infinite;
}

@keyframes girarAro {
    from {
        transform: rotateX(70deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(70deg) rotateZ(360deg);
    }
}

/* --- combo --- */
.combo-txt {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 6;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    font-family: 'Bungee', cursive;
}

.combo-txt b {
    display: block;
    font-size: 46px;
    line-height: 1;
    text-shadow: 4px 4px 0 var(--tinta);
}

.combo-txt span {
    display: block;
    font-size: 15px;
    margin-top: 4px;
    color: var(--crema);
    text-shadow: 2px 2px 0 var(--tinta);
}

.combo-txt.pop {
    animation: comboPop .75s cubic-bezier(.2, .9, .3, 1) forwards;
}

@keyframes comboPop {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(2.4) rotate(-8deg);
    }

    22% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(-3deg);
    }

    68% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(-3deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-34px) scale(.85) rotate(-3deg);
    }
}

/* chispas */
.chispa {
    position: absolute;
    z-index: 7;
    pointer-events: none;
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* --- HUD bajo la escena --- */
.hud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: opacity .3s;
}

.abierto-caja .hud {
    opacity: 0;
    pointer-events: none;
}

.hp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hp-etiqueta {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--color-negro);
    letter-spacing: 1px;
}

.hp-barra {
    display: flex;
    gap: 5px;
}

.hp-barra .seg {
    width: 30px;
    height: 13px;
    transform: skewX(-14deg);
    border: 2px solid var(--color-negro);
    background: transparent;
    transition: background .2s;
}

.hp-barra .seg.lleno {
    background: var(--color-negro);
}
.seg{
    background-color: var(--color-blanco) !important;
}
.lleno{
    background-color: var(--color-negro) !important;
}
.hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--color-negro);
    letter-spacing: 1px;
    animation: parpadeo 1.15s steps(2) infinite;
}

@keyframes parpadeo {
    50% {
        opacity: .25;
    }
}

/* ============================================================
   RESULTADOS (botín)
============================================================ */
.resultados {
    display: none;
    position: relative;
    z-index: 5;
    text-align: center;
}

.fase-abierta .resultados {
    display: block;
}

.fase-abierta .escena {
    animation: salirEscena .45s ease forwards;
}

@keyframes salirEscena {
    to {
        opacity: 0;
        transform: translateY(-36px) scale(.9);
        visibility: hidden;
    }
}

.res-kicker {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--menta);
    letter-spacing: 2px;
    animation: subeEntra .5s .1s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

.res-titulo {
    font-family: 'Bungee', cursive;
    font-size: clamp(24px, 4.4vw, 38px);
    color: var(--color-blanco);
    text-shadow: 3px 3px 0 var(--color-negro);
    margin-top: 12px;
    animation: subeEntra .5s .18s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

.res-sub {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--color-negro);
    letter-spacing: 1px;
    line-height: 1.8;
    margin-top: 12px;
    animation: subeEntra .5s .26s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

@keyframes subeEntra {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

.tarjetas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 34px 0 6px;
}

.tarjeta {
    position: relative;
    width: 238px;
    background: var(--carbon-2);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    text-align: center;
    transform: var(--tf);
    transition: transform .22s ease;
    animation: cartaEntra .55s cubic-bezier(.2, .85, .3, 1.22) backwards;
    padding-bottom: 25px;
}

.tarjeta:hover {
    transform: var(--tf) translateY(-8px);
}

@keyframes cartaEntra {
    from {
        opacity: 0;
        transform: var(--tf) translateY(56px) rotate(-7deg);
    }
}

.tarjeta:nth-child(1) {
    animation-delay: .32s;
}

.tarjeta:nth-child(2) {
    animation-delay: .44s;
}

.tarjeta:nth-child(3) {
    animation-delay: .56s;
}

/* rarezas: la legendaria roba el protagonismo (nada de rejilla mecánica) */
.r-legendario {
    --raro: var(--oro);
    --tf: rotate(-2.5deg) translateY(7px);
    z-index: 2;
}

.r-epico {
    --raro: var(--carmesi);
    --tf: scale(1.06);
    z-index: 3;
}

.r-raro {
    --raro: var(--menta);
    --tf: rotate(2.5deg) translateY(7px);
    z-index: 1;
}

.chip-rareza {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--tinta);
    background: var(--raro);
    padding: 6px 9px 5px;
    white-space: nowrap;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.panel-icono {
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        repeating-linear-gradient(-45deg,
            color-mix(in srgb, var(--raro) 13%, transparent) 0 12px,
            transparent 12px 24px),
        #120e0a;
    border-bottom: 2px solid var(--color-negro);
}

.panel-icono svg {
    width: 72px;
    height: 72px;
    color: var(--raro);
}

.nombre-producto {
    font-family: 'Bungee', cursive;
    font-size: 13px;
    font-weight: 400;
    color: var(--crema);
    letter-spacing: .5px;
    line-height: 1.35;
    margin-top: 14px;
    min-height: 36px;
}

.fila-precios {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    min-height: 24px;
}

.precio-viejo {
    position: relative;
    font-family: 'Bungee', cursive;
    font-size: 15px;
    color: #8d8071;
    transition: color .3s .5s;
}

.precio-viejo::after {
    content: '';
    position: absolute;
    left: -5%;
    top: 52%;
    width: 110%;
    height: 4px;
    border-radius: 2px;
    background: var(--carmesi);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.7, 0, .3, 1) .45s;
}

.precio-listo .precio-viejo {
    color: #655a4c;
}

.precio-listo .precio-viejo::after {
    transform: scaleX(1);
}

.chip-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--crema);
    background: var(--carmesi);
    padding: 5px 6px 4px;
    border-radius: 3px;
    transform: scale(0);
    transition: transform .3s cubic-bezier(.2, 2, .4, 1) .8s;
}

.precio-listo .chip-desc {
    transform: scale(1);
}

.precio-nuevo {
    font-family: 'Bungee', cursive;
    font-size: 31px;
    line-height: 1;
    color: var(--menta);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
    margin-top: 10px;
    transform: scale(.92);
    transition: transform .2s;
}

.precio-nuevo sup {
    font-size: 16px;
    margin-right: 2px;
}

.tarjeta.contando .precio-nuevo {
    transform: scale(1.12);
    animation: temblorPrecio .12s linear infinite;
}

@keyframes temblorPrecio {
    0% {
        translate: -1px 0;
    }

    50% {
        translate: 1px 0;
    }

    100% {
        translate: -1px 0;
    }
}

.tarjeta.precio-final .precio-nuevo {
    animation: golpePrecio .45s cubic-bezier(.2, 2.2, .4, 1);
}

@keyframes golpePrecio {
    0% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

.ahorro {
    display: block;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--menta);
    margin-top: 12px;
    opacity: 0;
    transform: scale(.4);
}

.tarjeta.precio-final .ahorro {
    animation: apareceAhorro .4s .05s cubic-bezier(.2, 2, .4, 1) forwards;
}

@keyframes apareceAhorro {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.btn-reclamar {
    margin-top: 30px;
    font-family: 'Bungee', cursive;
    font-size: 16px;
    color: var(--tinta);
    background: var(--oro);
    border: 3px solid var(--tinta);
    cursor: pointer;
    padding: 15px 36px 13px;
    letter-spacing: 1px;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    box-shadow: 0 6px 0 #a87d12, 0 12px 22px rgba(0, 0, 0, .4);
    transition: transform .12s, box-shadow .12s;
    animation: subeEntra .5s .7s cubic-bezier(.2, .9, .3, 1.2) backwards;
}

.btn-reclamar:hover {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #a87d12, 0 8px 16px rgba(0, 0, 0, .35);
}

.btn-reclamar:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #a87d12;
}

.btn-reclamar.dado {
    animation: golpePrecio .4s;
}

/* ---------- toast de confirmación ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 1100;
    transform: translate(-50%, 90px);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 1.8;
    color: var(--menta);
    background: var(--carbon-2);
    border: 3px solid var(--menta);
    padding: 15px 20px 13px;
    text-align: center;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, 1.4, .4, 1), opacity .3s;
}

.toast.ver {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* confeti */
#confeti {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE Y ACCESIBILIDAD DE MOVIMIENTO
============================================================ */
@media (max-width:680px) {
    .modal-caja {
        padding: 18px 14px 24px;
    }

    .escena {
        height: 410px;
    }

    .caja-hitbox {
        transform: translate(-50%, -50%) scale(.74);
    }

    .combo-txt b {
        font-size: 36px;
    }

    .combo-txt span {
        font-size: 12px;
    }

    .tarjetas {
        gap: 30px;
    }

    .tarjeta {
        --tf: none;
        width: min(100%, 300px);
    }

    .tarjeta:hover {
        transform: translateY(-6px);
    }

    .toast {
        width: 88vw;
    }
}

@media (prefers-reduced-motion: reduce) {

    .boton-flotante-regalo,
    .badge-flotante,
    .caja-float,
    .caja-spin,
    .sombra-suelo,
    .aro-suelo::before,
    .barrido,
    .rayos,
    .hint {
        animation: none !important;
    }
}