/* Spanish Christmas lottery (Lotería de Navidad, LN).
   Orange bar above the header (NavidadBanner), block on the home page (NavidadHome) and the
   Christmas page (Navidad).

   House style first: the markup uses the existing WLS classes (bg-green-gradient,
   bg-orange-gradient, bg-lightgrey, title, btn-orange, btn-form-green), Oswald for headings,
   Montserrat for text and the 1100px column. This file only adds what the site does not have
   yet: the décimo (the real Spanish ticket, cream with red and green print), the snow and
   the number cards. */

.navidad,
.navidad-home,
.navidad-bar {
    font-family: 'Montserrat', sans-serif;
    color: #3c3c3c;
}

/* ---- Orange bar (all pages) ---- */
.navidad-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 16px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.navidad-bar:hover,
.navidad-bar:focus-visible {
    color: #fff;
    filter: brightness(1.05);
}

.navidad-bar .nb-title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navidad-bar .nb-cta {
    text-decoration: underline;
}

/* ---- Menu item: the house accent, bold ---- */
.sh-nav li.nav-navidad a {
    color: #fd9c0e;
    font-weight: 700;
}

/* A sixth item does not fit next to the logo and the tools on every screen and in every language.
   On wider screens the orange bar above the header (on every page) leads to the Christmas page;
   the item is only in the phone menu, where there is room. */
@media screen and (min-width: 701px) {
    .sh-nav li.nav-navidad {
        display: none;
    }
}

/* ---- Shared ---- */
.nv-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.nv-label {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* House buttons, sized to their text instead of the fixed 137px. */
.nv-cta {
    width: auto;
    padding: 0 24px;
    border: 0;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.nv-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.nv-snow span {
    position: absolute;
    top: 0;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation-name: nvSnow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes nvSnow {
    0% { transform: translateY(-10px); opacity: 0; }
    15% { opacity: .8; }
    100% { transform: translateY(420px); opacity: 0; }
}

/* ---- Décimo: the real ticket ---- */
.nv-decimo {
    overflow: hidden;
    border: 3px solid #f9d347;
    border-radius: 10px;
    background: #FFF8EA;
    color: #1b1b1b;
}

.nv-decimo-tilt {
    box-shadow: -5px 5px 0 rgba(0, 0, 0, .18);
    transform: rotate(-3deg);
}

.nv-decimo-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 2px dashed #d0b222;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
}

.nv-decimo-top span:first-child { color: #c8102e; }
.nv-decimo-top span:last-child { color: #167126; }

.nv-decimo-number {
    padding: 12px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.1;
    text-align: center;
}

.nv-decimo-foot {
    padding: 8px 16px;
    background: #fff5c0;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 700;
}

.nv-reels {
    display: flex;
    gap: 6px;
    padding: 16px;
}

.nv-reel {
    flex: 1 1 0;
    height: 72px;
    overflow: hidden;
    border: 2px solid #d0b222;
    border-radius: 5px;
    background: #fff;
}

.nv-reel-strip {
    animation-name: nvRoll;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
    animation-fill-mode: both;
}

.nv-reel-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
}

@keyframes nvRoll {
    from { transform: translateY(0); }
    to { transform: translateY(-90%); }
}

@media (prefers-reduced-motion: reduce) {
    .nv-snow { display: none; }
    .nv-reel-strip { animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ---- Green blocks: home page and the top of the Christmas page ---- */
.navidad-home,
.nv-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
}

.nh-inner,
.nv-hero-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 16px;
    box-sizing: border-box;
}

.nh-text,
.nv-hero-text {
    display: flex;
    flex: 1 1 380px;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.navidad .title,
.navidad-home .title {
    margin: 0;
}

.nh-title,
.nv-title {
    color: #fff;
}

.nh-intro,
.nv-intro {
    max-width: 540px;
    margin: 0;
    font-size: 1em;
    line-height: 1.8em;
}

.nh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    margin-top: 6px;
}

.nh-note {
    font-size: 14px;
    font-weight: 700;
}

.nh-small {
    margin: 0;
    font-size: 14px;
}

.nh-small a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.nh-decimo,
.nv-hero-decimo {
    flex: 0 1 400px;
    min-width: 0;
    margin: 0 auto;
}

.nv-countdown {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    align-items: baseline;
}

.nv-countdown-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nv-countdown-value {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
}

.nv-countdown-note {
    flex-basis: 100%;
    font-size: 14px;
    font-weight: 700;
}

/* ---- Numbers ---- */
.nv-shop-inner,
.nv-prizes-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 16px;
    box-sizing: border-box;
}

.nv-h2 {
    color: #3c3c3c;
}

.nv-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}

.nv-price {
    margin-top: 8px;
    color: #167126;
    font-weight: 700;
}

.nv-offer {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 5px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}

.nv-offer-hint {
    display: block;
    margin-top: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.nv-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}

.nv-search input {
    width: 220px;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    letter-spacing: .1em;
}

.nv-message {
    padding: 20px;
    border-left: 5px solid #c8c8c8;
    background: #fff;
    text-align: center;
}

.nv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.nv-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d7d9d7;
    border-radius: 5px;
    background: #fff;
}

