/* ============================================================
   El Guaire — Editorial Racing Form Design System
   Mobile-first. Self-contained: imports Google Fonts; no
   Bootstrap dependency. Used by the redesigned pages:
   index.php, inside/index.php, inside/apuestaSuperPolla.php,
   inside/viewResultSuperPolla.php
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --ink:          #1a1815;
    --paper:        #f4efe6;
    --accent:       #c8362f;
    --night:        #0c0b0a;
    --cream-lo:     #ede6d6;
    --highlight:    #fdfaf3;

    --headline:     "Newsreader", "Times New Roman", serif;
    --sans:         "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:         "JetBrains Mono", ui-monospace, monospace;
}

/* Reset (scoped to bodies that opt in) */
.eg-page * { box-sizing: border-box; }
.eg-page { margin: 0; padding: 0; }

body.eg-page {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

a { color: inherit; }

/* ============================================================
   TOP STRIP — running ticker / back nav
   ============================================================ */
.eg-strip {
    background: var(--night);
    color: var(--paper);
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    white-space: nowrap;
}
.eg-strip a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.eg-strip-live { color: var(--accent); }
.eg-strip-dim  { opacity: 0.6; }

/* ============================================================
   MASTHEAD
   ============================================================ */
.eg-masthead {
    background: var(--paper);
    color: var(--ink);
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.eg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eg-brand-name {
    font-family: var(--headline);
    font-size: 22px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1;
}
.eg-brand-kicker {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 2px;
}
.eg-mast-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eg-mast-avatar {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: var(--headline);
    font-style: italic;
    font-weight: 500;
}

/* ============================================================
   SADDLE — square chip with internal shadow
   Sizes via inline width/height + font-size = size * 0.5
   ============================================================ */
.eg-saddle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.eg-saddle.eg-s-2 { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }

.eg-s-0  { background:#c2c2c2; color:#000; }
.eg-s-1  { background:#ec2c28; color:#fff; }
.eg-s-2  { background:#ffffff; color:#000; }
.eg-s-3  { background:#1d4fa3; color:#fff; }
.eg-s-4  { background:#eaeb24; color:#000; }
.eg-s-5  { background:#458544; color:#fff; }
.eg-s-6  { background:#060103; color:#fff; }
.eg-s-7  { background:#e86311; color:#fff; }
.eg-s-8  { background:#f9bcc5; color:#000; }
.eg-s-9  { background:#1fb8d7; color:#000; }
.eg-s-10 { background:#9a468f; color:#fff; }
.eg-s-11 { background:#c2c2c2; color:#000; }
.eg-s-12 { background:#a9d5b5; color:#000; }
.eg-s-13 { background:#644538; color:#fff; }
.eg-s-14 { background:#671033; color:#fff; }
.eg-s-15 { background:#c9c2b7; color:#000; }
.eg-s-16 { background:#8688c4; color:#fff; }
.eg-s-17 { background:#1c3975; color:#fff; }
.eg-s-18 { background:#103b1b; color:#fff; }
.eg-s-19 { background:#0a73a8; color:#fff; }
.eg-s-20 { background:#df0a79; color:#fff; }
.eg-s-21 { background:#6d4c41; color:#fff; }
.eg-s-22 { background:#00695c; color:#fff; }
.eg-s-23 { background:#4527a0; color:#fff; }
.eg-s-24 { background:#37474f; color:#fff; }

/* ============================================================
   SECTION HEADER (italic editorial)
   ============================================================ */
.eg-section-head {
    padding: 24px 16px 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--ink);
}
.eg-section-head h2 {
    font-family: var(--headline);
    font-size: 22px;
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-style: italic;
}
.eg-section-head .eg-tag {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* ============================================================
   MONO LABEL
   ============================================================ */
.eg-mono-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-mono-label.eg-accent { color: var(--accent); opacity: 1; }

/* ============================================================
   LIVE EVENT BLOCK — dark race-card-as-event
   ============================================================ */
.eg-live {
    display: block;
    text-decoration: none;
    color: var(--paper);
    background: var(--night);
    padding: 18px 16px 0;
    position: relative;
}
.eg-live.eg-primary { padding: 20px 18px 0; }

.eg-live-eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.eg-live-eyebrow .eg-hot { color: var(--accent); }
.eg-live-eyebrow .eg-code { opacity: 0.5; }

.eg-live-title {
    font-family: var(--headline);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 4px;
}
.eg-live.eg-primary .eg-live-title { font-size: 28px; }

.eg-live-stage {
    font-family: var(--headline);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    opacity: 0.6;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}
.eg-live.eg-primary .eg-live-stage { font-size: 18px; }

.eg-live-saddles {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.eg-live-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 12px;
    border-top: 1px solid rgba(244,239,230,0.15);
}
.eg-live-stats {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--paper);
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eg-live-stat-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.eg-live-stat-key {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
    min-width: 52px;
}
.eg-live-stat-amount {
    font-family: var(--headline);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.025em;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.eg-live-stat-suffix {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.5;
}
.eg-live-cd-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 2px;
}
.eg-live-cd {
    font-family: var(--headline);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.eg-live.eg-primary .eg-live-cd { font-size: 38px; }

/* Stack of CTAs (primary + secondary), bleeds card padding */
.eg-live-ctas {
    margin: 14px -16px 0;
    display: flex;
    flex-direction: column;
}
.eg-live-cta-primary,
.eg-live-cta-secondary {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}
.eg-live-cta-primary {
    background: var(--accent);
    color: var(--paper);
}
.eg-live-cta-secondary {
    background: transparent;
    color: var(--paper);
    border-top: 1px solid rgba(244,239,230,0.15);
    font-size: 11px;
    padding: 13px 18px;
    opacity: 0.85;
}
.eg-live-cta-secondary:hover { opacity: 1; }

/* Mis apuestas accordion (only visible to current user, when they have bets) */
.eg-mybets {
    margin: 12px -16px 0;
    background: rgba(244,239,230,0.04);
    border-top: 1px solid rgba(244,239,230,0.12);
    border-bottom: 1px solid rgba(244,239,230,0.12);
}
.eg-mybets summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.75;
    user-select: none;
}
.eg-mybets summary::-webkit-details-marker { display: none; }
.eg-mybets[open] summary { opacity: 1; }
.eg-mybets-label { font-weight: 600; }
.eg-mybets-count {
    color: var(--accent);
    font-weight: 700;
}
.eg-mybets-arrow {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11px;
    transition: transform 0.15s;
}
.eg-mybets[open] .eg-mybets-arrow { transform: rotate(180deg); }
.eg-mybets-body {
    padding: 4px 18px 14px;
}
.eg-mybet-row {
    padding: 10px 0;
    border-top: 1px solid rgba(244,239,230,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.eg-mybet-row:first-child { border-top: none; }
.eg-mybet-info { flex: 1; min-width: 0; }
.eg-mybet-meta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 6px;
    color: var(--paper);
}
.eg-mybet-meta .eg-mybet-time { opacity: 0.7; }
.eg-mybet-picks {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.eg-mybet-delete {
    background: transparent;
    border: 1px solid rgba(244,239,230,0.2);
    color: rgba(244,239,230,0.6);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    font-family: var(--sans);
}
.eg-mybet-delete:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}

/* ============================================================
   MODAL (native <dialog>)
   ============================================================ */
.eg-modal {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 0;
    max-width: 420px;
    width: calc(100% - 32px);
    border-radius: 0;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
}
.eg-modal::backdrop {
    background: rgba(12,11,10,0.72);
    backdrop-filter: blur(2px);
}
.eg-modal form {
    padding: 24px;
}
.eg-modal-eyebrow {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.eg-modal-title {
    font-family: var(--headline);
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 14px;
}
.eg-modal-body {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.8;
    margin: 0 0 22px;
}
.eg-modal-body strong { color: var(--ink); opacity: 1; }
.eg-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.eg-modal-btn {
    padding: 12px 18px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    cursor: pointer;
    background: transparent;
    color: var(--ink);
}
.eg-modal-btn.eg-modal-cancel:hover {
    background: var(--ink);
    color: var(--paper);
}
.eg-modal-btn.eg-modal-danger {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.eg-modal-btn.eg-modal-danger:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

/* ============================================================
   LEDGER ROW (past results)
   ============================================================ */
.eg-ledger {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(26,24,21,0.1);
    text-decoration: none;
    color: var(--ink);
}
.eg-ledger-pos {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--headline);
    font-size: 17px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.eg-ledger.eg-won .eg-ledger-pos {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.eg-ledger-name {
    font-family: var(--headline);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.eg-ledger-meta {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-ledger-amount {
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
}
.eg-ledger.eg-won .eg-ledger-amount { color: var(--accent); }

/* ============================================================
   PROGRAM RAIL (Jugar SuperPolla)
   ============================================================ */
.eg-prog-section {
    display: grid;
    grid-template-columns: 60px 1fr;
    border-bottom: 1px solid rgba(26,24,21,0.12);
    background: transparent;
    transition: background 0.18s;
}
.eg-prog-section.eg-picked { background: var(--highlight); }

.eg-prog-rail {
    background: var(--ink);
    color: var(--paper);
    padding: 18px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: background 0.18s;
}
.eg-prog-section.eg-picked .eg-prog-rail { background: var(--accent); }
.eg-prog-rail-c {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-prog-rail-num {
    font-family: var(--headline);
    font-size: 32px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.03em;
    line-height: 1;
}
.eg-prog-rail-tick {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}

.eg-prog-body { padding: 16px 14px 18px; }
@media (min-width: 720px) {
    .eg-prog-body { max-width: 760px; }
}
.eg-prog-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eg-prog-meta-left { opacity: 0.55; }
.eg-prog-meta-pick { color: var(--accent); font-weight: 700; }
.eg-prog-meta-empty { opacity: 0.4; }

.eg-prog-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
@media (min-width: 720px) {
    /* Desktop: fixed-size cells, packed left, wrap as needed */
    .eg-prog-grid {
        grid-template-columns: repeat(auto-fill, 50px);
        justify-content: start;
    }
}
.eg-prog-cell {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.14s ease-out;
    z-index: 1;
}
.eg-prog-cell.eg-disabled { cursor: not-allowed; opacity: 0.32; }
.eg-prog-cell.eg-selected {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    transform: scale(1.05);
    z-index: 2;
}
.eg-prog-cell-strike {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eg-prog-cell-strike::before {
    content: "";
    width: 120%;
    height: 1.5px;
    background: var(--ink);
    transform: rotate(-45deg);
    opacity: 0.65;
}
.eg-prog-cell-fav {
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    font-family: var(--mono);
    font-size: 7.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    opacity: 0.5;
}

/* ============================================================
   STICKY FOOTER (bet form)
   ============================================================ */
.eg-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--night);
    color: var(--paper);
    border-top: 1px solid var(--ink);
    z-index: 20;
}
.eg-sticky-progress {
    height: 3px;
    background: rgba(244,239,230,0.1);
}
.eg-sticky-progress-bar {
    height: 100%;
    background: var(--accent);
    transition: width 0.2s;
    width: 0%;
}
.eg-sticky-preview {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(244,239,230,0.12);
    display: none;
}
.eg-sticky.eg-expanded .eg-sticky-preview { display: block; }
.eg-sticky-preview-grid {
    display: grid;
    gap: 8px;
}
.eg-sticky-preview-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.eg-sticky-preview-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-sticky-preview-empty {
    width: 28px;
    height: 28px;
    border: 1px dashed rgba(244,239,230,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    opacity: 0.4;
    border-radius: 4px;
}
.eg-sticky-bar {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.eg-sticky-summary {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--paper);
    text-align: left;
    flex: 1;
    min-width: 0;
}
.eg-sticky-summary-counter {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eg-sticky-summary-counter strong {
    color: var(--paper);
    font-weight: 700;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}
.eg-sticky-summary-counter.eg-complete strong { color: var(--accent); }
.eg-sticky-summary-price {
    margin-top: 2px;
    font-family: var(--headline);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}
.eg-sticky-summary-price-currency {
    opacity: 0.55;
    font-size: 13px;
    font-style: italic;
}
.eg-sticky-submit {
    border: none;
    background: rgba(244,239,230,0.12);
    color: rgba(244,239,230,0.4);
    padding: 14px 20px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: not-allowed;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eg-sticky-submit.eg-active {
    background: var(--accent);
    color: var(--paper);
    cursor: pointer;
}

/* ============================================================
   SAVE INDICATOR
   ============================================================ */
.eg-save {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(26,24,21,0.08);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-save-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--ink);
    opacity: 0.4;
    transition: all 0.3s;
}
.eg-save.eg-pulse .eg-save-dot {
    background: var(--accent);
    opacity: 1;
}

/* ============================================================
   RESULTS (viewResultSuperPolla)
   ============================================================ */
.eg-results-stats {
    margin-top: 12px;
    display: flex;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-top: 1px solid rgba(26,24,21,0.15);
    padding-top: 10px;
}
.eg-results-stat {
    flex: 1;
}
.eg-results-stat + .eg-results-stat { border-left: 1px solid rgba(26,24,21,0.12); padding-left: 8px; }
.eg-results-stat:not(:last-child) { padding-right: 8px; }
.eg-results-stat-label { opacity: 0.55; margin-bottom: 3px; }
.eg-results-stat-value { font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }

.eg-official {
    background: var(--ink);
    color: var(--paper);
    padding: 20px 0 18px;
}
.eg-official-head {
    padding: 0 16px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.eg-official-title {
    font-family: var(--headline);
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
}
.eg-official-row {
    display: grid;
    gap: 4px;
    padding: 0 32px;       /* match bet-row position: page-padding(16) + card-padding(16) */
    align-items: start;
}
.eg-official-col {
    text-align: center;
    padding: 0 4px;
    min-width: 0;          /* allow column to shrink for tight grids */
}
.eg-official-col + .eg-official-col {
    border-left: 1px solid rgba(244,239,230,0.12);
}
@media (max-width: 719px) {
    /* Tighter padding on mobile so saddles aren't cramped past edges */
    .eg-official-row { padding: 0 24px; }
}
.eg-official-col-r {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 6px;
    text-align: center;
}
/* FAV cell — sits right under the R# header */
.eg-official-fav-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(244,239,230,0.18);
}
.eg-official-fav-label {
    font-family: var(--mono);
    font-size: 7.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.45;
}
.eg-official-col-st {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.eg-official-col-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.eg-official-pos {
    display: flex;
    align-items: center;
    gap: 4px;
}
.eg-official-pos-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.4;
    width: 14px;
}
.eg-official-empty {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px dashed rgba(244,239,230,0.25);
}

/* Mobile: hide verbose labels to keep columns narrow */
@media (max-width: 719px) {
    .eg-official-col-st,
    .eg-official-pos-label,
    .eg-official-fav-label,
    .eg-desktop-only {
        display: none;
    }
}

/* Desktop: keep saddles centered in grid cells */
@media (min-width: 720px) {
    .eg-official-col-stack {
        align-items: center;
    }
    .eg-official-fav-top {
        flex-direction: row;
        gap: 6px;
        justify-content: center;
    }
}

/* ============================================================
   PLAYER CARD (results leaderboard)
   ============================================================ */
.eg-player {
    background: var(--highlight);
    color: var(--ink);
    border: 1px solid rgba(26,24,21,0.12);
    padding: 14px 16px;
}
.eg-player.eg-featured {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);  /* same 1px footprint as regular card for grid alignment */
    padding: 14px 16px;
}
.eg-player-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.eg-player.eg-featured .eg-player-head { margin-bottom: 14px; }
.eg-player-id {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
}

/* Prize block — prominent, sits between name and points */
.eg-player-prize-big {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}
.eg-player-prize-label {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 2px;
    line-height: 1;
}
.eg-player-prize-amount {
    font-family: var(--headline);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.025em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.eg-player.eg-featured .eg-player-prize-amount { color: var(--accent); }
.eg-player-rank {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
}
.eg-player.eg-featured .eg-player-rank { font-size: 11px; opacity: 0.55; }
.eg-player.eg-prize .eg-player-rank { color: var(--accent); opacity: 1; }
.eg-player-name {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eg-player.eg-featured .eg-player-name { font-size: 16px; }
.eg-player-tu {
    margin-left: 10px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.eg-player-prize {
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.eg-player-pts {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}
.eg-player-pts-num {
    font-family: var(--headline);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.eg-player.eg-featured .eg-player-pts-num { font-size: 32px; }
.eg-player.eg-prize .eg-player-pts-num { color: var(--accent); }
.eg-player-pts-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: 3px;
}

.eg-player-sub {
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* Race header strip — labels shown once per player group */
.eg-bet-headers {
    display: grid;
    gap: 4px;
    align-items: center;
    padding: 6px 0 4px;
    margin-top: 8px;
    border-top: 1px solid rgba(26,24,21,0.08);
}
.eg-player.eg-featured .eg-bet-headers {
    border-top-color: rgba(244,239,230,0.12);
}
.eg-bet-h {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.45;
}

/* One row per bet — saddles + total points, very compact */
.eg-bet-row {
    display: grid;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
    border-top: 1px solid rgba(26,24,21,0.05);
}
.eg-player.eg-featured .eg-bet-row {
    border-top-color: rgba(244,239,230,0.06);
}
.eg-bet-row:first-of-type { border-top: none; }
.eg-bet-id {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}
.eg-bet-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.eg-bet-cell.eg-pending { opacity: 0.5; }
.eg-bet-saddle {
    position: relative;
    line-height: 0;
}
.eg-saddle-empty {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 1px dashed currentColor;
    border-radius: 4px;
    opacity: 0.25;
}
.eg-bet-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 12px;
    height: 12px;
    padding: 0 2.5px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: 0 0 0 1.5px var(--highlight);
}
.eg-player.eg-featured .eg-bet-badge { box-shadow: 0 0 0 1.5px var(--ink); }
.eg-bet-badge.eg-win { background: var(--accent); color: var(--paper); }
.eg-bet-badge.eg-zero {
    background: rgba(26,24,21,0.12);
    color: rgba(26,24,21,0.55);
}
.eg-player.eg-featured .eg-bet-badge.eg-zero {
    background: rgba(244,239,230,0.18);
    color: rgba(244,239,230,0.55);
}
.eg-bet-total {
    font-family: var(--headline);
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.7;
}
.eg-bet-total.eg-best {
    color: var(--accent);
    opacity: 1;
    font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */
.eg-footer {
    padding: 20px 16px 28px;
    background: var(--paper);
    border-top: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.eg-footer a { color: var(--ink); text-decoration: none; }

/* ============================================================
   BALANCE STRIP (dashboard)
   ============================================================ */
.eg-balance {
    background: var(--ink);
    color: var(--paper);
    padding: 20px 16px;
}
.eg-balance-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.eg-balance-label {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 6px;
}
.eg-balance-amount {
    font-family: var(--headline);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.eg-balance-amount-sym {
    opacity: 0.55;
    font-size: 22px;
    font-style: italic;
}
.eg-balance-amount-suffix {
    opacity: 0.55;
    font-size: 14px;
    font-family: var(--mono);
    margin-left: 8px;
    letter-spacing: 0.1em;
}
.eg-balance-link {
    color: var(--paper);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid rgba(244,239,230,0.3);
}

/* ============================================================
   LIVE EVENT GRID — 1 col mobile, 3 cols desktop
   ============================================================ */
.eg-live-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0;
}

@media (min-width: 720px) {
    .eg-live-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding: 14px 16px;
        max-width: 1100px;
        margin: 0 auto;
    }
    /* Live block CTAs bleed the side padding; keep them tight in grid */
    .eg-live-grid .eg-live-ctas,
    .eg-live-grid .eg-mybets {
        margin-left: -16px;
        margin-right: -16px;
    }
}

/* ============================================================
   RESPONSIVE — desktop content clamps
   ============================================================ */
@media (min-width: 720px) {
    .eg-page main, .eg-page .eg-shell {
        max-width: 720px;
        margin: 0 auto;
    }
    /* Section headers & ledger rows stay narrow for readability */
    .eg-page > .eg-section-head,
    .eg-page > .eg-news-row,
    .eg-page > div > .eg-ledger {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   PULSE
   ============================================================ */
@keyframes eg-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.eg-pulse-dot {
    width: 6px; height: 6px; border-radius: 3px;
    background: var(--accent);
    display: inline-block;
    animation: eg-pulse 1.5s infinite;
    flex-shrink: 0;
}

/* ============================================================
   UTILITY
   ============================================================ */
.eg-flash {
    margin: 12px 16px 0;
    padding: 12px 14px;
    background: var(--highlight);
    border: 1px solid rgba(26,24,21,0.12);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.eg-flash.eg-error { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   ADMIN ENTITY CARDS (jornadas, eventos, etc.)
   ============================================================ */
.eg-page-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 24px;
}
.eg-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0 12px;
}
.eg-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.eg-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    line-height: 1.2;
}
.eg-btn-sm:hover {
    background: var(--ink);
    color: var(--paper);
}
.eg-btn-sm.eg-accent {
    border-color: var(--accent);
    color: var(--accent);
}
.eg-btn-sm.eg-accent:hover {
    background: var(--accent);
    color: var(--paper);
}
.eg-btn-sm.eg-danger {
    border-color: var(--accent);
    color: var(--accent);
}
.eg-btn-sm.eg-danger:hover {
    background: var(--accent);
    color: var(--paper);
}

/* Compact inline form (single-row on desktop) */
.eg-inline-form {
    background: var(--highlight);
    border: 1px solid var(--ink);
    padding: 14px 16px;
    margin: 14px 0;
}
.eg-inline-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
}
@media (min-width: 720px) {
    .eg-inline-form-grid {
        grid-template-columns: 1fr 200px auto;
        gap: 12px;
    }
}

/* Filter row */
.eg-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 0;
}

/* Entity card list (jornadas, eventos) — info-dense */
.eg-entity-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
}
@media (min-width: 900px) {
    .eg-entity-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
.eg-entity-card {
    background: var(--paper);
    border: 1px solid rgba(26,24,21,0.18);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eg-entity-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.eg-entity-title {
    font-family: var(--headline);
    font-size: 18px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.eg-entity-id {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.5;
}
.eg-entity-meta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-top: -4px;
}
.eg-entity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(26,24,21,0.08);
    border-bottom: 1px solid rgba(26,24,21,0.08);
}
.eg-entity-stat-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 3px;
}
.eg-entity-stat-value {
    font-family: var(--headline);
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.eg-entity-stat-value.eg-pos { color: #1f6f2e; }
.eg-entity-stat-value.eg-neg { color: var(--accent); }

.eg-entity-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.eg-entity-action {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid rgba(26,24,21,0.2);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    min-width: 70px;
}
.eg-entity-action:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.eg-entity-action.eg-action-danger:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Totals summary card */
.eg-totals-card {
    margin-top: 16px;
    background: var(--ink);
    color: var(--paper);
    padding: 18px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 720px) {
    .eg-totals-card {
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 22px 24px;
    }
}
.eg-totals-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.7;
}
.eg-totals-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ============================================================
   ADMIN PANEL — section + card grid
   ============================================================ */
.eg-admin-section-head {
    padding: 24px 16px 8px;
    max-width: 1100px;
    margin: 0 auto;
}
.eg-admin-section-head .eg-admin-section-title {
    font-family: var(--headline);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 4px;
}
.eg-admin-section-head .eg-admin-section-sub {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
}

.eg-admin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px 24px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 720px) {
    .eg-admin-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}
@media (min-width: 1024px) {
    .eg-admin-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eg-admin-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid rgba(26,24,21,0.18);
    padding: 16px 18px 18px;
    text-decoration: none;
    transition: transform 0.14s ease-out, box-shadow 0.14s ease-out, border-color 0.14s;
    min-height: 100%;
}
.eg-admin-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -6px rgba(26,24,21,0.14);
    border-color: var(--ink);
}
.eg-admin-card.eg-featured {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.eg-admin-card.eg-accent-card {
    border-color: var(--accent);
    border-width: 1px;
}
.eg-admin-card-eyebrow {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eg-admin-card.eg-featured .eg-admin-card-eyebrow { opacity: 0.95; }
.eg-admin-card-pill {
    background: var(--accent);
    color: var(--paper);
    padding: 2px 6px;
    font-size: 8px;
    letter-spacing: 0.2em;
    font-weight: 700;
}
.eg-admin-card.eg-featured .eg-admin-card-pill {
    background: var(--paper);
    color: var(--ink);
}
.eg-admin-card-title {
    font-family: var(--headline);
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px;
}
.eg-admin-card-body {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.85;
    flex: 1;
}
.eg-admin-card.eg-featured .eg-admin-card-body { opacity: 0.75; }
.eg-admin-card-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}
.eg-admin-card-list li {
    padding: 3px 0;
    border-bottom: 1px solid rgba(26,24,21,0.06);
}
.eg-admin-card.eg-featured .eg-admin-card-list li { border-bottom-color: rgba(244,239,230,0.1); }
.eg-admin-card-list li:last-child { border-bottom: none; }
.eg-admin-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.eg-admin-card-tag {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid rgba(26,24,21,0.25);
    color: var(--ink);
    opacity: 0.7;
}
.eg-admin-card.eg-featured .eg-admin-card-tag {
    border-color: rgba(244,239,230,0.3);
    color: var(--paper);
    opacity: 0.7;
}
.eg-admin-card-cta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(26,24,21,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.eg-admin-card.eg-featured .eg-admin-card-cta {
    color: var(--accent);
    border-top-color: rgba(244,239,230,0.18);
}

/* ============================================================
   AUTH / FORM PAGES (login, password, register)
   ============================================================ */
.eg-auth-shell {
    max-width: 460px;
    margin: 0 auto;
    padding: 32px 16px 60px;
}
.eg-auth-eyebrow {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}
.eg-auth-title {
    font-family: var(--headline);
    font-size: 32px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 10px;
}
.eg-auth-sub {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7;
    margin: 0 0 28px;
}
.eg-auth-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 28px 24px;
    margin-top: 8px;
}
.eg-form-row {
    margin-bottom: 18px;
}
.eg-form-row:last-child {
    margin-bottom: 0;
}
.eg-form-row-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 540px) {
    .eg-form-row-2col {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}
.eg-form-label {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 6px;
}
.eg-form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid rgba(26,24,21,0.25);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.3;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.eg-form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.eg-form-hint {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.5;
}
.eg-form-link {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.eg-form-link:hover {
    border-bottom-color: var(--accent);
}
.eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.eg-btn-primary {
    background: var(--accent);
    color: var(--paper);
}
.eg-btn-primary:hover {
    background: var(--ink);
}
.eg-btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.eg-btn-outline:hover {
    background: var(--ink);
    color: var(--paper);
}
.eg-btn-arrow {
    font-family: var(--mono);
    opacity: 0.85;
}
.eg-auth-divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid rgba(26,24,21,0.12);
}
.eg-auth-foot {
    text-align: center;
    margin-top: 18px;
}
.eg-auth-foot-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}
.eg-auth-info {
    background: var(--highlight);
    border: 1px solid rgba(26,24,21,0.12);
    padding: 12px 14px;
    margin-bottom: 18px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.85;
}
.eg-auth-info strong { font-weight: 600; }

/* ============================================================
   ACCOUNT — transaction list
   ============================================================ */
.eg-trx-list {
    display: flex;
    flex-direction: column;
}
.eg-trx-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(26,24,21,0.06);
}
.eg-trx-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eg-trx-date {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.eg-trx-kind {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}
.eg-trx-kind-premio { color: var(--accent); opacity: 1; font-weight: 700; }
.eg-trx-kind-apuesta { opacity: 0.55; }
.eg-trx-kind-credit  { color: #2c7a3a; opacity: 1; font-weight: 600; }
.eg-trx-kind-debit   { color: var(--accent); opacity: 0.85; }
.eg-trx-kind-manual  { color: #6d4c41; opacity: 0.85; }
.eg-trx-kind-pote    { opacity: 0.45; }
.eg-trx-kind-comision{ opacity: 0.45; }
.eg-trx-kind-acumulado { opacity: 0.45; }
.eg-trx-kind-ajuste  { opacity: 0.55; }

.eg-trx-comment {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink);
    min-width: 0;
}
.eg-trx-bet {
    font-family: var(--mono);
    font-size: 10px;
    opacity: 0.45;
    margin-left: 4px;
}

.eg-trx-amount {
    font-family: var(--headline);
    font-size: 17px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 80px;
}
.eg-trx-pos { color: #1f6f2e; }
.eg-trx-neg { color: var(--ink); opacity: 0.85; }

@media (min-width: 720px) {
    .eg-trx-list {
        max-width: 1100px;
        margin: 0 auto;
    }
    .eg-trx-row {
        grid-template-columns: 120px 1fr 140px;
        padding: 14px 20px;
    }
    .eg-trx-amount { font-size: 20px; min-width: 110px; }
    .eg-trx-comment { font-size: 14px; }
}

/* ============================================================
   PUBLIC HOMEPAGE — desktop magazine layout
   ============================================================ */
.eg-home-shell {
    max-width: 1100px;
    margin: 0 auto;
}

.eg-lead-article {
    border-bottom: 1px solid var(--ink);
    display: grid;
    grid-template-columns: 1fr;
}
.eg-lead-image {
    position: relative;
    display: block;
    overflow: hidden;
}
.eg-lead-image img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    filter: saturate(0.85);
}
.eg-lead-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent);
    color: var(--paper);
    padding: 4px 8px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}
.eg-lead-content {
    padding: 20px 16px 24px;
}
.eg-lead-title {
    color: inherit;
    text-decoration: none;
    display: block;
}
.eg-lead-title h1 {
    font-family: var(--headline);
    font-size: 28px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: pretty;
}

.eg-news-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
}

.eg-invite {
    background: var(--ink);
    color: var(--paper);
}
.eg-invite-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 16px;
}

/* Desktop: side-by-side lead, 2-col news, masthead/footer breathing */
@media (min-width: 900px) {
    .eg-masthead {
        padding-left: max(16px, calc((100vw - 1100px) / 2));
        padding-right: max(16px, calc((100vw - 1100px) / 2));
    }
    .eg-footer {
        padding-left: max(16px, calc((100vw - 1100px) / 2));
        padding-right: max(16px, calc((100vw - 1100px) / 2));
    }
    .eg-lead-article {
        grid-template-columns: 1.4fr 1fr;
        align-items: stretch;
    }
    .eg-lead-image img {
        height: 100%;
        min-height: 320px;
        max-height: 480px;
    }
    .eg-lead-content {
        padding: 32px 32px 32px 28px;
        align-self: center;
    }
    .eg-lead-title h1 {
        font-size: 36px;
        line-height: 1.06;
    }
    /* Transform horizontal news rows into magazine-style cards on desktop */
    .eg-news-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px 16px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    .eg-news-grid .eg-news-row {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;  /* override mobile */
        padding: 0;
        gap: 0;
        border: 1px solid rgba(26,24,21,0.1);
        border-bottom: 1px solid rgba(26,24,21,0.1);
        background: var(--paper);
        overflow: hidden;
        transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    }
    .eg-news-grid .eg-news-row:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px -8px rgba(26,24,21,0.18);
    }
    .eg-news-grid .eg-news-row img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        flex-shrink: 0;
        order: -1;  /* image on top of card even when last in DOM */
    }
    .eg-news-grid .eg-news-row > div {
        padding: 16px 18px 20px;
    }
    .eg-news-grid .eg-news-row .eg-news-title {
        font-size: 18px;
        line-height: 1.22;
    }
    .eg-invite-inner {
        padding: 48px 32px;
    }
    .eg-invite-inner h2 {
        font-size: 36px !important;
        max-width: 760px;
    }
}
@media (min-width: 1200px) {
    .eg-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eg-news-section { background: var(--paper); }

/* News rows are CARDS by default (image on top, text below).
   Desktop overrides above add 2/3-col grid. */
.eg-news-row {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid rgba(26,24,21,0.1);
    overflow: hidden;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.eg-news-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px -8px rgba(26,24,21,0.18);
}
.eg-news-row img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    filter: saturate(0.85);
    order: -1;  /* image on top regardless of DOM order */
    flex-shrink: 0;
}
.eg-news-row > div {
    padding: 14px 16px 18px;
}

.eg-news-kicker {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}
.eg-news-kicker .eg-time { opacity: 0.6; color: var(--ink); }
.eg-news-title {
    font-family: var(--headline);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}
.eg-news-source {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    opacity: 0.45;
}