/* Picked reward tiles, Rewards (.reward-card) and Lucky Street (.lucky-reward-card); js/picked-tiles.js. */

/* A picked card: bright green glowing border. */
.reward-card.reward-card-selected,
.lucky-reward-card.ls-selected {
    /* The same 1px border width as an unpicked card (so the button keeps its width and height); the green ring is
       drawn with box-shadow. */
    border: 1px solid #2ee35a !important;
    box-shadow: 0 0 0 2px #2ee35a, 0 0 0 5px rgba(76, 255, 114, 0.3), 0 0 12px rgba(46, 227, 90, 0.6) !important;
}

/* The pick "pop": scale up slightly and settle. */
@keyframes mhsPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.mhs-pop { animation: mhsPop 0.4s ease-out; }

/* Green corner ribbon "✓ Picked" (top left; the info button is top right). The card clips it. */
.mhs-picked-ribbon {
    position: absolute;
    top: 14px;
    left: -38px;
    width: 140px;
    transform: rotate(-45deg);
    background: #1fbf4a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
    padding: 4px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 3;
    pointer-events: none;
}
/* Lucky Street renders the ribbon on every card: shown only on picked ones. */
.lucky-reward-card .ls-picked-ribbon { display: none; }
.lucky-reward-card.ls-selected .ls-picked-ribbon { display: block; }
/* The old small tick is replaced by the ribbon. */
.reward-card .reward-card-check-badge,
.lucky-reward-card .ls-check-badge { display: none !important; }

/* The button stays the same size when picked (no empty strip under it), sits at the bottom of the card, and turns
   bright green "✓ Picked". */
.mhs-pick-foot { position: relative; margin-top: auto; }
.reward-card .reward-card-button,
.lucky-reward-card .lucky-reward-btn { margin-top: auto; }
.reward-card.reward-card-selected .reward-card-button,
.lucky-reward-card.ls-selected .lucky-reward-btn {
    background: linear-gradient(to bottom, #5dffaa, #2ee35a);
    color: #06210f;
    padding: 16px;
    border-radius: 10px;
    font-weight: 800;
}
.reward-card.reward-card-selected .reward-card-button:hover,
.lucky-reward-card.ls-selected .lucky-reward-btn:hover { background: linear-gradient(to bottom, #5dffaa, #25cf4f); color: #06210f; }

/* Both labels ("Select reward" / "✓ Picked") share one spot in the button, so it's the same height whichever shows
   (a one-line "✓ Picked" in a shorter button left an empty strip in the card). */
.reward-card .reward-card-button,
.lucky-reward-card .lucky-reward-btn { display: grid; place-items: center; }
.reward-card .reward-card-button > span,
.lucky-reward-card .lucky-reward-btn > span { grid-area: 1 / 1; }
.reward-card .reward-card-button > .mhs-label-off { visibility: hidden; }
.lucky-reward-card .lucky-reward-btn > .ls-btn-default,
.lucky-reward-card .lucky-reward-btn > .ls-btn-selected { display: block !important; }
.lucky-reward-card .lucky-reward-btn > .ls-btn-selected { visibility: hidden; }
.lucky-reward-card.ls-selected .lucky-reward-btn > .ls-btn-default { visibility: hidden; }
.lucky-reward-card.ls-selected .lucky-reward-btn > .ls-btn-selected { visibility: visible; }

/* "tap to change": a small second line inside the button, under "✓ Picked". It's in every card's button (hidden when
   not needed), and both labels share one spot, so every button and card is the same height: nothing under the button. */
.mhs-tap-change {
    display: block;
    text-align: center;
    color: #1a5c2a;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    margin-top: 3px;
    visibility: hidden;
}
.reward-card .mhs-tap-change.mhs-tap-on { visibility: visible; }
/* Lucky Street: on a picked card until it's locked (both saved), and not once 2 are chosen. */
.lucky-reward-card.ls-selected:not(.ls-locked) .mhs-tap-change { visibility: visible; }
.mhs-two-chosen .lucky-reward-card.ls-selected:not(.ls-locked) .mhs-tap-change { visibility: hidden; }

/* Both picked: the other cards fade a little (still tappable). */
.reward-card.mhs-unpicked-fade,
.mhs-fade-others .lucky-reward-card:not(.ls-selected) { opacity: 0.55; transition: opacity 0.25s ease; }
.reward-card.mhs-unpicked-fade:hover,
.mhs-fade-others .lucky-reward-card:not(.ls-selected):hover { opacity: 0.85; }

/* Coin burst, inside the card (the card clips it, so it never reaches an ad). */
.mhs-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.mhs-coin {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6b0, #f7c843 45%, #d99a13 100%);
    box-shadow: 0 0 0 1px #c88a0c inset;
    opacity: 0;
    animation: mhsCoin 0.7s ease-out forwards;
}
@keyframes mhsCoin {
    0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

/* Both picked: the "rewards chosen" box and the big button become one button. Shorter wording on narrow phones. */
.mhs-cta-merged .rewards-chosen-box,
.mhs-cta-merged .reward-cta-left,
.mhs-cta-merged .reward-cta-right,
.mhs-cta-merged #ls-cta-btn > .fa-chevron-circle-right { display: none !important; }
.mhs-cta-merged .reward-cta-bar,
.mhs-cta-merged #ls-cta-btn {
    background: linear-gradient(to bottom, #5dffaa, #2ee35a);
    color: #06210f;
    box-shadow: 0 4px 14px rgba(46, 227, 90, 0.45);
    justify-content: center;
}
.mhs-cta-merged .reward-cta-headline,
.mhs-cta-merged #ls-cta-label {
    font-weight: 900;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    text-align: center;
}
.mhs-cta-short { display: none; }
@media (max-width: 480px) {
    .mhs-cta-long { display: none; }
    .mhs-cta-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .mhs-pop { animation: none; }
    .mhs-burst { display: none; }
}