.nv-card.is-gone { opacity: .6; }

.nv-decimo-small { border-width: 2px; border-radius: 6px; }

.nv-decimo-small .nv-decimo-top {
    padding: 5px 8px;
    font-size: 8px;
    letter-spacing: .04em;
    white-space: nowrap;
}

.nv-decimo-small .nv-decimo-number {
    padding: 6px 10px;
    font-size: 40px;
}

.nv-left {
    color: #ff7300;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.nv-qty {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

/* Round like the number balls of the other lotteries. */
.nv-qty-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #c8c8c8;
    border-radius: 50%;
    background: #fff;
    color: #3c3c3c;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.nv-qty-btn:disabled { opacity: .35; cursor: default; }

.nv-qty-value {
    min-width: 24px;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    text-align: center;
}

.nv-add {
    width: 100%;
    text-transform: uppercase;
}

.nv-incart {
    color: #167126;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* Like the order panel header in Checkout. */
.nv-cartbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: 12px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}

.nv-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.nv-info-block {
    flex: 1 1 320px;
    min-width: 0;
    padding: 20px 24px;
    border-left: 5px solid #c8c8c8;
    background: #fff;
    box-sizing: border-box;
}

.nv-info-block h3 {
    margin: 0 0 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
}

.nv-info-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8em;
}

/* ---- Prizes ---- */
.nv-prizes-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
}

.nv-prizes-text {
    flex: 1 1 320px;
    min-width: 0;
    line-height: 1.8em;
}

.nv-prizes-text p { margin: 16px 0 0; }

.nv-small { font-size: 14px; }

