/* ==========================================================================
   Raspadinha: lista (pages/raspadinhas.php), jogo (pages/raspadinha.php)
   e carteira (pages/carteira.php). Cores vem de tokens.css.
   ========================================================================== */

.rs-wrap { max-width: var(--r-max); margin: 0 auto; padding: 14px 14px 32px; }
.rs-wrap--wide { max-width: 980px; }

.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 14px; flex-wrap: wrap; }
.rs-head h1 { margin: 0; font-size: 24px; font-weight: 900; color: var(--r-ink); letter-spacing: -.01em; }
.rs-head p { margin: 2px 0 0; font-size: 13px; color: var(--r-ink-2); }

/* saldo */
.rs-balance {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 12px; border: 1px solid var(--r-line); border-radius: 999px; background: var(--r-bg);
}
.rs-balance small { display: block; font-size: 10px; font-weight: 700; color: var(--r-ink-3); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.rs-balance strong { display: block; font-size: 15px; font-weight: 900; color: var(--r-ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.rs-balance a, .rs-balance button {
    display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
    border: 0; border-radius: 999px; background: var(--r-red); color: #fff;
    font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.rs-balance a:hover, .rs-balance button:hover { background: var(--r-red-dark); color: #fff; }

/* botoes */
.rs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-radius);
    background: var(--r-red); color: #fff; font: inherit; font-size: 15px; font-weight: 800;
    text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s var(--r-ease);
}
.rs-btn:hover { background: var(--r-red-dark); color: #fff; }
.rs-btn:active { transform: scale(.98); }
.rs-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.rs-btn--block { width: 100%; }
.rs-btn--ghost { background: var(--r-panel); color: var(--r-ink); }
.rs-btn--ghost:hover { background: var(--r-line); color: var(--r-ink); }
.rs-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: var(--r-radius-sm); }

/* filtros */
.rs-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--r-panel); }
.rs-tabs button {
    height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
    color: var(--r-ink-2); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.rs-tabs button.is-active { background: var(--r-bg); color: var(--r-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

/* ---------- cards da lista ---------- */
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rs-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--r-line); border-radius: var(--r-radius); background: var(--r-bg);
    color: var(--r-ink); text-decoration: none; transition: border-color .15s, transform .2s var(--r-ease), box-shadow .2s;
}
.rs-card:hover { color: var(--r-ink); border-color: var(--r-red-line); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.rs-card__media { position: relative; aspect-ratio: 2 / 1; background: var(--r-panel); }
.rs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-card__tag {
    position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 9px; display: inline-flex; align-items: center;
    border-radius: 999px; background: var(--r-red); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.rs-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px; }
.rs-card__body h3 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.3; }
.rs-card__body p { margin: 0; font-size: 13px; color: var(--r-ink-2); line-height: 1.45; }
.rs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.rs-card__price small { display: block; font-size: 11px; color: var(--r-ink-3); }
.rs-card__price strong { font-size: 18px; font-weight: 900; color: var(--r-red); }
.rs-card__go {
    display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--r-radius-sm);
    background: var(--r-red); color: #fff; font-size: 14px; font-weight: 800;
}

/* secao na pagina inicial */
.rs-home .rs-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- jogo ---------- */
.rs-game { display: grid; gap: 14px; }
.rs-game__banner { border-radius: var(--r-radius); overflow: hidden; aspect-ratio: 2.4 / 1; background: var(--r-panel); }
.rs-game__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-game__title h1 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.25; }
.rs-game__title p { margin: 4px 0 0; font-size: 13px; color: var(--r-ink-2); }

