:root {
    --ink: #f7f8f5;
    --muted: #d1bdb2;
    --forest: #67212b;
    --forest-deep: #260b11;
    --green: #22c96d;
    --lime: #ffd447;
    --red: #e23b32;
    --yellow: #ffd447;
    --gold: #e3b954;
    --cream: #170506;
    --panel: #2c0c10;
    --panel-soft: #35151a;
    --white: #fff;
    --line: rgba(239, 202, 115, .32);
    --shadow: 0 22px 70px rgba(0, 0, 0, .46);
    --radius: 26px;
    --chance-backdrop: url('/branding/el-chance-costa-rica-v2.png');
}

.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;
    isolation: isolate;
    background: var(--cream);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* Fondo local compartido; el recorte móvil conserva volcán, tucán y bandera. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(35,3,9,.12), rgba(23,5,6,.52)), var(--chance-backdrop);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    :root { --chance-backdrop: url('/branding/el-chance-costa-rica-movil-v2.png'); }
}
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: #3c1018;
    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(44,12,16,.96); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 0 #ffe6a418,var(--shadow); }
.eyebrow { display: block; margin-bottom: 8px; color: #efca73; 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: #3c1018; background: linear-gradient(135deg, #ffe8a7, #d8a63e); border: 1px solid #ffe4a0; box-shadow: 0 10px 26px rgba(215,173,69,.16); }
.button.lime { color: #171000; background: var(--yellow); }
.button.ghost { color: #ffe9af; background: linear-gradient(135deg,#d7ad4510,transparent),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%) no-repeat; background-size: 250% 100%; background-position: 200% 0; animation: playShine 3.2s ease-in-out infinite; pointer-events: none; }
@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% { background-position: -200% 0; } }
.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: #efca73; }
.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 .remember-device { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0; padding: 14px; border: 1px solid #b78a46; border-radius: 14px; background: linear-gradient(130deg, #5e1723, #300a13); cursor: pointer; min-width: 0; }
.remember-device input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; margin: 2px 0 0; padding: 0; accent-color: #f5ce7a; cursor: pointer; }
.remember-device input:focus-visible { outline: 3px solid #ffde99; outline-offset: 4px; }
.remember-device span { min-width: 0; display: grid; gap: 7px; }
.remember-device strong { color: #ffe1a0; font-size: .87rem; line-height: 1.35; }
.remember-device small { color: #e4c9b2; font-size: .76rem; line-height: 1.5; font-weight: 400; }
.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: #210a10;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(215,173,69,.15); }
.password-field { position: relative; }
.password-field button { position: absolute; right: 7px; top: 7px; height: 38px; border: 0; background: transparent; color: #efca73; 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: #efca73; font-size: .82rem; font-weight: 800; text-align: center; }

.hero-dashboard { min-height: 300px; padding: clamp(28px, 6vw, 70px); border: 1px solid var(--line); border-radius: 34px; display: flex; align-items: end; justify-content: space-between; gap: 30px; color: #fff; background: linear-gradient(110deg,#4e111ae6,#350b1399), var(--chance-backdrop) center / cover; 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: #fff1da; background: linear-gradient(125deg,#54151f,#260b11); border-color: #b3945480; }
.metric-card.balance .metric-label { color: #dec6aa; }
.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 var(--line); border-radius: 20px; color: #fff; background: #3c1018; }
.quick-actions a > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #3c1018; background: var(--gold); 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(--gold); }
.account-actions a > span { background: rgba(215,173,69,.14); color: #efca73; }
.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; color: #ffe1a0; }
.section-title > a { color: #efca73; 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: grid; grid-template-columns: 43px minmax(0,1fr) auto; 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: #3c1018; color: var(--gold); font-weight: 900; }
.ticket-card-gold { color: #35232e; border: 1px solid #cbbba9; border-left: 4px solid #9c293d; background: linear-gradient(135deg, #fff, #f1edf0); 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 8px; margin: 6px 0 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: 190px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 0; text-align: right; }
.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-badge svg, .movement-icon svg, .prize-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.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 #c9bac1; border-radius: 8px; color: #56313e; background: #f8f3f5; line-height: 1.4; }
.ticket-card-gold .ticket-play-group { border-color: #d7cbd1; background: #f4eff2; }
.ticket-card-gold .ticket-number-list span { border-color: #b38d56; color: #fff4db; background: #662336; }
.ticket-payment-pending{margin-top:14px;padding:14px;border:1px solid #c8b2bc;border-radius:14px;background:#f4eaf0;color:#682331}
.ticket-payment-pending p{font-size:.8rem;line-height:1.5;margin:6px 0 12px}.ticket-payment-pending .button{min-height:44px}
.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: #40202e; }
.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(--gold); }

.page-heading { margin: 28px 0 30px; }
.page-heading h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); margin: 10px 0 12px; color: #ffe3a1; text-shadow: 0 3px 22px #d7ad4520; }
.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: #efca73; 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-list { grid-template-columns: minmax(0,1fr); margin: 12px 0; }
.draw-list-help { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.install-guide ol { padding-left: 1.5rem; line-height: 1.7; }
.install-guide h3 { color: var(--gold); }
.install-guide .account-profile-heading img { border-radius: 16px; border: 1px solid var(--gold); }
.account-birthday-value { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 1.15rem; color: var(--gold); }
.draw-close { display: block; color: var(--muted); font-size: .76rem; margin-top: 5px; }
.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; width: 36px; height: 25px; flex: 0 0 36px; border-color: #ffecb36b; border-radius: 6px; box-shadow: 0 3px 8px #0005; }
.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, #70111d, #d7ad45); }
.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: linear-gradient(to bottom,transparent 40%,#fff 40% 60%,transparent 60%),linear-gradient(to right,transparent 40%,#fff 40% 60%,transparent 60%),conic-gradient(#ce1126 0 25%,#002d62 0 50%,#ce1126 0 75%,#002d62 0); }
.flag-us, .flag-pr { background: repeating-linear-gradient(to bottom, #b22234 0 3px, #fff 3px 6px); }
.flag-us:before { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 54%; background: #23417a; }
.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 var(--line); border-radius: 18px; background: #260b11; }
.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: #efca73; background: rgba(215,173,69,.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 #cdbec5; border-radius: 12px; background: #faf7f8; }
.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: #f0e9ed; border-color: #cdbec5; }
.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: linear-gradient(135deg,#8f2d45,#5e2034); border-color: #b38d56; color: #fff4db; }
.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(--gold); background: #50141f; box-shadow: inset 0 0 0 1px var(--gold); }
.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: #ffe4a0; 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 var(--line); border-radius: 22px; color: #fff; text-align: left; background: linear-gradient(145deg, #4c121f, #24090f); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.payment-card.compact { max-width: 680px; }
.payment-card.sinpe-payment { border-color: rgba(215,173,69,.35); background: radial-gradient(circle at 100% 0, rgba(215,173,69,.1), transparent 40%), linear-gradient(145deg, #4c121f, #24090f); }
.payment-card.card-payment { border-color: rgba(215,173,69,.35); background: radial-gradient(circle at 100% 0, rgba(215,173,69,.1), transparent 42%), linear-gradient(145deg, #4c121f, #24090f); }
.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: #3c1018; background: var(--gold); 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: #ffe4a0; 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(--gold); }
.payment-card .button { margin-top: 6px; }
.sinpe-payment { --payment-ink: #40202e; }
.payment-card.sinpe-payment { color: var(--payment-ink); padding: clamp(18px,4vw,26px); background: linear-gradient(135deg,#fff,#f1edf0); border: 1px solid #cbbba9; box-shadow: inset 0 1px #fff,0 12px 35px #21080940; }
.payment-card.sinpe-pending-first { margin-top: 0; max-width: 680px; }
.sinpe-pending-open { width: 100%; color: #682331; border-color: #c8b2bc; background: #f4eaf0; }
.sinpe-pending-dialog { width: min(460px,calc(100vw - 28px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: hidden; border: 1px solid #cbbba9; border-radius: 24px; color: var(--payment-ink); background: linear-gradient(135deg,#fff,#f1edf0); box-shadow: 0 24px 90px #000b; }
.sinpe-pending-dialog[open] { display: flex; flex-direction: column; }
.sinpe-pending-dialog::backdrop { background: #160407bb; backdrop-filter: blur(5px); }
.sinpe-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; scrollbar-width: thin; scrollbar-color: #9e6b7e #f1edf0; }
.sinpe-dialog-footer { flex-shrink: 0; border-top: 1px solid #d7cbd1; background: #f0e9ed; padding: 12px 20px 16px; }
.sinpe-dialog-close { width: 100%; min-height: 44px; color: #fff4cf; background: linear-gradient(140deg,#aa2835,#701927); border: 1px solid #b88c48; }
.sinpe-pending-dialog button:focus-visible { outline: 3px solid #9b6430; outline-offset: 3px; }
.sinpe-pending-dialog .payment-card-heading small { font-size: .6rem; letter-spacing: .07em; }
.sinpe-pending-dialog .payment-details > div { padding: 10px 12px; }
.sinpe-pending-dialog .payment-instruction { margin: 10px 0; font-size: .75rem; }
.sinpe-payment .payment-card-heading { margin-bottom: 16px; }
.sinpe-payment .payment-card-heading small { color: #89633d; }
.sinpe-payment .payment-card-heading h2 { color: #682331; font-size: clamp(1.05rem,4vw,1.35rem); line-height: 1.3; }
.sinpe-payment .payment-method-icon { color: #64231e; background: linear-gradient(135deg,#ffebb1,#e5bf68); border: 1px solid #c9a356; }
.sinpe-payment .payment-total { align-items: center; gap: 10px; border: 1px solid #d7cbd1; background: #f4eaf0; margin-bottom: 16px; }
.sinpe-payment .payment-total span { color: #715032; font-size: .8rem; }
.sinpe-payment .payment-total strong { color: #8c2432; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sinpe-payment .payment-details { display: grid; gap: 10px; }
.sinpe-payment .payment-details > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 14px; border: 1px solid #d7cbd1; background: #fff; border-radius: 14px; }
.sinpe-payment .payment-details small { grid-column: 1; color: #876341; font-size: .72rem; }
.sinpe-payment .payment-details strong { grid-column: 1; max-width: 100%; text-align: left; color: #44291f; font-size: 1rem; line-height: 1.35; }
.sinpe-payment .payment-details [data-copy-row] strong { grid-column: 1 / -1; color: #852031; font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.sinpe-payment .payment-details [data-copy-row] strong.payment-reference { font-size: clamp(.95rem,3.5vw,1.05rem); letter-spacing: 0; }
.sinpe-payment .payment-details .copy-payment { grid-column: 2; grid-row: 1; align-self: center; min-height: 44px; color: #66202b; background: #f4eaf0; border-color: #c8b2bc; margin: 0; }
.sinpe-payment .payment-instruction { color: #705234; font-size: .8rem; line-height: 1.6; margin: 14px 0; }
.sinpe-payment .payment-verifying { display: flex; align-items: flex-start; gap: 10px; padding: 13px; color: #503822; border: 1px solid #d7cbd1; background: #f0e9ed; border-radius: 14px; }
.payment-validation-icon { color: #866423; flex: 0 0 20px; text-align: center; font-size: 1.1rem; }
.payment-verifying strong { font-size: .82rem; color: #684a24; }
.payment-verifying p { font-size: .75rem; line-height: 1.5; color: #705339; margin: 4px 0 0; }

.wallet-hero { min-height: 210px; border: 1px solid #e8c16d99; border-radius: 30px; padding: 34px; display: flex; flex-direction: column; color: #ffe4a0; background: radial-gradient(ellipse at 95% 0, rgba(235,194,102,.25), transparent 65%), linear-gradient(135deg, #691624, #260b11); box-shadow: inset 0 1px 0 #ffe4a035,0 22px 55px rgba(23,5,6,.3); }
.wallet-hero span, .wallet-hero small { color: #ead1c1; }
.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 #d7ad4555; border-radius: 23px; background: rgba(38,7,14,.97); 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; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; grid-column: 2; 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: 6px 0 0; line-height: 1.4; }
    .ticket-card-gold .ticket-stake-row { padding-top: 2px; }
    .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, .home-game-link { margin-top: 16px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.home-account-link > div, .home-game-link > div { flex: 1; }
.home-account-link strong, .home-account-link small, .home-game-link strong, .home-game-link small { display: block; }
.home-account-link small, .home-game-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; }
.whatsapp-invitation { min-width: 0; }
.invitation-link { background: linear-gradient(135deg, #6b2c2826, #c89e4520); border-style: solid; }
.invitation-link > span { width: 100%; color: #e6cb92; font-size: .78rem; }
.invitation-link strong { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.6; }
.agent-web-invitation { margin-top: 18px; }
.agent-web-invitation summary { color: #ffe0a0; font-weight: 700; cursor: pointer; padding-block: 10px; }
.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 var(--line); border-radius: 14px; background: #2c0c10; 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; }
/* Historial claro inspirado en el libro de movimientos, con acentos de la marca. */
.activity-ledger { gap: 0; border: 1px solid #ddba6b; border-top: 3px solid #d6ad4c; border-radius: 20px; background: linear-gradient(135deg,#fffefa,#fff4d9); color: #302512; box-shadow: inset 0 1px 0 #fff,0 12px 30px #15060940; }
.activity-ledger > .list-card { display: grid; grid-template-columns: 43px minmax(0,1fr) minmax(90px,auto); align-items: center; gap: 12px; margin: 0; min-height: 94px; padding: 16px 18px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.activity-ledger > .list-card + .list-card { border-top: 1px solid #ccb57d4d; }
.activity-ledger .movement-icon { border-radius: 50%; }
.activity-ledger .movement-icon.positive { background: #158247; color: #fff; box-shadow: inset 0 1px 0 #ffffff30; }
.activity-ledger .movement-icon.negative { background: #c92738; color: #fff; }
.activity-ledger .movement-icon.neutral { background: #f0dfb2; color: #65502a; }
.activity-ledger .movement-icon.is-prize { background: linear-gradient(135deg,#ffdd7d,#d0a039); color: #452b08; }
.activity-ledger .movement-detail > strong, .activity-ledger .prize-row > div:nth-child(2) > strong { font-size: .94rem; line-height: 1.4; }
.activity-ledger time, .activity-ledger small { display: block; margin-top: 5px; color: #705d3b; font-size: .73rem; line-height: 1.45; }
.activity-ledger .list-value { max-width: none; min-width: 0; text-align: right; }
.activity-ledger .list-value > strong { color: #302512; font-size: clamp(1rem,2vw,1.25rem); line-height: 1.3; font-variant-numeric: tabular-nums; }
.activity-ledger .list-value > .amount-positive { color: #127440; }
.activity-ledger .list-value > .amount-negative { color: #b41c2e; }
.activity-ledger .list-value > .amount-neutral { color: #705d3b; }
.activity-ledger .prize-highlight .list-value > strong { color: #7b5511; }
.activity-ledger .prize-state { padding: 4px 7px; border-color: #ceb174; background: #f5e5bb; color: #5a431d; font-size: .7rem; }
.activity-ledger .prize-void { color: #705d3b; }
.activity-ledger .prize-row > .prize-icon, .activity-ledger .prize-row > .list-value, .activity-ledger .prize-row > div:nth-child(2), .activity-ledger .movement-row > .movement-icon, .activity-ledger .movement-row > .list-value { grid-column: auto; grid-row: auto; }
.activity-ledger .prize-row .list-value { margin: 0; }
@media (max-width: 480px) {
    .activity-ledger > .list-card { grid-template-columns: 36px minmax(0,1fr); gap: 4px 10px; padding: 14px 12px; }
    .activity-ledger .movement-row > .movement-icon, .activity-ledger .prize-row > .prize-icon { width: 36px; height: 36px; align-self: start; grid-column: 1; grid-row: 1 / span 2; }
    .activity-ledger .movement-row > .movement-detail, .activity-ledger .prize-row > div:nth-child(2) { grid-column: 2; grid-row: 1; }
    .activity-ledger .list-card > .list-value { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; text-align: left; }
    .activity-ledger .list-value small { margin: 0; }
    .activity-ledger .movement-detail > strong, .activity-ledger .prize-row > div:nth-child(2) > strong { font-size: .9rem; }
    .activity-ledger .prize-row > .list-value { grid-column: 2; grid-row: 2; }
    .activity-ledger .prize-state { max-width: 100%; }
}
@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 { position: relative; min-height: 0; padding: 26px 28px 32px; flex-direction: row; align-items: center; gap: 24px; background: linear-gradient(100deg,#70111ded,#2b080ea6),var(--chance-backdrop) center / cover; border-color: #d7ad4580; }
.chance-hero-logo { flex: 0 0 112px; object-fit: cover; border-radius: 24px; border: 1px solid #e5c37480; box-shadow: 0 12px 35px #09000066; }
.chance-hero-copy { flex: 1; min-width: 0; }
.chance-hero h1 { font-size: clamp(1.8rem,4vw,3rem); margin: 8px 0; letter-spacing: -.035em; color: #ffe8a7; }
.chance-hero .eyebrow, .home-upcoming .eyebrow { color: #efca73; }
.chance-hero p { font-size: 1rem; margin: 8px 0; color: #fff1d6; }
.chance-hero-caption { display: block; max-width: 420px; font-size: .78rem; line-height: 1.5; color: #e5c9c0; }
.chance-hero .button { flex: 0 0 auto; }
.chance-tico-ribbon { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: linear-gradient(180deg,#253975 0 20%,#fff2df 20% 35%,#cb2336 35% 65%,#fff2df 65% 80%,#253975 80% 100%); opacity: .9; }
.home-balance .metric-card.balance { background: linear-gradient(125deg,#35121a,#210b10); border-color: #b394544f; color: #fff1da; }
.home-balance .metric-card.balance .metric-label { color: #dec6aa; }
.home-balance .metric-card.balance > strong { color: #ffe4a0; }
.home-balance .metric-card.balance > small { color: #f6dfb3; }
.home-wallet-parts { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #d7ad4529; font-size: .78rem; color: #dac9bc; }
.home-wallet-parts b { margin-left: 6px; color: #ffedc7; font-variant-numeric: tabular-nums; }
.home-modalities { margin-top: 28px; }
.home-section-note { color: #d2bbb0; font-size: .75rem; }
.home-modalities-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.home-modality { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 20px; border-radius: 22px; border: 1px solid #d7ad4550; background: linear-gradient(140deg,#5c1420,#2b0c11); }
.home-modality > div { min-width: 0; flex: 1; }
.home-modality strong { display: block; color: #ffdf92; font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.home-modality small { display: block; color: #e3c9be; margin-top: 5px; font-size: .78rem; line-height: 1.45; }
.modality-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid #dfbb694a; color: #ffe4a0; background: #d7ad4517; }
.modality-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.modality-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; color: #fff1d6; font-weight: 800; font-size: .8rem; border-top: 1px solid #dfbb6929; padding-top: 10px; }
.modality-chance { background: radial-gradient(circle at 100% 0,#dfac3030,transparent 75%),linear-gradient(140deg,#781b26,#3a0d16); }
.modality-raspas { background: linear-gradient(140deg,#443018,#251711); }
.modality-state { display: inline-block; padding: 7px 10px; border: 1px solid #c9ae7455; border-radius: 10px; color: #ebd5ae; font-weight: 700; font-size: .75rem; }
a.home-modality:hover { border-color: #f4ce68; box-shadow: inset 0 0 0 1px #f4ce6840; }
.home-modality:focus-visible, .chance-hero .button:focus-visible { outline: 3px solid #ffe9ab; outline-offset: 4px; }
.home-shortcuts .metric-card { min-height: 0; padding: 20px; }
.home-shortcuts .metric-card > strong { font-size: clamp(1.35rem,3vw,2rem); }
.communication-toggle { display: flex; gap: 14px; align-items: flex-start; min-height: 64px; padding: 14px; border-radius: 14px; border: 1px solid #d7ad4535; background: #2c0c10; cursor: pointer; }
.communication-toggle input { flex: 0 0 24px; width: 24px; height: 24px; margin: 2px 0 0; accent-color: #d7ad45; }
.communication-toggle > span { min-width: 0; line-height: 1.5; color: #fff0d5; }
.communication-toggle small { display: block; color: #d2bbb0; font-size: .75rem; font-weight: 400; margin-top: 3px; }
.home-draw-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.home-draw { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-color: #dfbb6966; background: radial-gradient(ellipse at 100% 0,#d7ad451c,transparent 70%),linear-gradient(145deg,#48151e,#230c12); box-shadow: inset 0 1px 0 #ffe8a712,0 12px 28px #10030650; }
.home-draw[data-local="true"] { border-color: #edc87999; background: radial-gradient(ellipse at 100% 0,#eec25924,transparent 70%),linear-gradient(145deg,#6c1724,#2e0b14); }
.home-draw-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.home-draw-country { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 125px; }
.home-draw .country-flag { position: relative; top: auto; right: auto; width: 36px; height: 25px; flex: 0 0 36px; border-color: #ffecb36b; border-radius: 6px; box-shadow: 0 3px 8px #0005; }
.home-draw .flag-do { background: linear-gradient(to bottom,transparent 40%,#fff 40% 60%,transparent 60%),linear-gradient(to right,transparent 40%,#fff 40% 60%,transparent 60%),conic-gradient(#ce1126 0 25%,#002d62 0 50%,#ce1126 0 75%,#002d62 0); }
.home-draw .flag-us:before { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 54%; background: #23417a; }
.home-draw .eyebrow { margin: 0; font-size: .65rem; letter-spacing: .035em; color: #ead7b5; }
.home-draw-status { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border: 1px solid #efca7338; border-radius: 30px; color: #f4d790; background: #efca730b; font-size: .65rem; line-height: 1.4; }
.home-draw-status:before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.home-draw h3 { font-size: 1.07rem; line-height: 1.35; margin: 0 0 14px; color: #fff2d6; overflow-wrap: anywhere; }
.home-draw-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.home-draw time { font-size: .78rem; color: #f2ded0; line-height: 1.45; }
.home-draw time > span, .home-draw-countdown > span { display: block; color: #d7beb2; font-size: .65rem; font-weight: 500; margin-bottom: 3px; }
.home-draw time > strong { display: block; font-weight: 650; }
.home-draw-payout { padding: 6px 10px; border-radius: 10px; border: 1px solid #f3ce7459; background: linear-gradient(135deg,#efd592,#c59742); color: #3a180d; font-size: 1rem; font-weight: 900; line-height: 1.3; }
.home-draw-payout small { display: block; font-size: .6rem; font-weight: 700; }
.home-draw-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #efca7326; }
.home-draw-countdown { min-width: 0; }
.home-draw-countdown > strong { display: block; font-size: 1.3rem; line-height: 1.3; letter-spacing: .025em; font-variant-numeric: tabular-nums; color: #ffe2a0; }
.home-draw-footer .button { min-height: 44px; padding: 10px 14px; font-size: .78rem; }
.home-draw-footer .button:focus-visible { outline: 3px solid #ffe9ab; outline-offset: 4px; }
.home-upcoming .section-title > a, .home-latest .section-title > a { color: #efca73; }
.home-draw.closing { border-color: #f3ac70; }
.home-draw.closing .home-draw-status { color: #ffbf8d; border-color: #ffbf8d55; }
.home-draw [aria-disabled="true"] { opacity: .6; cursor: default; animation: none; transform: none; }
.home-draw [aria-disabled="true"]:after { animation: none; display: none; }
.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)); }
    .chance-hero { flex-wrap: wrap; gap: 18px; }
    .chance-hero .button { margin-left: 130px; }
}
@media (max-width: 500px) {
    .chance-hero { gap: 14px; padding: 18px 18px 24px; border-radius: 24px; }
    .chance-hero-logo { width: 66px; height: 66px; flex-basis: 66px; border-radius: 16px; }
    .chance-hero .eyebrow { font-size: .58rem; letter-spacing: .08em; margin-bottom: 4px; }
    .chance-hero h1 { font-size: clamp(1.4rem,6vw,1.85rem); margin: 4px 0; }
    .chance-hero p { font-size: .8rem; margin: 4px 0; }
    .chance-hero-caption { display: none; }
    .chance-hero .button { width: 100%; margin-left: 0; }
    .home-modalities .section-title { gap: 8px; align-items: center; }
    .home-modalities h2 { font-size: 1.1rem; margin: 0; }
    .home-section-note { font-size: .65rem; text-align: right; }
    .home-modalities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .home-modality { gap: 10px; padding: 12px 9px; border-radius: 16px; }
    .modality-icon { width: 36px; height: 36px; border-radius: 11px; }
    .modality-icon svg { width: 24px; height: 24px; }
    .home-modality strong { font-size: .8rem; }
    .home-modality small { font-size: .65rem; }
    .modality-action { font-size: .65rem; gap: 3px; }
    .modality-state { padding: 6px; font-size: .62rem; line-height: 1.4; }
    .home-shortcuts .metric-card { padding: 16px; }
    .home-draw-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .home-draw { padding: 16px; border-radius: 20px; }
    .home-draw-heading { gap: 8px; margin-bottom: 10px; }
    .home-draw h3 { margin-bottom: 10px; font-size: 1rem; }
    .home-draw-meta { margin-bottom: 12px; }
    .home-draw-footer { padding-top: 12px; }
    .home-draw-countdown > strong { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .home-draw { transition: none; } }

/* Ron: mesas de práctica, cartas privadas y controles táctiles sin desplazamiento horizontal. */
[data-ron] { display: grid; gap: 20px; min-width: 0; }
[data-ron] .surface { padding: clamp(16px, 3vw, 24px); background-color: #24120f; border-color: #704a36; }
[data-ron] .toast { position: static; margin: 0; z-index: auto; background: #362216; border-color: #a27c45; color: #ffe7ba; }
[data-ron] .eyebrow, .ron-page-heading .eyebrow { color: #f3c775; }
[data-ron] .button.secondary { color: #ffe2b0; background: #442225; border: 1px solid #a16b52; }
[data-ron] .section-title { align-items: center; }
.ron-page-heading > a { color: #ffe2b0; }
.ron-page-heading h1 { font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.12; }
[data-ron] [hidden] { display: none !important; }
[data-ron-table], [data-ron-lobby] { display: grid; gap: 18px; min-width: 0; }
.ron-lobby-heading, .ron-table-heading, .ron-lobby-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.ron-lobby-heading p, .ron-table-heading p { max-width: 60ch; color: var(--muted); }
.ron-lobby-heading h2, .ron-table-heading h2 { margin: 0 0 8px; }
.ron-lobby-heading p, .ron-table-heading p { margin: 0; font-size: .88rem; line-height: 1.5; }
.ron-lobby-heading .ron-actions, .ron-table-heading .ron-actions { width: 100%; margin-top: 0; }
.ron-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ron-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; }
.ron-player { border: 1px solid #704338; background: #20120f; border-radius: 14px; padding: 13px; display: grid; gap: 5px; }
.ron-player span { font-size: .76rem; color: #cdb8a4; }
.ron-player.active { border-color: #f3be5d; box-shadow: inset 0 0 0 1px #f3be5d; }
.ron-board { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(16px, 4vw, 35px); background: linear-gradient(140deg, #4c1014, #23120e); }
.ron-board > div { display: grid; gap: 8px; justify-items: center; }
.ron-card { width: 64px; height: 94px; flex: 0 0 64px; border: 2px solid #d9c7ab; border-radius: 11px; background: #fff6e5; color: #27212a; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; padding: 5px; }
.ron-card strong { font-size: 1.35rem; }
.ron-card span { font-size: 1.7rem; }
.ron-card-red { color: #b21e32; }
.ron-card-joker strong { font-size: .63rem; }
.ron-card-back { color: #ffd584; background: repeating-linear-gradient(45deg, #761d2b 0, #761d2b 6px, #43101a 6px, #43101a 12px); border-color: #daaf66; font-weight: 800; }
button.ron-card { cursor: pointer; touch-action: manipulation; }
button.ron-card:disabled { cursor: default; opacity: .72; }
.ron-card.selected { border-color: #f7c763; background: #ffe9a6; box-shadow: 0 0 0 3px #cc3439; transform: translateY(-4px); }
.ron-card:focus-visible { outline: 3px solid #91b9f5; outline-offset: 3px; }
.ron-hand { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; min-height: 110px; }
.ron-groups { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.ron-group { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px; border: 1px solid #80623a; border-radius: 13px; max-width: 100%; }
.ron-group .ron-card { width: 42px; height: 65px; flex-basis: 42px; }
.ron-group .ron-card strong { font-size: .85rem; }
.ron-group .ron-card span { font-size: 1.15rem; }
.ron-turn strong { color: #ffcd72; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.ron-turn > span { color: #dcc5ad; font-size: .72rem; }
.ron-share input { width: 100%; margin: 10px 0; }
.ron-rules summary { cursor: pointer; font-weight: 700; color: #f5cd84; }
.ron-rules p { color: #d2c2b4; font-size: .87rem; line-height: 1.65; }
@media (max-width: 420px) {
    .ron-actions .button { flex: 1 1 120px; font-size: .8rem; padding: 12px 8px; }
    .ron-card { width: 55px; flex-basis: 55px; height: 82px; }
    .ron-hand { gap: 9px; }
    .ron-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ron-player { padding: 10px; }
}