.nv-prize-grid {
    display: grid;
    flex: 1 1 460px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.nv-prize {
    padding: 14px 18px;
    border-left: 5px solid #24ba3d;
    background: #f4f4f4;
}

.nv-prize-name {
    color: #167126;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nv-prize-amount {
    margin-top: 2px;
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
}

.nv-foot {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 60px;
    box-sizing: border-box;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.8em;
}

.nv-foot a { color: #167126; font-weight: 700; }

/* ---- My tickets: the five-digit Christmas number in one wide ball ---- */
.mt-ball.mt-ball-wide {
    width: auto;
    padding: 0 10px;
    border-radius: 15px;
    letter-spacing: .06em;
}

/* ---- Home page: feature block in the place of the offer block ----
   Christmas feel: deep green with a light spot behind the décimo, gold edges (the décimo's
   own gold), thick falling snow, falling red and gold baubles, and Spanish red for the
   label and the button. */
.navidad-home {
    border-top: 4px solid #f9d347;
    border-bottom: 4px solid #f9d347;
    background: radial-gradient(ellipse at 72% 45%, #3fc457 0%, #24ba3d 18%, #167126 55%, #0f3b1f 100%);
}

/* Text and décimo above the snow and the baubles. */
.navidad-home .nh-inner {
    z-index: 1;
    padding: 80px 16px 70px;
}

.navidad-home .nh-title {
    font-size: 4em;
    line-height: 1.05;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.navidad-home .nh-decimo {
    flex-basis: 460px;
}

.navidad-home .nv-decimo-tilt {
    box-shadow: -6px 6px 0 rgba(0, 0, 0, .25), 0 0 60px rgba(249, 211, 71, .45);
}

.navidad-home .nv-label {
    background: linear-gradient(#d4213d, #a3132b);
}

.navidad-home .nv-cta.btn-orange {
    background: linear-gradient(#d4213d, #a3132b);
    box-shadow: 0 4px 0 #6e0c1c;
    font-size: 1.35em;
}

.navidad-home .nv-cta.btn-orange:hover {
    background: linear-gradient(#e0304b, #b3172f);
}

/* Thick snow over the whole block. */
.nh-snow span {
    animation-name: nhSnow;
    box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}

@keyframes nhSnow {
    0% { transform: translate(0, -20px); opacity: 0; }
    10% { opacity: .9; }
    50% { transform: translate(18px, 300px); }
    100% { transform: translate(-6px, 640px); opacity: .2; }
}

/* Falling Christmas baubles: shiny ball with a small gold cap. */
.nh-baubles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.nh-baubles span {
    position: absolute;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd0d6 0, #e3243f 22%, #a3132b 70%, #6e0c1c 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    animation-name: nhBauble;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.nh-baubles span.nh-gold {
    background: radial-gradient(circle at 35% 30%, #fffbe0 0, #f9d347 25%, #c99a14 72%, #8a6508 100%);
}

.nh-baubles span::before {
    content: "";
    position: absolute;
    top: -12%;
    left: 50%;
    width: 30%;
    height: 18%;
    border-radius: 2px;
    background: linear-gradient(90deg, #a07a10, #f9d347, #a07a10);
    transform: translateX(-50%);
}

@keyframes nhBauble {
    0% { transform: translate(0, 0) rotate(-12deg); }
    25% { transform: translate(10px, 170px) rotate(10deg); }
    50% { transform: translate(-8px, 340px) rotate(-10deg); }
    75% { transform: translate(8px, 510px) rotate(8deg); }
    100% { transform: translate(0, 700px) rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nh-baubles { display: none; }
}

/* ---- Christmas page: numbers with the cart next to them, as on the play form ---- */
.nv-shop-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}

.nv-shop-main {
    min-width: 0;
}

.nv-shop-side {
    position: sticky;
    top: 16px;
}

.nv-tickets {
    min-width: 0;
    padding: 0;
}

.nv-tickets .spn-tickets {
    margin: 0 0 12px;
}

.nv-tickets .div-order-panel {
    max-height: 360px;
}

.nv-cart-empty {
    padding: 18px 16px;
    background: #fff;
    font-size: 14px;
    line-height: 1.6em;
}

.nv-cart-offer {
    padding: 8px 16px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1em;
    text-transform: uppercase;
}

.nv-cart-hint {
    padding: 8px 16px;
    background: #fff4e5;
    color: #b85a00;
    font-size: 13px;
    font-weight: 700;
}

.nv-tickets .btn-checkout {
    float: none;
    display: block;
    text-align: center;
}

/* The checkout link wraps a block button: without this the browser underlines it
   (on the play form the button floats, so no underline shows there). */
.nv-tickets .div-cart > a,
.nv-tickets .div-cart > a:hover {
    text-decoration: none;
}

/* Cart lines: a flex row instead of floats. With the longer name "Lotería de Navidad" the
   price column did not fit next to it and dropped below the line (the little stripes). */
.nv-tickets .div-order-item {
    display: flex;
    align-items: flex-start;
}

.nv-tickets .div-order-item > div {
    float: none;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.nv-tickets .div-order-item > div:nth-child(3) {
    flex: 1 1 auto;
    min-width: 0;
}

.nv-tickets .div-order-item > div:nth-child(3) span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.nv-tickets .div-order-item > div:nth-child(4) {
    margin-left: auto;
}

/* Just added: the line in the cart lights up. */
.div-order-item.nv-flash {
    animation: nvFlash 1.6s ease-out;
}

@keyframes nvFlash {
    0%, 30% { background-color: #fff3b0; box-shadow: inset 4px 0 0 #fe7207; }
    100% { background-color: #e6e6e6; box-shadow: inset 4px 0 0 transparent; }
}

.nv-add.is-added,
.nv-add.is-added:disabled {
    background: #167126;
    opacity: 1;
}

/* Wide screens: the cart is always in view, no badge or message needed. */
.navidad .nv-badge {
    display: none !important;
}

.nv-badge.is-bump {
    animation: nvBump .6s ease-out;
}

@keyframes nvBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.nv-toast {
    position: fixed;
    left: 12px;
    right: 86px;
    bottom: 16px;
    z-index: 950;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 6px;
    background: #0f3b1f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity .25s, transform .25s;
}

.nv-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nv-toast a {
    color: #fd9c0e;
    text-decoration: underline;
    white-space: nowrap;
}

@media screen and (max-width: 900px) {
    .nv-shop-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .nv-shop-side {
        position: static;
    }

    .navidad .nv-badge {
        display: block !important;
    }

    .navidad .nv-badge[style*="display: none"] {
        display: none !important;
    }
}

/* ---- Christmas page header: décimo in the style of a real one ----
   Layout of the real décimo (artwork left, number, name and date in the middle, column with
   medallions right) without official logos, signature, codes or price: an illustration. */
.nv-ticket {
    display: grid;
    grid-template-columns: 28% minmax(0, 1fr) 19%;
    gap: 0 10px;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px;
    border-radius: 4px;
    background-color: #fbf8f1;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 52px, rgba(122, 90, 58, .16) 52px 53px, transparent 53px 56px, rgba(122, 90, 58, .16) 56px 57px, transparent 57px 60px, rgba(122, 90, 58, .16) 60px 61px),
        repeating-radial-gradient(ellipse at 60% 55%, rgba(184, 137, 46, .10) 0 1px, transparent 1px 6px);
    color: #2a2118;
    box-shadow: -6px 6px 0 rgba(0, 0, 0, .18), 0 10px 30px rgba(0, 0, 0, .25);
    transform: rotate(-2deg);
    aspect-ratio: 1.65 / 1;
    box-sizing: border-box;
}

.nv-ticket-art {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* The painting has its own gold frame. */
.nv-ticket-art img {
    display: block;
    width: 100%;
    height: auto;
}

.nv-ticket-caption {
    color: #1b1b1b;
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.nv-ticket-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.nv-ticket-number {
    padding: 2px 0;
    background: rgba(255, 255, 255, .85);
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .02em;
}

.nv-ticket-name {
    margin-top: 8px;
    color: #6b4426;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
}

.nv-ticket-date {
    margin-top: 6px;
    color: #1b1b1b;
    font-size: 14px;
    font-weight: 600;
}

.nv-ticket-stars {
    margin-top: 10px;
    color: #c9a24a;
    font-size: 10px;
    letter-spacing: .1em;
    white-space: nowrap;
    overflow: hidden;
}

.nv-ticket-side {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    border: 2px solid #7a5a3a;
    border-radius: 8px;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(122, 90, 58, .12) 0 1px, transparent 1px 4px);
    color: #3a2a1c;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
}

.nv-ticket-oval {
    flex: 1.4 1 0;
    border: 2px solid #7a5a3a;
    border-radius: 50%;
    background: #fbf8f1;
}

.nv-ticket-box {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
    border: 2px solid #7a5a3a;
    border-radius: 6px;
    background: #fbf8f1;
}

.nv-ticket-round {
    display: flex;
    flex: 1.2 1 0;
    align-items: center;
    justify-content: center;
    border: 2px solid #7a5a3a;
    border-radius: 50%;
    background: #fbf8f1;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ---- Phones ---- */
@media screen and (max-width: 600px) {
    .nh-inner, .nv-hero-inner { padding: 30px 16px 36px; }
    .navidad-home .nh-inner { padding: 50px 16px 40px; }
    .navidad-home .nh-title { font-size: 2.6em; }
    /* Phones: only the baubles at the far left and right, away from the text. */
    .nh-baubles span:nth-child(2), .nh-baubles span:nth-child(5), .nh-baubles span:nth-child(n+7) { display: none; }
    .nh-baubles span { width: 22px !important; height: 22px !important; }
    .nv-shop-inner, .nv-prizes-inner { padding: 40px 16px; }
    .nh-actions .nv-cta { width: 100%; white-space: normal; line-height: 1.2; min-height: 44px; height: auto; padding: 10px 16px; box-sizing: border-box; font-size: 1.2em; }
    .nv-decimo-number { font-size: 48px; }
    .nv-reels { padding: 12px; gap: 4px; }
    .nv-reel, .nv-reel-strip span { height: 56px; }
    .nv-reel-strip span { font-size: 36px; }
    .nv-toolbar { align-items: stretch; }
    .nv-search, .nv-search input { width: 100%; }
    .nv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .nv-card { padding: 10px; }
    .nv-decimo-small .nv-decimo-top { justify-content: center; }
    .nv-decimo-small .nv-decimo-top span:first-child { display: none; }
    .nv-decimo-small .nv-decimo-number { font-size: 30px; letter-spacing: .04em; }
    .nv-add { width: 100%; font-size: 1.1em; }
    .nv-cartbar { font-size: 15px; }
    .nv-cartbar .nv-cta { width: 100%; }
    .nv-prize-grid { grid-template-columns: 1fr; }
    .nv-ticket { padding: 8px; gap: 0 6px; }
    .nv-ticket-number { font-size: 40px; }
    .nv-ticket-name { font-size: 12px; }
    .nv-ticket-date { font-size: 11px; }
    .nv-ticket-side { font-size: 7px; gap: 3px; padding: 3px; }
    .nv-ticket-caption { font-size: 7px; }
    .nv-toast { right: 82px; }
}

@media screen and (max-width: 340px) {
    .nv-grid { grid-template-columns: 1fr; }
}