.rs-board {
    position: relative; padding: 12px; border-radius: 16px;
    background: linear-gradient(145deg, var(--r-red), var(--r-red-dark));
    box-shadow: 0 10px 30px rgba(var(--r-red-rgb), .25);
}
.rs-board__inner { position: relative; border-radius: 10px; overflow: hidden; background: var(--r-bg); aspect-ratio: 1 / 1; }
.rs-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; padding: 8px; }
.rs-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 8px; background: var(--r-panel); text-align: center; padding: 4px; min-width: 0;
}
.rs-cell img { width: 52%; max-height: 58%; object-fit: contain; }
.rs-cell span { font-size: 11px; font-weight: 800; color: var(--r-ink); line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rs-cell.is-win { background: var(--r-green-soft); outline: 2px solid var(--r-green); animation: rsWin .8s ease-in-out 3; }
@keyframes rsWin { 50% { transform: scale(1.06); } }

.rs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.rs-canvas.is-off { pointer-events: none; }

.rs-cover {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(145deg, #2b2b30, #111114); color: #fff; text-align: center; padding: 20px;
}
.rs-cover i { font-size: 40px; color: var(--r-red); }
.rs-cover strong { font-size: 18px; font-weight: 900; }
.rs-cover span { font-size: 13px; color: rgba(255, 255, 255, .7); }

.rs-result { min-height: 24px; text-align: center; font-size: 15px; font-weight: 800; }
.rs-result.is-win { color: var(--r-green); }
.rs-result.is-lose { color: var(--r-ink-2); }

.rs-actions { display: grid; gap: 8px; }
.rs-note { margin: 0; font-size: 12px; color: var(--r-ink-3); text-align: center; }

/* tabela de premios e chances */
.rs-panel { border: 1px solid var(--r-line); border-radius: var(--r-radius); background: var(--r-bg); padding: 14px; }
.rs-panel h2 { margin: 0 0 10px; font-size: 16px; font-weight: 900; }
.rs-panel p { margin: 0 0 10px; font-size: 13px; color: var(--r-ink-2); line-height: 1.5; }
.rs-odds { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-odds th { text-align: left; font-size: 11px; font-weight: 800; color: var(--r-ink-3); text-transform: uppercase; padding: 0 0 6px; }
.rs-odds td { padding: 8px 0; border-top: 1px solid var(--r-line); vertical-align: middle; }
.rs-odds td:last-child, .rs-odds th:last-child { text-align: right; white-space: nowrap; }
.rs-odds__prize { display: flex; align-items: center; gap: 8px; }
.rs-odds__prize img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--r-panel); }

/* ---------- carteira ---------- */
.rs-wallet { display: grid; gap: 14px; }
.rs-wallet__balance { padding: 18px; border-radius: var(--r-radius); background: var(--r-ink); color: #fff; }
.rs-wallet__balance small { font-size: 12px; color: rgba(255, 255, 255, .65); font-weight: 700; }
.rs-wallet__balance strong { display: block; font-size: 32px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--r-panel); }
.rs-seg button { height: 40px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 14px; font-weight: 800; color: var(--r-ink-2); cursor: pointer; }
.rs-seg button.is-active { background: var(--r-bg); color: var(--r-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.rs-field { display: grid; gap: 6px; margin-bottom: 12px; }
.rs-field > span { font-size: 13px; font-weight: 800; color: var(--r-ink); }
.rs-field input, .rs-field select {
    height: 46px; padding: 0 12px; border: 1px solid var(--r-line-strong); border-radius: var(--r-radius-sm);
    background: var(--r-bg); color: var(--r-ink); font: inherit; font-size: 15px;
}
.rs-field input:focus, .rs-field select:focus { outline: none; border-color: var(--r-red); box-shadow: 0 0 0 3px rgba(var(--r-red-rgb), .15); }
.rs-field small { font-size: 12px; color: var(--r-ink-3); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rs-chips button {
    height: 34px; padding: 0 14px; border: 1px solid var(--r-line-strong); border-radius: 999px; background: var(--r-bg);
    font: inherit; font-size: 13px; font-weight: 800; color: var(--r-ink); cursor: pointer;
}
.rs-chips button:hover { border-color: var(--r-red); color: var(--r-red); }

.rs-pix { display: grid; gap: 12px; justify-items: center; text-align: center; }
.rs-pix img { width: 220px; height: 220px; border: 1px solid var(--r-line); border-radius: 12px; padding: 8px; background: #fff; }
.rs-pix textarea {
    width: 100%; min-height: 76px; padding: 10px; border: 1px solid var(--r-line-strong); border-radius: var(--r-radius-sm);
    font-family: ui-monospace, Consolas, monospace; font-size: 12px; resize: none; color: var(--r-ink); background: var(--r-panel);
}
.rs-pix__wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--r-ink-2); }
.rs-pix__wait::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--r-line-strong); border-top-color: var(--r-red); border-radius: 50%; animation: rsSpin .8s linear infinite; }
@keyframes rsSpin { to { transform: rotate(360deg); } }

.rs-history { list-style: none; margin: 0; padding: 0; }
.rs-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--r-line); font-size: 13px; }
.rs-history li[hidden] { display: none; }
.rs-history__info { min-width: 0; }
.rs-history__info b, .rs-history__info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-history em { font-style: normal; }
.rs-history li:first-child { border-top: 0; }
.rs-history b { display: block; font-size: 13px; color: var(--r-ink); }
.rs-history small { color: var(--r-ink-3); }
.rs-history .is-in { color: var(--r-green); font-weight: 900; white-space: nowrap; }
.rs-history .is-out { color: var(--r-ink); font-weight: 900; white-space: nowrap; }
.rs-pill { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: middle; }
.rs-pill--wait { background: var(--r-amber-soft); color: var(--r-amber); }
.rs-pill--no { background: var(--r-panel); color: var(--r-ink-3); }

.rs-empty { padding: 40px 16px; text-align: center; color: var(--r-ink-2); }
.rs-empty i { font-size: 34px; color: var(--r-ink-3); }
.rs-empty h2 { margin: 8px 0 4px; font-size: 17px; font-weight: 900; color: var(--r-ink); }

@media (min-width: 860px) {
    .rs-game { grid-template-columns: 1fr 340px; align-items: start; }
    .rs-game__main { display: grid; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .rs-card, .rs-btn { transition: none; }
    .rs-cell.is-win { animation: none; }
}