:root {
    --ink: #f7f8f5;
    --muted: #b7b2a7;
    --forest: #0e7d43;
    --forest-deep: #07130d;
    --green: #22c96d;
    --lime: #ffd447;
    --red: #e23b32;
    --yellow: #ffd447;
    --gold: #d7ad45;
    --cream: #170506;
    --panel: #2c0c10;
    --panel-soft: #35151a;
    --white: #fff;
    --line: rgba(255, 255, 255, .1);
    --shadow: 0 22px 70px rgba(0, 0, 0, .46);
    --radius: 26px;
}

.date-switcher {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: .75rem;
    align-items: end;
    margin-bottom: 1rem;
}
.date-switcher > a, .date-switcher > span {
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.07);
    color: inherit;
    text-decoration: none;
    font-size: 1.6rem;
}
.date-switcher form label { display: block; margin-bottom: .35rem; }
.inline-fields { display: flex; gap: .5rem; }
.inline-fields input { min-width: 0; width: 100%; }
.result-cards { display: grid; gap: .7rem; margin-top: 1rem; }
.result-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .9rem;
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
}
.result-card small { display: block; opacity: .7; margin-top: .2rem; }
.result-flag { font-size: 1.65rem; }
.winning-number { color: #d9b34c; font-size: 1.65rem; letter-spacing: .05em; }

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: radial-gradient(circle at 82% -10%, rgba(226,59,50,.2), transparent 31%), radial-gradient(circle at 0 72%, rgba(215,173,69,.07), transparent 28%), var(--cream);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { min-width: 0; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient { position: fixed; z-index: -1; filter: blur(2px); pointer-events: none; border-radius: 50%; }
.ambient-one { width: 430px; height: 430px; top: -250px; right: -120px; background: rgba(226,59,50,.13); }
.ambient-two { width: 360px; height: 360px; bottom: 5%; left: -240px; background: rgba(215,173,69,.1); }
.topbar {
    max-width: 1240px;
    height: 82px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark, .auth-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    color: var(--yellow);
    background: #101410;
    font-weight: 900;
    letter-spacing: -.06em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: -.03em; }
.brand small { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.icon-button { color: var(--ink); border: 1px solid var(--line); background: var(--panel); width: 42px; height: 42px; border-radius: 14px; cursor: pointer; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar-actions form { margin: 0; }
.share-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #a38a45; border-radius: 14px; color: #ffe6a4; background: #302713; font-size: .8rem; font-weight: 800; }
.share-whatsapp svg { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.share-whatsapp:hover { background: #48391a; border-color: var(--gold); }
.page-shell { width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto; padding: 24px 24px 130px; }
.surface { background: rgba(17,21,18,.94); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.eyebrow { display: block; margin-bottom: 8px; color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .15em; line-height: 1.5; }
h1, h2, h3, p { max-width: 100%; margin-top: 0; overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.055em; }
h2 { font-size: 1.45rem; letter-spacing: -.035em; }
.muted, .microcopy { color: var(--muted); }
.microcopy { font-size: .78rem; line-height: 1.5; text-align: center; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; padding: 12px 20px; font-weight: 800; line-height: 1.35; text-align: center; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.button.primary, .button.action-deposit { color: #031008; background: var(--green); box-shadow: 0 12px 28px rgba(34,201,109,.22); }
.button.lime { color: #171000; background: var(--yellow); }
.button.ghost { color: var(--ink); background: var(--panel-soft); border: 1px solid var(--line); }
.button.action-create { position: relative; isolation: isolate; overflow: hidden; color: #fff3d8; border: 1px solid #efc475; background: linear-gradient(175deg, #ed5554 0%, #bd2431 47%, #801825 51%, #ad2030 100%); box-shadow: inset 0 2px 0 #fff5, 0 10px 28px #9d182f44; animation: playPulse 2.8s ease-in-out infinite; }
.button.action-create:after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 15%, rgba(255,212,71,.55) 48%, transparent 78%); transform: translateX(-120%); animation: playShine 3.2s ease-in-out infinite; }
@keyframes playPulse { 50% { box-shadow: 0 14px 38px rgba(255,212,71,.25), 0 0 0 3px rgba(226,59,50,.14); } }
@keyframes playShine { 55%, 100% { transform: translateX(120%); } }
.button.full { width: 100%; }
.alert, .toast { padding: 14px 18px; border: 1px solid rgba(34,201,109,.24); border-radius: 16px; margin-bottom: 18px; background: #0d2819; color: #bdf7d2; font-weight: 650; line-height: 1.45; }
.alert.error, .validation { color: #ffaaa5; }
.alert.error { border-color: rgba(226,59,50,.32); background: #2a1010; }
.toast { position: sticky; top: 12px; z-index: 30; box-shadow: var(--shadow); }

.auth-wrap { min-height: calc(100vh - 180px); display: grid; grid-template-columns: 1.12fr .88fr; gap: 70px; align-items: center; }
.auth-copy { padding: 4vw; }
.auth-copy p { max-width: 580px; color: var(--muted); font-size: 1.1rem; line-height: 1.7; }
.feature-row { display: flex; gap: 10px; margin-top: 16px; font-weight: 650; }
.feature-row span { color: var(--green); }
.auth-card, .form-card { padding: clamp(24px, 5vw, 44px); }
.auth-icon { width: 58px; height: 58px; margin-bottom: 25px; }
.auth-card h2 { font-size: 2rem; margin-bottom: 8px; }
.stack-form { display: grid; gap: 10px; margin-top: 24px; }
.stack-form label, .field-label { font-size: .82rem; font-weight: 800; margin-top: 6px; }
input, select {
    width: 100%;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 15px;
    outline: none;
    color: var(--ink);
    background: #0c100d;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(34,201,109,.12); }
.password-field { position: relative; }
.password-field button { position: absolute; right: 7px; top: 7px; height: 38px; border: 0; background: transparent; color: var(--green); font-weight: 750; cursor: pointer; }
.narrow-section { max-width: 600px; margin: 5vh auto; }
.narrow-section .form-card h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1.12; margin-bottom: 16px; }
.form-card > p { line-height: 1.6; }
.auth-secondary-action { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.auth-secondary-action > span { color: var(--muted); font-size: .8rem; }
.text-link { display: block; margin-top: 15px; color: var(--green); font-size: .82rem; font-weight: 800; text-align: center; }

.hero-dashboard { min-height: 300px; padding: clamp(28px, 6vw, 70px); border: 1px solid rgba(255,255,255,.09); border-radius: 34px; display: flex; align-items: end; justify-content: space-between; gap: 30px; color: #fff; background: radial-gradient(circle at 86% 15%, rgba(255,212,71,.18), transparent 29%), radial-gradient(circle at 72% 100%, rgba(226,59,50,.24), transparent 35%), linear-gradient(135deg, #090b09, #121713); box-shadow: var(--shadow); overflow: hidden; }
.hero-dashboard h1 { max-width: 650px; margin: 12px 0; }
.hero-dashboard p { color: rgba(255,255,255,.68); }
.metric-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.metric-grid.home-balance { grid-template-columns: minmax(0, 1fr); }
.home-balance .metric-card.balance { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 98px; }
.home-balance .metric-label { grid-column: 1; }
.home-balance .metric-card > strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.home-balance .metric-card > small { grid-column: 1; grid-row: 2; }
.metric-grid.home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card { min-width: 0; min-height: 160px; padding: 24px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: 0 12px 35px rgba(0,0,0,.24); }
.metric-card.balance { color: #031008; background: linear-gradient(135deg, #16a957, var(--green)); border-color: rgba(76,255,148,.38); }
.metric-card.balance .metric-label { color: rgba(3,16,8,.7); }
.metric-card.prizes { border-color: rgba(215,173,69,.34); background: linear-gradient(145deg, #211a0b, #15140f); }
.metric-card.prizes strong, .metric-card.prizes small { color: #f4ce68; }
.metric-label { color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 12px 0 8px; letter-spacing: -.06em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric-card small { font-weight: 700; }
.metric-card .metric-note { margin-top: 8px; font-size: .75rem; line-height: 1.4; color: #dfcfac; }
.metric-card .prize-level { gap: 5px; margin: 3px 0 9px; padding: 5px 8px; font-size: .78rem; }
.metric-card .prize-level small { display: none; }
.section-block { margin-top: 46px; }
.quick-actions { display: grid; gap: 10px; margin-top: 18px; }
.quick-actions a { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid rgba(34,201,109,.22); border-radius: 20px; color: #fff; background: #0b2a19; }
.quick-actions a > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #05140b; background: var(--green); font-weight: 900; }
.quick-actions a > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.quick-actions a > span { flex: 0 0 40px; }
.account-panel { padding: clamp(20px, 3vw, 28px); margin-top: 18px; }
.account-panel .section-title { margin-bottom: 0; }
.account-panel h2 { margin: 0; font-size: 1.35rem; }
.account-panel p { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 6px 0 0; }
.account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-actions a { background: var(--panel-soft); border-color: var(--line); padding: 18px; }
.account-actions a:hover { border-color: var(--green); }
.account-actions a > span { background: rgba(34,201,109,.12); color: var(--green); }
.account-actions svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.quick-actions strong, .quick-actions small { display: block; }
.quick-actions small { margin-top: 3px; color: rgba(255,255,255,.65); }
.section-title { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.section-title h2 { margin: 5px 0 0; }
.section-title > a { color: var(--green); font-weight: 800; font-size: .85rem; }
.card-list { width: 100%; max-width: 100%; min-width: 0; display: grid; gap: 10px; }
.list-card { width: 100%; max-width: 100%; min-width: 0; min-height: 78px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; overflow: hidden; border-radius: 19px; background: var(--panel); border: 1px solid var(--line); }
.list-card > div:nth-child(2) { flex: 1; min-width: 0; }
.list-card strong, .list-card small { display: block; }
.list-card small { color: var(--muted); margin-top: 4px; font-size: .78rem; }
.list-value { min-width: 0; max-width: 45%; text-align: right; overflow-wrap: anywhere; }
.ticket-summary-card { display: block; }
.ticket-card-head { display: flex; align-items: center; gap: 14px; }
.ticket-card-title { flex: 1; min-width: 0; }
.ticket-card-title, .ticket-play-group strong, .list-card > div { overflow-wrap: anywhere; }
.ticket-card-title strong, .ticket-card-title small { display: block; }
.ticket-card-title small { color: var(--muted); margin-top: 4px; font-size: .78rem; }
.ticket-inline-summary { color: var(--green) !important; font-weight: 750; letter-spacing: .04em; }
.ticket-play-groups { display: grid; gap: 9px; margin-top: 14px; }
.ticket-play-group { padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); text-align: left; }
.ticket-play-group > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ticket-play-group small { color: var(--muted); font-size: .75rem; }
.ticket-number-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ticket-number-list span { min-width: 34px; min-height: 30px; display: inline-grid; place-items: center; padding: 4px 7px; border-radius: 9px; color: var(--yellow); background: rgba(226,59,50,.18); border: 1px solid rgba(226,59,50,.3); font-weight: 850; }
.ticket-delivery { margin-top: 12px; padding: 9px 12px; border-radius: 11px; font-size: .76rem; font-weight: 760; text-align: left; }
.ticket-delivery.sent { color: #aef4c7; background: rgba(34,201,109,.11); }
.ticket-delivery.pending { color: #ffe6a0; background: rgba(255,212,71,.1); }
.ticket-delivery.prominent { margin: 18px 0; padding: 13px 15px; text-align: center; }
.ticket-badge, .movement-icon, .prize-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 14px; background: #202521; color: var(--green); font-weight: 900; }
.ticket-card-gold { color: #302512; border: 1px solid #e2be69; background: linear-gradient(135deg, #fff3d2, #f1d99f); box-shadow: inset 0 1px 0 #fff9, 0 10px 28px rgba(0,0,0,.2); padding: 18px; }
.ticket-brand { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #c6a766; color: #68532c; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ticket-card-gold .ticket-card-title strong { color: #302512; font-size: 1rem; line-height: 1.4; }
.ticket-card-gold .ticket-serial { color: #68532c; font-variant-numeric: tabular-nums; }
.ticket-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 12px 0; color: #68532c; font-size: .74rem; }
.ticket-dates time { color: #302512; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticket-card-gold .ticket-stake-row { max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px dashed #a58a52; text-align: left; }
.ticket-card-gold .ticket-stake-row > strong { color: #302512; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.ticket-card-gold .ticket-stake-row .ticket-stake-label { display: block; color: #68532c; font-size: .7rem; margin-bottom: 3px; }
.ticket-card-gold .ticket-badge { color: #322307; background: linear-gradient(135deg, #f4d785, #d7ad45); box-shadow: 0 4px 14px rgba(215,173,69,.18); }
.ticket-card-gold small { color: #68532c; }
.ticket-card-gold .ticket-inline-summary { color: #ffe6a4 !important; line-height: 1.55; }
.ticket-card-gold .list-value > small { display: inline-block; margin: 0; padding: 6px 9px; border: 1px solid #b29458; border-radius: 8px; color: #493719; background: #fff6dc; line-height: 1.4; }
.ticket-card-gold .ticket-play-group { border-color: rgba(244,215,133,.35); background: rgba(255,222,145,.09); }
.ticket-card-gold .ticket-number-list span { border-color: #b49245; color: #fff0bb; background: #493416; }
.ticket-card-gold .ticket-delivery { padding: 10px 0 0; border-top: 1px dashed #a58a52; border-radius: 0; font-size: .7rem; font-weight: 600; }
.ticket-card-gold .ticket-delivery.sent, .ticket-card-gold .ticket-delivery.pending { color: #68532c; background: transparent; }
.ticket-card-gold.ticket-winner { border-color: #f6d877; box-shadow: inset 0 0 0 1px rgba(246,216,119,.3), 0 8px 28px rgba(215,173,69,.15); }
.ticket-stake-label { font-size: .72rem; font-weight: 600; color: #e4d3ac; }
.ticket-card-gold .list-value > .status-winner { color: #271b00; background: linear-gradient(120deg, #ffe7a0, #eac15b); border-color: #ffe7a0; font-weight: 900; letter-spacing: .02em; }
.ticket-prize { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid #bfa15b; border-radius: 14px; background: #302512; }
.ticket-prize small { color: #e4d3ac; }
.ticket-prize > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ticket-prize-amount > span { color: #f6dc92; font-size: .8rem; font-weight: 750; }
.ticket-prize-amount > strong { color: #ffe6a0; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 900; line-height: 1.2; margin-top: 5px; }
.ticket-winning-result .ticket-number-list { margin-top: 6px; }
.ticket-card-gold .ticket-number-list .ticket-number-winner { color: #2a200e; background: linear-gradient(135deg, #d8bd7a 0%, #f4e3b5 27%, #fffdf2 43%, #d1b577 49%, #fff6d8 73%, #e0c589 100%); border: 2px solid #fff5d5; font-weight: 950; text-shadow: 0 1px 0 rgba(255,255,255,.8); box-shadow: inset 0 1px 2px #fff, 0 0 0 2px rgba(246,216,119,.2), 0 3px 10px rgba(0,0,0,.25); }
.ticket-pagination { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 18px 0; }
.ticket-pagination p { margin: 0; color: #e4d3ac; font-size: .85rem; }
.ticket-page-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-page-links .button { min-height: 44px; padding: 10px 14px; font-size: .85rem; }
.ticket-page-links [aria-disabled="true"] { opacity: .4; cursor: default; }
.movement-icon.positive { color: var(--green); background: #0d2c1b; }
.prize-icon { color: #171000; background: linear-gradient(135deg, #f7d977, var(--gold)); box-shadow: 0 8px 20px rgba(215,173,69,.2); }
.movement-icon.negative { background: #2b1110; color: #ff7770; }
.amount-positive { color: var(--green); }
.prize-highlight { border-color: rgba(215,173,69,.32); background: linear-gradient(110deg, rgba(215,173,69,.1), var(--panel) 42%); }
.prize-highlight .amount-positive, .prize-page h1, .prize-page .eyebrow { color: #f2c95d; }
.prize-total { display: flex; gap: 18px; align-items: flex-start; padding: clamp(20px, 4vw, 32px); margin-bottom: 24px; border: 1px solid #9b7b38; border-radius: 24px; background: linear-gradient(125deg, #3b2e13, #19170f 80%); color: #fff1cb; }
.prize-total > div { min-width: 0; }
.prize-total-icon { color: #f2c95d; font-size: 1.75rem; }
.prize-total h2 { font-size: 1rem; margin: 0 0 8px; }
.prize-total-amount { display: block; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; color: #ffe5a0; overflow-wrap: anywhere; }
.prize-total p { margin: 12px 0 8px; }
.prize-total small { display: block; max-width: 68ch; line-height: 1.6; color: #d8c9a6; }
.prize-void { color: var(--muted); }
.prize-void .list-value > strong { text-decoration: line-through; }
.prize-level { display: inline-flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 8px; margin: 12px 0; padding: 9px 13px; border-radius: 12px; border: 1px solid currentColor; font-weight: 800; background: linear-gradient(120deg, #ffffff18, #ffffff05 50%, #ffffff20); box-shadow: inset 0 1px 0 #ffffff30; }
.prize-level small { color: inherit !important; font-size: .7rem; border-left: 1px solid currentColor; padding-left: 8px; }
.prize-level-neutral { color: #c9c2b5; }.prize-level-bronce { color: #efb77f; }.prize-level-plata { color: #e5e9ef; }.prize-level-oro { color: #ffdf85; }.prize-level-rubi { color: #ffadc2; }.prize-level-diamante { color: #cceaff; }
.draw-option.draw-option-pulso { border-color: #d7ad45; background: linear-gradient(115deg, #421a20, #302511); }.draw-option-pulso .draw-name { color: #ffe1a0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #f0aa22; box-shadow: 0 0 0 5px rgba(240,170,34,.13); }
.empty-state { text-align: center; padding: 55px 20px; color: var(--muted); }
.empty-state > span { font-size: 2.3rem; color: var(--green); }

.page-heading { margin: 28px 0 30px; }
.page-heading h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 10px 0 12px; }
.page-heading p { color: var(--muted); }
.play-layout { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.play-main { min-width: 0; display: grid; gap: 18px; }
.step-card { width: 100%; min-width: 0; padding: clamp(20px, 4vw, 32px); }
.step-title { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.step-title > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--red); color: var(--yellow); font-weight: 900; box-shadow: 0 7px 18px rgba(226,59,50,.24); }
.step-title h2, .step-title p { margin: 0; }
.step-title p { color: var(--muted); font-size: .82rem; margin-top: 3px; }
.step-title > div { flex: 1; }
.text-button { border: 0; background: transparent; color: var(--green); font-size: .78rem; font-weight: 800; cursor: pointer; }
.draw-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding: 2px; touch-action: pan-y pinch-zoom; }
.draw-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 78px; border: 1px solid var(--line); border-radius: 17px; padding: 14px; background: var(--panel-soft); }
.draw-option[hidden] { display: none; }
.draw-pulso-options { margin-bottom: 16px; }
.draw-family-help { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.draw-families { display: grid; gap: 10px; margin: 12px 0; }
.draw-family { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--panel-soft); overflow: hidden; }
.draw-family summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; min-height: 60px; cursor: pointer; list-style: none; touch-action: pan-y pinch-zoom; }
.draw-family summary::-webkit-details-marker { display: none; }
.draw-family summary:focus-visible { outline: 3px solid #f5d987; outline-offset: -4px; border-radius: 17px; }
.draw-family-name { font-size: 1.05rem; font-weight: 800; color: #ffe1a0; }
.draw-family-count { color: var(--muted); font-size: .8rem; }
.draw-family-selected { padding: 4px 9px; border: 1px solid #d7ad45; border-radius: 30px; font-size: .8rem; color: #ffe1a0; }
.draw-family-arrow { margin-left: auto; font-size: 1.5rem; color: #f5d987; }
.draw-family[open] { border-color: #bd944d; }
.draw-family[open] .draw-family-arrow { transform: rotate(180deg); }
.draw-family > .draw-grid { padding: 0 10px 10px; }
.draw-detail { min-width: 0; flex: 1; }
.draw-option .country-flag { position: relative; top: auto; right: auto; flex: 0 0 31px; }
.draw-toggle { flex: 0 0 auto; min-width: 70px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 12px; color: var(--yellow); background: #221d10; cursor: pointer; font-weight: 800; }
.draw-toggle[aria-pressed="true"] { color: #231503; background: #f5d987; border-color: #ffeab9; }
.chosen-draws { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chosen-draw { min-height: 44px; max-width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid #ab8948; color: #ffe4a5; background: #2b2112; cursor: pointer; text-align: left; }
.draw-option input, .number-cell input, .payment-options input { position: absolute; opacity: 0; pointer-events: none; }
.draw-check { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #606761; border-radius: 7px; color: transparent; font-size: .7rem; }
.draw-name, .draw-option small { display: block; }
.draw-name { font-weight: 780; font-size: .88rem; line-height: 1.3; }
.draw-option small { color: #f5d987; margin-top: 5px; font-weight: 750; }
.draw-option:has(input:checked) { border-color: #f5d987; background: linear-gradient(135deg,#392919,#211810); box-shadow: inset 0 0 0 1px #d7ad45; }
.draw-option input:checked + .draw-check { color: #231503; background: #f5d987; border-color: #ffeab9; }
.country-flag { position: absolute; top: 13px; right: 13px; width: 31px; height: 21px; overflow: hidden; border: 1px solid rgba(0,0,0,.13); border-radius: 5px; background: #e8ece8; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.country-flag:after { content: attr(data-code); position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .46rem; font-weight: 950; letter-spacing: .04em; text-shadow: 0 1px 3px #000; }
.flag-ap { background: linear-gradient(135deg, var(--forest-deep), var(--green)); }
.flag-cr { background: linear-gradient(to bottom, #002b7f 0 17%, #fff 17% 33%, #ce1126 33% 67%, #fff 67% 83%, #002b7f 83%); }
.flag-ni, .flag-hn, .flag-sv { background: linear-gradient(to bottom, #1672c4 0 34%, #fff 34% 66%, #1672c4 66%); }
.flag-gt { background: linear-gradient(to right, #4997d0 0 34%, #fff 34% 66%, #4997d0 66%); }
.flag-do { background: conic-gradient(#002d62 0 25%, #ce1126 0 50%, #002d62 0 75%, #ce1126 0); box-shadow: inset 0 0 0 5px #fff, 0 2px 6px rgba(0,0,0,.1); }
.flag-us, .flag-pr { background: repeating-linear-gradient(to bottom, #b22234 0 3px, #fff 3px 6px); }
.flag-pa { background: conic-gradient(#d21034 0 25%, #fff 0 50%, #005293 0 75%, #fff 0); }
.flag-co { background: linear-gradient(to bottom, #fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }
.flag-sx { background: linear-gradient(to right, #002395 0 33%, #fff 33% 66%, #ed2939 66%); }
.group-amount-panel { scroll-margin-top: 90px; padding: 18px; border: 1px solid rgba(34,201,109,.2); border-radius: 18px; background: #0c130e; }
.group-amount-heading, .number-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.group-amount-heading { margin-bottom: 13px; }
.group-amount-heading small, .number-picker-heading small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.group-amount-heading strong { display: block; margin-top: 2px; color: var(--yellow); font-size: 1.45rem; }
.group-amount-heading > span { padding: 6px 9px; border-radius: 9px; color: var(--green); background: rgba(34,201,109,.1); font-size: .7rem; font-weight: 850; }
.amount-pills { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; }
.amount-pills button { width: 100%; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; padding: 11px 8px; background: var(--panel-soft); font-weight: 800; cursor: pointer; }
.amount-pills button.active { color: #171000; border-color: var(--yellow); background: var(--yellow); }
.field-label { display: block; margin: 14px 0 7px; }
.custom-amount-row { display: grid; grid-template-columns: minmax(110px,.4fr) minmax(0,1fr); align-items: center; gap: 12px; margin-top: 12px; }
.custom-amount-row .field-label { margin: 0; }
.reventado-field { margin-top: 12px; }
.group-feedback { min-height: 20px; margin: 11px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.group-feedback.success { color: #aef4c7; }
.group-feedback.error { color: #ffaaa5; }
.number-picker-heading { margin: 24px 0 13px; }
.number-picker-heading > div { min-width: 0; }
.number-picker-heading > div > strong { display: block; margin-bottom: 4px; }
.number-blocks { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin-bottom: 12px; }
.number-blocks button { min-height: 44px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); color: var(--muted); font-weight: 800; cursor: pointer; font-size: .78rem; }
.number-blocks button[aria-pressed="true"] { color: var(--yellow); border-color: var(--gold); background: #29200d; }
.number-grid { width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 8px; touch-action: pan-y pinch-zoom; }
.number-cell { position: relative; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; touch-action: pan-y pinch-zoom; }
.number-cell[hidden] { display: none; }
.number-cell span { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-soft); font-weight: 850; transition: .12s ease; }
.number-cell span b { font-size: .92rem; }
.number-cell span small { min-height: 11px; margin-top: 1px; color: rgba(255,255,255,.7); font-size: .5rem; font-weight: 800; line-height: 1; }
.number-cell.assigned span { border-color: var(--gold); }
.number-cell.assigned span small { color: var(--gold); font-size: .62rem; line-height: 1.05; white-space: pre-line; }
.brush-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.brush-controls small { flex-basis: 100%; color: var(--muted); line-height: 1.5; }
.play-budget { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 14px 0; padding: 12px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(255,204,51,.06); }
.play-budget > div { flex: 1 1 120px; min-width: 0; }
.play-budget small, .play-budget strong { display: block; }
.play-budget small { color: var(--muted); font-size: .8rem; }
.play-budget strong { color: var(--gold); font-size: 1.25rem; }
.play-budget p { flex-basis: 100%; margin: 0; font-size: .85rem; }
.play-budget.at-limit { border-color: #ffad99; }
.play-budget.at-limit p { color: #ffad99; }
.ticket-result-notice { display: grid; gap: 12px; width: 100%; max-width: 30rem; min-width: 0; margin-top: 14px; padding: 14px; color: #fff5da; border: 1px solid #8e743d; background: #191710; border-radius: 14px; overflow-wrap: anywhere; text-align: left; }
.ticket-result-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ticket-result-heading h3 { margin: 0; color: #ffe6a0; font-size: 1rem; line-height: 1.35; letter-spacing: 0; }
.ticket-result-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: #efce7c; background: #332b18; }
.ticket-result-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticket-result-draw { margin: 0; color: #e8d9b8; font-size: .82rem; line-height: 1.5; }
.ticket-result-numbers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.ticket-result-numbers.has-played-number { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticket-result-numbers > div { min-width: 0; padding: 10px; border: 1px solid #557bb4; border-radius: 11px; text-align: center; background: #122039; }
.ticket-result-numbers dt { margin: 0; color: #c5d7f1; font-size: .8rem; line-height: 1.4; }
.ticket-result-numbers dd { margin: 4px 0 0; color: #bed7ff; font-size: 1.9rem; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: .04em; }
.ticket-result-numbers .ticket-result-drawn { background: #c3d9ff; border-color: #8ebaff; }
.ticket-result-drawn dt, .ticket-result-drawn dd { color: #152e56; }
.ticket-result-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: #e8d9b8; font-size: .78rem; line-height: 1.4; }
.ticket-result-ball { display: inline-flex; align-items: center; gap: 6px; }
.ticket-result-ball i { display: inline-block; width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.ticket-result-ball .is-red { background: #ef6862; }
.ticket-result-ball .is-white { background: #fff5e5; }
.ticket-result-note { margin: 0; padding-top: 10px; border-top: 1px solid #51452c; color: #d8c6a3; font-size: .8rem; line-height: 1.5; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ticket-actions .button { min-height: 44px; max-width: 100%; font-size: .85rem; text-align: center; white-space: normal; color: #fff7ed; background-color: #8f1826; background-image: linear-gradient(180deg, #ffffff14 0%, #ffffff05 44%, #ffffff14 48%, #0000002e 51%, #0000000d 100%), linear-gradient(115deg, #7d1221, #9f1b2d 58%, #871020); border: 1px solid #e78883; box-shadow: inset 0 1px 0 #ffd8cb66, inset 0 -2px 0 #500a1b88, 0 6px 18px #be243538; animation: none; }
.ticket-actions .button.action-create:after { background: linear-gradient(105deg, transparent 20%, rgba(255,230,207,.15) 48%, transparent 76%); animation-duration: 4.6s; pointer-events: none; }
.ticket-actions .button:hover { border-color: #ffbcaa; box-shadow: inset 0 1px 0 #ffe2cf88, inset 0 -2px 0 #500a1b88, 0 8px 22px #be243555; }
.ticket-actions .button:active { transform: none; box-shadow: inset 0 2px 6px #42081666; }
.ticket-actions .button:focus-visible { outline: 3px solid #ffe5b8; outline-offset: 3px; }
.ticket-card-gold .ticket-actions .button:focus-visible { outline-color: #285494; }
.ticket-details { margin-top: 12px; border: 1px solid #bba06a; border-radius: 12px; background: #fff6dc; }
.ticket-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 12px; color: #302512; font-size: .88rem; font-weight: 750; cursor: pointer; list-style: none; }
.ticket-details > summary::-webkit-details-marker { display: none; }
.ticket-details > summary small { margin-top: 3px; font-size: .74rem; font-weight: 500; }
.ticket-details > summary svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: #493719; stroke-width: 2; transition: transform .15s; }
.ticket-details[open] > summary svg { transform: rotate(180deg); }
.ticket-details > summary:focus-visible { outline: 3px solid #285494; outline-offset: 3px; border-radius: 12px; }
.ticket-details .ticket-play-groups { margin: 0; padding: 0 10px 10px; }
.ticket-details .ticket-play-group { padding: 10px; background: #f1e4c4; border-color: #c6ae7a; }
.ticket-details .ticket-play-group small { margin: 0; font-size: .82rem; }
.ticket-details .ticket-number-list { gap: 5px; margin-top: 8px; }
.ticket-card-gold .ticket-details .ticket-number-list span:not(.ticket-number-winner) { background: #122039; border-color: #557bb4; color: #bed7ff; }
.ticket-result-notice { gap: 8px; padding: 12px; }
.ticket-result-heading { gap: 8px; }
.ticket-result-heading h3 { font-size: .9rem; }
.ticket-result-icon { flex-basis: 24px; width: 24px; height: 24px; border-radius: 7px; }
.ticket-result-icon svg { width: 18px; height: 18px; }
.ticket-result-numbers > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; }
.ticket-result-numbers dt { font-size: .72rem; }
.ticket-result-numbers dd { margin: 0; font-size: 1.75rem; letter-spacing: 0; }
.ticket-result-meta { font-size: .73rem; }
.ticket-result-note { padding-top: 6px; font-size: .75rem; border-top: 0; }
.ticket-actions .button { width: 100%; max-width: 30rem; padding: 10px 14px; }
.number-grid.brush-active, .number-grid.brush-active .number-cell { touch-action: none; user-select: none; }
.number-grid.brush-active .number-cell { cursor: crosshair; }
.number-cell[aria-pressed="true"] span { color: var(--yellow); background: var(--red); border-color: #ff635b; box-shadow: 0 4px 12px rgba(226,59,50,.2); }
.number-cell:focus-visible, .number-blocks button:focus-visible, .draw-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 12px; }
[data-undo-group] { min-height: 44px; margin-top: 10px; }
.play-group-actions .text-button { min-height: 44px; padding: 8px 12px; }
.play-groups-heading small, .play-group small { color: var(--muted); }
.play-groups { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.play-groups-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.play-groups-heading strong, .play-groups-heading small, .play-group strong, .play-group small { display: block; }
.play-groups-heading small strong { display: inline; }
.play-group { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; padding: 14px 16px; border: 1px solid rgba(255,212,71,.2); border-radius: 15px; background: rgba(255,212,71,.05); }
.play-group small { max-width: 520px; margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
.play-group-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.text-button.danger { color: #ff8c85; }
.toggle-row { display: flex; align-items: center; gap: 13px; padding: 15px; border-radius: 16px; background: var(--panel-soft); cursor: pointer; }
.toggle-row { position: relative; }
.toggle-row > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-row > span { width: 46px; height: 27px; flex: 0 0 46px; border-radius: 30px; background: #626d65; padding: 3px; transition: .15s; }
.toggle-row > span:after { content: ""; display: block; width: 21px; height: 21px; background: #fff; border-radius: 50%; transition: .15s; }
.toggle-row input:checked + span { background: var(--green); }
.toggle-row input:checked + span:after { transform: translateX(19px); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row small { color: var(--muted); margin-top: 3px; }
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.payment-options label { position: relative; cursor: pointer; }
.payment-options span { min-height: 70px; height: 100%; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; }
.payment-options small { color: var(--muted); margin-top: 3px; }
.payment-options label:has(input:checked) span { border-color: var(--green); background: #0c2a19; box-shadow: inset 0 0 0 1px var(--green); }
.play-summary { padding: clamp(18px, 3vw, 28px); margin-top: 18px; }

.purchase-status { padding: clamp(26px, 6vw, 52px); text-align: center; }
.purchase-status h1 { font-size: clamp(2.1rem, 7vw, 3.5rem); margin: 12px 0; }
.purchase-status > p { color: var(--muted); line-height: 1.6; }
.loader-ring { width: 54px; height: 54px; margin: 0 auto 24px; border: 5px solid #262b27; border-top-color: var(--yellow); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.success-mark, .pending-mark { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 20px; margin: 0 auto 22px; font-size: 1.8rem; font-weight: 900; background: var(--green); color: #031008; }
.pending-mark { color: #171000; background: var(--yellow); }
.receipt-summary { margin: 28px 0; padding: 8px 20px; border-radius: 20px; background: var(--panel-soft); text-align: left; }
.receipt-summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.receipt-summary div:last-child { border: 0; }
.receipt-summary span { color: var(--muted); }
.receipt-summary strong { min-width: 0; max-width: 65%; text-align: right; overflow-wrap: anywhere; }
.receipt-summary .due strong { color: var(--green); font-size: 1.25rem; }
.purchase-play-summary { margin: 24px 0 18px; }
.purchase-play-summary .section-title { margin-bottom: 8px; text-align: left; }
.section-title.compact h2 { font-size: 1.15rem; }
.payment-instructions { margin: 18px 0; border-radius: 20px; padding: 20px; background: var(--forest-deep); color: #fff; text-align: left; }
.payment-instructions > span { display: block; color: var(--lime); font-weight: 850; margin-bottom: 10px; }
.payment-instructions div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.payment-instructions small, .payment-instructions strong { display: block; }
.payment-instructions small { color: rgba(255,255,255,.62); }
.payment-instructions.compact { max-width: 620px; }
.payment-card { margin: 20px 0; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; color: #fff; text-align: left; background: linear-gradient(145deg, #0e1711, #080b09); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.payment-card.compact { max-width: 680px; }
.payment-card.sinpe-payment { border-color: rgba(34,201,109,.28); background: radial-gradient(circle at 100% 0, rgba(34,201,109,.12), transparent 40%), linear-gradient(145deg, #0d1b12, #080b09); }
.payment-card.card-payment { border-color: rgba(215,173,69,.28); background: radial-gradient(circle at 100% 0, rgba(215,173,69,.12), transparent 42%), linear-gradient(145deg, #1a160c, #090a08); }
.payment-card-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.payment-card-heading > div { min-width: 0; }
.payment-card-heading small { display: block; margin-bottom: 3px; color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.payment-card-heading h2 { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); }
.payment-method-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 14px; color: #061008; background: var(--green); font-size: 1.25rem; font-weight: 900; }
.card-payment .payment-method-icon { background: var(--gold); }
.payment-total { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 15px 17px; border-radius: 16px; background: rgba(255,255,255,.055); }
.payment-total span { color: var(--muted); }
.payment-total strong { color: var(--green); font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1; }
.card-payment .payment-total strong { color: var(--gold); }
.payment-details { margin: 5px 0 14px; }
.payment-details > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.1); }
.payment-details small { color: var(--muted); }
.payment-details strong { max-width: 68%; text-align: right; overflow-wrap: anywhere; }
.payment-reference { color: var(--yellow); font-size: 1.08rem; letter-spacing: .02em; }
.payment-method-note, .payment-next-step { margin: 12px 0 17px; color: #c4cbc6; font-size: .86rem; line-height: 1.55; }
.payment-next-step { padding-left: 13px; border-left: 3px solid var(--green); }
.payment-card .button { margin-top: 6px; }

.wallet-hero { min-height: 210px; border: 1px solid rgba(76,255,148,.28); border-radius: 30px; padding: 34px; display: flex; flex-direction: column; color: #031008; background: radial-gradient(circle at 82% 0, rgba(255,255,255,.25), transparent 34%), linear-gradient(135deg, #11984e, var(--green)); box-shadow: 0 22px 55px rgba(34,201,109,.18); }
.wallet-hero span, .wallet-hero small { color: rgba(3,16,8,.68); }
.wallet-hero strong { max-width: 100%; font-size: clamp(2.35rem, 10vw, 5rem); letter-spacing: -.07em; margin: auto 0; overflow-wrap: anywhere; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; margin-top: 18px; }
.compact-options span { min-height: 50px; }
.locked-bank { display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel-soft); }
.locked-bank span { color: var(--muted); }
.field-help { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.withdrawal-methods { margin-top: 0; }
.withdrawal-destination { display: grid; gap: 10px; margin-top: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.withdrawal-destination[hidden] { display: none; }
.withdrawal-status { display: flex; align-items: center; gap: 11px; margin: 14px 0 18px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; }
.withdrawal-status.open { color: #bdf7d2; background: #0d2819; border-color: rgba(34,201,109,.3); }
.withdrawal-status.closed { color: #ffd0cd; background: #2a1211; border-color: rgba(226,59,50,.32); }
.withdrawal-status-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: currentColor; }
.withdrawal-status.open .withdrawal-status-dot { box-shadow: 0 0 0 5px rgba(34,201,109,.14); }
.withdrawal-status.closed .withdrawal-status-dot { box-shadow: 0 0 0 5px rgba(226,59,50,.14); }
.withdrawal-status strong, .withdrawal-status small { display: block; }
.withdrawal-status small { margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.35; }


.bottom-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); margin-inline: auto; width: min(calc(100% - 28px), 590px); min-height: 70px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; padding: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 23px; background: rgba(5,7,5,.95); backdrop-filter: blur(18px); box-shadow: 0 22px 50px rgba(0,0,0,.5); }
.bottom-nav[hidden] { display: none; }
.bottom-nav a { color: rgba(255,255,255,.68); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .62rem; font-weight: 750; }
.bottom-nav .nav-icon { width: 24px; height: 24px; display: grid; place-items: center; }
.bottom-nav .nav-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .nav-play .nav-icon { width: 42px; height: 42px; margin-top: -25px; border-radius: 15px; color: var(--yellow); background: var(--red); box-shadow: 0 9px 24px rgba(226,59,50,.35); }
.bottom-nav .nav-play .nav-icon svg { width: 25px; height: 25px; stroke-width: 2.3; }
.bottom-nav a { min-height: 48px; justify-content: center; border-radius: 12px; }
.bottom-nav a[aria-current="page"] { color: var(--yellow); background: rgba(255,212,71,.07); }
:is(a, button):focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.payment-options input:focus-visible + span, .toggle-row input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 4px; }
.notice { color: #d6dfd8; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; line-height: 1.5; margin: 16px 0; }
.portal-results { padding: clamp(14px, 3vw, 28px); }
.result-card .country-flag { position: relative; top: auto; right: auto; }
.result-card > div { min-width: 0; overflow-wrap: anywhere; }
.result-card .status.pending { color: #efd293; padding: 6px 9px; border-radius: 9px; background: rgba(215,173,69,.1); font-size: .75rem; font-weight: 750; }
.result-card strong { line-height: 1.4; }
.date-switcher > span { opacity: .3; }

@media (max-width: 920px) {
    .auth-wrap, .play-layout { grid-template-columns: 1fr; }
    .auth-copy { padding: 5vh 0 0; }
    .auth-copy .feature-row { display: none; }
    .auth-copy h1 { font-size: 2.6rem; }
    .play-summary { position: static; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .metric-card.balance { grid-column: span 2; }
    .number-grid { grid-template-columns: repeat(10, minmax(0,1fr)); }
}

@media (max-width: 640px) {
    .topbar { height: 68px; padding: 10px 16px; }
    .page-shell { width: 100%; max-width: 100%; padding: 16px 12px 118px; }
    .brand small { display: none; }
    .share-whatsapp { width: 44px; padding: 8px; }
    .share-whatsapp > span { display: none; }
    .hero-dashboard { min-height: 280px; padding: 28px 23px; align-items: flex-start; flex-direction: column; justify-content: center; }
    .hero-dashboard h1 { font-size: 2.8rem; }
    .metric-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .metric-grid.home-shortcuts { grid-template-columns: minmax(0, 1fr); }
    .metric-card.balance { grid-column: auto; }
    .metric-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; min-height: 82px; padding: 14px 16px; border-radius: 18px; }
    .metric-label { grid-column: 1; font-size: .7rem; }
    .metric-card > strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: clamp(1.4rem, 5vw, 1.9rem); }
    .metric-card > small { grid-column: 1; grid-row: 2; font-size: .75rem; }
    .metric-card .prize-level { grid-column: 1 / -1; justify-self: start; margin: 5px 0 0; }
    .metric-card .metric-note { grid-column: 1 / -1; margin-top: 2px; font-size: .7rem; }
    .draw-grid, .two-column { grid-template-columns: 1fr; }
    .account-actions { grid-template-columns: 1fr; }
    .quick-actions a { padding: 16px 14px; gap: 11px; }
    .quick-actions small { font-size: .78rem; line-height: 1.45; }
    .auth-wrap { gap: 24px; }
    .date-switcher { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
    .date-switcher .inline-fields { flex-direction: column; }
    .date-switcher .button { min-height: 40px; padding: 8px 12px; }
    .date-switcher label { font-size: .8rem; }
    input, select, textarea { font-size: 16px; }
    .page-heading { margin: 14px 0 20px; }
    .page-heading h1 { font-size: 2.15rem; }
    .play-main { gap: 12px; }
    .step-card { padding: 17px 12px; overflow: clip; }
    .step-title { align-items: flex-start; margin-bottom: 17px; }
    .step-title > div { min-width: 0; }
    .group-amount-panel { padding: 13px 10px; }
    .amount-pills { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .amount-pills button { min-height: 44px; padding: 8px 5px; }
    .custom-amount-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
    .number-picker-heading { align-items: flex-start; }
    .number-picker-heading .text-button { flex: 0 0 auto; max-width: 95px; }
    .number-grid { grid-template-columns: repeat(5, minmax(0,1fr)); overflow: visible; }
    .number-cell span { aspect-ratio: auto; height: 49px; }
    .play-groups-heading, .play-group { align-items: stretch; flex-direction: column; }
    .play-group { gap: 6px; padding: 12px; }
    .play-group-actions { justify-content: flex-end; }
    .payment-options { grid-template-columns: 1fr; }
    .payment-card { padding: 18px 15px; border-radius: 19px; }
    .payment-details > div { align-items: flex-start; flex-direction: column; gap: 5px; }
    .payment-details strong { max-width: 100%; text-align: left; }
    .payment-total { align-items: flex-start; flex-direction: column; gap: 8px; }
    .step-card { border-radius: 21px; }
    .list-card { padding: 12px; }
    .list-card > div:nth-child(2) strong { white-space: normal; overflow-wrap: anywhere; }
    .list-card:has(> .ticket-badge), .list-card:has(> .movement-icon) { display: grid; grid-template-columns: 43px minmax(0, 1fr); }
    .list-card:has(> .ticket-badge) > .ticket-badge, .list-card:has(> .movement-icon) > .movement-icon { grid-row: 1 / span 2; }
    .list-card:has(> .ticket-badge) > .list-value, .list-card:has(> .movement-icon) > .list-value { grid-column: 2; max-width: 100%; text-align: left; }
    .ticket-row { align-items: flex-start; }
    .prize-row { display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: start; }
    .prize-row .prize-icon { grid-column: 1; grid-row: 1 / span 2; }
    .prize-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
    .prize-row > div:nth-child(2) strong { white-space: normal; overflow: visible; text-overflow: clip; }
    .prize-row .list-value { grid-column: 2; grid-row: 2; max-width: 100%; margin-top: 8px; text-align: left; }
    .ticket-card-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; }
    .ticket-card-head .ticket-badge { width: 36px; height: 36px; font-size: .9rem; border-radius: 11px; }
    .ticket-card-head .list-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; grid-column: 1 / -1; max-width: 100%; text-align: left; }
    .ticket-card-head .list-value > small { margin: 0; font-size: .7rem; }
    .ticket-card-gold .ticket-brand { margin-bottom: 10px; padding-bottom: 8px; }
    .ticket-card-gold .ticket-dates { margin: 8px 0; line-height: 1.4; }
    .ticket-card-gold .ticket-stake-row { padding-top: 8px; }
    .ticket-card-gold .ticket-details { margin-top: 10px; }
    .ticket-card-gold .ticket-result-notice { margin-top: 10px; }
    .ticket-play-group > div:first-child { display: block; }
    .ticket-play-group small { display: block; margin-top: 4px; }
    .bottom-nav { bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
    .ticket-actions .button.action-create:after { animation: none !important; transform: none; }
}

[hidden] { display: none !important; }
.play-wizard { display: block; max-width: 820px; margin: auto; scroll-margin-top: 16px; }
.play-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; }
.play-progress span { padding: 12px 4px; font-size: .8rem; text-align: center; border-bottom: 3px solid var(--line); color: var(--muted); }
.play-progress span.active { color: var(--yellow); border-color: var(--red); font-weight: 800; }
.play-wizard .play-summary { position: static; }
.step-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.step-actions .button { flex: 1; padding: 12px; }
.play-progress span.complete { color: #b1d9c0; border-color: var(--forest); }
.review-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
.review-stats > div { display: flex; flex-direction: column-reverse; gap: 5px; padding: 14px 10px; background: var(--panel-soft); border-radius: 13px; text-align: center; }
.review-stats dt { color: var(--muted); font-size: .73rem; }
.review-stats dd { margin: 0; font-size: 1.45rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .85fr); gap: 20px; align-items: start; }
.review-details { min-width: 0; display: grid; gap: 24px; }
.review-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.review-heading h3 { font-size: 1rem; margin: 0; }
.review-heading .text-button { min-height: 44px; padding: 8px 0; }
.review-caption { color: var(--muted); line-height: 1.5; font-size: .78rem; margin-bottom: 14px; }
.review-jugadas, .review-draws { display: grid; gap: 10px; }
.review-group { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.025); }
.review-group-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.review-group-heading strong { font-size: .88rem; color: #f5d987; }
.review-group-heading > span, .review-red-amount { font-size: .75rem; color: var(--muted); }
.review-red-amount { display: block; color: #ffaaa5; margin-top: 6px; }
.review-group-subtotal { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .75rem; line-height: 1.5; }
.review-draw { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.review-draw .country-flag { position: relative; top: 2px; right: auto; }
.review-draw-detail { min-width: 0; overflow-wrap: anywhere; }
.review-draw-detail strong { font-size: .83rem; }
.review-draw-detail small { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; }
.review-draw-detail .review-payout { color: #f5d987; }
.review-draw-subtotal { grid-column: 2; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.review-draw-subtotal small { color: var(--muted); }
.review-draw-subtotal strong { font-size: .9rem; }
.review-checkout { min-width: 0; padding: 18px; border: 1px solid rgba(215,173,69,.35); border-radius: 18px; background: linear-gradient(145deg, #1c190e, #111512 65%); }
.review-checkout .summary-total { display: grid; gap: 6px; padding: 12px 0 18px; }
.review-checkout .summary-total > span { color: var(--muted); font-size: .8rem; }
.review-checkout .summary-total strong { color: #f5d987; font-size: clamp(1.9rem, 4vw, 2.35rem); line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; }
.review-payment-breakdown { margin: 0; border-top: 1px solid var(--line); }
.review-payment-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .83rem; }
.review-payment-breakdown dt { color: var(--muted); }
.review-payment-breakdown dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.review-payment-note { font-size: .8rem; color: #c7d0c8; line-height: 1.55; margin: 16px 0 20px; }
.review-checkout .microcopy { margin: 14px 0; }
@media (max-width: 700px) {
    .review-layout { grid-template-columns: 1fr; }
    .review-stats { gap: 6px; }
    .review-stats dt { font-size: .68rem; }
    .review-checkout { padding: 16px; }
}
.button.action-money, .button.action-deposit { color: #fff1d4; background: linear-gradient(175deg,#df4853 0%,#ab2037 47%,#73172c 51%,#a32037); border: 1px solid #efc475; box-shadow: inset 0 2px 0 #fff3, 0 6px 20px #b624303d; }
.button.action-whatsapp { color: #effff6; background: #125c3d; border: 1px solid #70d5a0; }
.delivery-choice { margin: 18px 0; padding: 16px; border: 1px solid #a9905b; border-radius: 16px; background: #211b1280; text-align: left; }
.delivery-choice h3, .delivery-choice h2 { font-size: 1.05rem; color: #ffe4a5; }
.delivery-choice p, .review-delivery-note { color: #d9c9b3; font-size: .8rem; line-height: 1.5; }
.delivery-choice .toggle-row { margin: 12px 0; }
.prize-live-alert { margin: 12px 0; padding: 18px; border: 1px solid #ffe3a1; border-radius: 18px; color: #fff2d5; background: linear-gradient(135deg,#65222b,#2b1f16); box-shadow: inset 0 1px 0 #fff5,0 8px 25px #0005; }
.prize-live-alert[hidden] { display: none; }
.prize-live-alert strong { color: #ffe1a0; font-size: 1.1rem; }
.prize-live-alert p { margin: 8px 0; }
.prize-live-alert a { color: #ffe1a0; font-weight: 800; }
.prize-live-alert button { float: right; min-width: 44px; min-height: 44px; background: #0004; color: #fff; border: 1px solid #ffe3a1; border-radius: 12px; }
.ticket-delivery.portal-only { border-color: #a9905b; color: #ffe4a5; background: #211b12; }
.pulso-home-banner { margin: 18px 0; padding: clamp(16px,3vw,24px); border: 1px solid #b8954d; background: radial-gradient(at top right,#63302188,transparent 70%),#19160f; }
.pulso-home-banner .section-title { margin-bottom: 12px; }
.pulso-home-banner h2 { font-size: clamp(1.25rem,5vw,1.9rem); letter-spacing: .03em; color: #ffe1a0; }
.pulso-home-banner h2 span { display: inline-block; padding: 5px 12px; border: 1px solid #efc96c; border-radius: 12px; background: #4c261b; color: #fff1cf; }
.pulso-home-banner p { margin: 8px 0; }
.pulso-home-banner .button { width: 100%; }
.ticket-notices { margin: 18px 0; padding: clamp(16px,3vw,24px); }
.ticket-notices .section-title { margin-bottom: 16px; }
.ticket-notices h2 { margin: 0; font-size: clamp(1.1rem,4.5vw,1.45rem); }
.ticket-notices-list { display: grid; gap: 10px; }
.ticket-notice { display: grid; grid-template-columns: minmax(0,1fr) 64px; align-items: center; gap: 12px; padding: 14px; border: 1px solid #ffffff1c; border-radius: 16px; background: #ffffff05; }
.ticket-notice-info { min-width: 0; }
.ticket-notice-draw { display: block; font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.ticket-notice-meta { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 6px 0 9px; color: #c5c0b5; font-size: .72rem; line-height: 1.5; }
.ticket-notice-meta > * { white-space: nowrap; }
.ticket-notice-status { display: inline-block; padding: 4px 8px; border-radius: 8px; background: #adcaff16; color: #c9ddff; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.ticket-notice-result { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border-radius: 13px; background: #adcaff12; color: #d4e4ff; }
.ticket-notice-result > span { font-size: .62rem; }
.ticket-notice-result > strong { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ticket-notice-winner { border-color: #d7ad4570; background: linear-gradient(115deg,#3b2b174d,#171815); }
.ticket-notice-winner .ticket-notice-status, .ticket-notice-winner .ticket-notice-result { color: #ffe1a0; background: #d7ad451c; }
.ticket-notice:hover { border-color: #d7ad45; }
.ticket-notice:focus-visible { outline: 3px solid #ffe4a5; outline-offset: 3px; }
.home-account-link { margin-top: 16px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.home-account-link > div { flex: 1; }
.home-account-link strong, .home-account-link small { display: block; }
.home-account-link small { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.account-monogram { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; background: linear-gradient(135deg,#f8df95,#b18c37); color: #21190e; font-weight: 900; }
.account-profile, .referral-card { padding: clamp(18px,4vw,30px); margin-bottom: 18px; }
.account-profile-heading { display: flex; align-items: center; gap: 16px; }
.account-profile-heading h2 { font-size: clamp(1rem,4vw,1.5rem); margin: 0; }
.account-profile-heading .eyebrow { font-size: .65rem; }
.account-level { display: grid; gap: 8px; margin: 24px 0; padding: 18px; border: 1px solid #d7ad4550; border-radius: 16px; background: linear-gradient(115deg,#4e361933,#171815); }
.account-level small, .referral-card small { color: #c5c0b5; line-height: 1.6; }
.account-level .prize-level { justify-self: start; }
.account-balance { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 20px; color: #c5c0b5; font-size: .85rem; }
.account-balance strong { color: #bcf2cf; font-size: 1.3rem; }
.account-balance a { color: #ffe1a0; }
.account-actions-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 10px; }
.account-data-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 18px; }
.account-data-grid > div { min-width: 0; display: grid; gap: 7px; align-content: start; }
.account-data-grid input { width: 100%; min-width: 0; }
.account-optional-data h2 { margin: 8px 0 12px; }
.referral-card p { color: #ded2bc; line-height: 1.6; }
.referral-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0; padding: 16px; border: 1px dashed #d7ad45; border-radius: 14px; color: #ffe1a0; font-variant-numeric: tabular-nums; }
.referral-card > small { display: block; margin-top: 14px; }
.ticket-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 2px 12px; }
.ticket-filter-tabs a { flex: 1 0 auto; text-align: center; padding: 12px 14px; border: 1px solid #ffffff20; border-radius: 14px; background: #171c19; font-size: .85rem; }
.ticket-filter-tabs a.selected { background: #4a341d; color: #ffe1a0; border-color: #d7ad45; }
.ticket-draw-filter { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-bottom: 20px; }
.ticket-draw-filter select { width: 100%; }
.number-blocks button { min-height: 44px; border: 1px solid #c49b48; background: #3c2b19; color: #ffe6af; font-weight: 800; }
.number-blocks button[aria-pressed="true"] { color: #241609; background: linear-gradient(135deg,#ffe9a7,#cca247); border-color: #ffe9a7; box-shadow: 0 3px 14px #c49b4825; }
.payment-instruction { text-align: left; line-height: 1.6; font-size: .85rem; margin: 16px 0; }
.payment-verifying { padding: 12px 14px; border: 1px solid #c8a45b44; border-radius: 12px; background: #baa1660d; color: #decda9; text-align: left; font-size: .8rem; line-height: 1.6; }
.prize-total { background: radial-gradient(at top right,#70552c45,transparent 75%),#19170f; }
.prize-highlight .list-value strong { color: #ffe6ac; font-variant-numeric: tabular-nums; }
.prize-highlight .prize-state { display: inline-block; padding: 5px 8px; border: 1px solid #d7ad4550; border-radius: 8px; color: #fff1ce; background: #d7ad4512; line-height: 1.4; }
@media (max-width: 420px) {
    .ticket-draw-filter { grid-template-columns: minmax(0,1fr) auto; }
    .ticket-draw-filter label { grid-column: 1 / -1; font-size: .8rem; }
    .ticket-result-numbers > div { flex-direction: column; gap: 2px; }
    .ticket-result-numbers dd { flex: 0 0 auto; white-space: nowrap; }
}
.delivery-choice form { margin: 12px 0; }
.button:focus-visible, .draw-toggle:focus-visible { outline: 3px solid #ffe4a5; outline-offset: 3px; }
.clipboard-fallback { position: fixed; top: 0; left: -10000px; font-size: 16px; }
.button.action-money:hover, .button.action-deposit:hover { box-shadow: 0 6px 24px #caa15744; border-color: #ffe5a1; }
.copy-payment { flex-shrink: 0; min-height: 38px; padding: 6px 12px; border-radius: 10px; border: 1px solid #bd944d; color: #ffe5a1; background: #452029; cursor: pointer; }
.payment-next-step { text-align: left; line-height: 1.7; padding-left: 22px; }
.payment-details > div { flex-wrap: wrap; }
.purchase-adjustments { text-align: left; border: 1px solid #bd944d; }
.purchase-adjustments h2 { font-size: 1.1rem; }
.result-value { display: grid; justify-items: end; gap: 5px; }
.result-ball { font-size: .75rem; font-weight: 650; white-space: normal; }
.result-ball.red { color: #ffadad; }
.result-ball.white { color: #f5f5f5; }
@media (max-width: 420px) {
    .play-progress span { font-size: .7rem; }
    .result-card { flex-wrap: wrap; }
}

/* EL CHANCE: identidad compartida por navegador, PWA y el contenedor Android. */
.brand-logo { object-fit: cover; border: 1px solid #d7ad4580; }
.chance-hero { min-height: 0; padding: 20px; background: linear-gradient(120deg,#58121a,#281011); border-color: #d7ad4560; }
.chance-hero h1 { font-size: clamp(1.6rem,4vw,2.5rem); margin: 8px 0; }
.chance-hero .eyebrow, .home-upcoming .eyebrow { color: #efca73; }
.chance-hero p { font-size: .82rem; margin: 8px 0; }
.chance-brand-banner { display: block; margin: 18px 0; overflow: hidden; border: 1px solid #d7ad4580; border-radius: 20px; }
.chance-brand-banner img { display: block; width: 100%; height: auto; }
.home-wallet-parts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; font-size: .78rem; color: #dbeddd; }
.home-wallet-parts b { margin-left: 6px; color: #fff; font-variant-numeric: tabular-nums; }
.home-draw-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.home-draw { padding: 18px; border-color: #d7ad4545; background: linear-gradient(140deg,#3d1217,#211014); min-width: 0; }
.home-draw-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.home-draw .eyebrow { font-size: .6rem; }
.home-draw-status { color: #f4d790; font-size: .65rem; }
.home-draw h3 { font-size: .95rem; margin: 8px 0; overflow-wrap: anywhere; }
.home-draw time { font-size: .72rem; color: #dacac1; }
.home-draw-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.home-draw-footer strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: #ffe2a0; }
.home-draw-footer .button { min-height: 44px; padding: 10px 14px; font-size: .75rem; }
.home-upcoming .section-title > a, .home-latest .section-title > a { color: #efca73; }
.home-draw.closing { border-color: #f3ac70; }
.home-draw [aria-disabled="true"] { opacity: .6; cursor: default; }
.home-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; min-width: 0; background: #2c0c10; }
.home-result > div { min-width: 0; }
.home-result strong { font-size: .85rem; overflow-wrap: anywhere; }
.home-result time { display: block; margin-top: 4px; color: #d2bbb0; font-size: .72rem; }
.home-result-number { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: linear-gradient(135deg,#ffedb6,#c08d29); color: #34100a; font-size: 1.5rem; font-weight: 900; }
@media (max-width: 900px) { .home-draw-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 500px) {
    .chance-hero { gap: 16px; padding: 18px; }
    .chance-hero .button { align-self: start; }
    .home-draw-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .home-draw { padding: 12px; border-radius: 18px; }
    .home-draw-heading { gap: 4px; }
    .home-draw h3 { font-size: .8rem; line-height: 1.35; }
    .home-draw time { display: block; font-size: .65rem; line-height: 1.4; }
    .home-draw-footer { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
    .home-draw-footer strong { font-size: 1.05rem; }
    .home-draw-footer .button { padding: 10px 6px; text-align: center; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .home-draw { transition: none; } }