.scratch-page { max-width: 920px; margin: 0 auto; padding: 110px 20px 110px; color: #f8fafc; }
.scratch-back { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 20px; border: 0; background: none; color: #7dd3fc; font: inherit; font-size: 13px; cursor: pointer; }
.scratch-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.scratch-heading h1 { font-size: clamp(22px, 5vw, 30px); line-height: 1.2; margin-bottom: 6px; }
.scratch-heading p { color: #94a3b8; font-size: 13px; }
.scratch-demo { flex-shrink: 0; border: 1px solid #24516a; border-radius: 20px; padding: 6px 9px; color: #7dd3fc; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.scratch-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.scratch-play-area { min-width: 0; }
.scratch-board { width: 100%; max-width: 420px; aspect-ratio: 1; position: relative; margin: 0 auto; border: 1px solid #334155; border-radius: 18px; background: #0b1423; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.scratch-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px; }
.scratch-cell { min-width: 0; border-radius: 11px; border: 1px solid #263449; background: linear-gradient(145deg, #152438, #0b1423); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.scratch-cell img { width: 70%; height: 62%; object-fit: contain; pointer-events: none; user-select: none; }
.scratch-cell span { color: #e2e8f0; font-size: clamp(10px, 2.7vw, 13px); font-weight: 800; }
.scratch-cell.is-winner { border-color: #38bdf8; background: #0c3650; box-shadow: inset 0 0 18px #0ea5e93b; animation: scratch-winner 1s ease-in-out 3; }
@keyframes scratch-winner { 50% { box-shadow: inset 0 0 28px #38bdf880; } }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; touch-action: none; cursor: crosshair; transition: opacity .35s ease; }
.scratch-board.is-revealed .scratch-canvas { opacity: 0; pointer-events: none; }
.scratch-gate { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 25px; background: linear-gradient(#07111d55, #07111ddd); backdrop-filter: blur(1px); }
.scratch-gate > i { font-size: 64px; color: #f8fafc; filter: drop-shadow(0 0 20px #38bdf850); }
.scratch-gate strong { font-size: clamp(20px, 5vw, 25px); }
.scratch-gate p { color: #cbd5e1; font-size: 13px; }
.scratch-page.is-guest .scratch-board { border-color: #1e293b; background: #0b1423; }
.scratch-page.is-guest .scratch-canvas, .scratch-page.is-guest .scratch-grid { visibility: hidden; pointer-events: none; }
.scratch-page.is-guest .scratch-gate { gap: 18px; background: #0b1423; backdrop-filter: none; }
.scratch-page.is-guest .scratch-gate > i { font-size: 76px; line-height: 1; color: #38bdf8; }
.scratch-page.is-guest .scratch-gate strong { font-size: clamp(20px, 5vw, 24px); }
.scratch-register { min-width: 128px; min-height: 42px; padding: 10px 24px; border: 1px solid #38bdf8; border-radius: 9px; background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.scratch-page.is-guest .scratch-instruction { margin: 24px 0 4px; color: #7dd3fc; font-size: 13px; }
.scratch-login-hint { margin: 0 0 16px; color: #94a3b8; text-align: center; font-size: 12px; }
.scratch-page.is-guest .scratch-note { display: none; }
.scratch-instruction { color: #94a3b8; text-align: center; font-size: 12px; margin: 12px 0; min-height: 18px; }
.scratch-instruction button { border: 0; background: none; color: #7dd3fc; text-decoration: underline; font: inherit; cursor: pointer; }
.scratch-buy { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; border: 1px solid #38bdf8; border-radius: 13px; background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 5px 20px #0ea5e926; }
.scratch-buy-price { padding: 7px 11px; border-radius: 7px; background: #071a2b; font-size: 14px; }
.scratch-buy:disabled { opacity: .55; cursor: default; }
.scratch-tools { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; margin-top: 9px; }
.scratch-tools button { min-height: 46px; border: 1px solid #27364b; border-radius: 12px; background: #192435; color: #e2e8f0; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.scratch-tools button[aria-pressed="true"] { color: #7dd3fc; border-color: #38bdf8; background: #0c3046; }
.scratch-tools .scratch-fast { color: #38bdf8; font-size: 20px; }
.scratch-note { font-size: 11px; color: #64748b; text-align: center; margin: 10px 0; }
.scratch-prizes h2 { margin: 0 0 16px; font-size: 20px; }
.scratch-prize-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scratch-prize { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 8px; border: 1px solid #253347; border-radius: 16px; background: radial-gradient(ellipse at bottom, #0ea5e91c, transparent 75%), #111c2b; }
.scratch-prize img { width: 100%; max-width: 100px; height: 72px; object-fit: contain; }
.scratch-prize strong { font-size: clamp(12px, 3.3vw, 15px); overflow-wrap: anywhere; }
.scratch-prize small { color: #94a3b8; font-size: 11px; }
.scratch-result { position: fixed; inset: 0; z-index: 1800; display: grid; place-items: center; padding: 20px; background: #0009; backdrop-filter: blur(5px); overflow-y: auto; }
.scratch-result-card { position: relative; width: min(100%, 340px); border: 0; background: transparent; text-align: center; outline: none; }
.scratch-result-card h2 { position: relative; top: 52px; z-index: 2; color: #ffda00; font-size: 26px; font-weight: 900; margin: 0 0 6px; }
.scratch-result-subtitle { position: relative; top: 52px; z-index: 2; color: #fff; font-size: 15px; font-weight: 700; }
.scratch-win-stage { position: relative; width: min(75vw, 300px); height: min(75vw, 300px); margin: -25px auto -45px; }
.scratch-win-animation { position: absolute; inset: 0; width: 100%; height: 100%; }
.scratch-win-animation:empty::before { content: '\2605'; display: block; color: #ffda00; font-size: 100px; padding-top: 100px; }
.scratch-result-payout { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8); display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 190px; max-width: 100%; min-height: 44px; padding: 7px 12px; border: 1px solid #fcd51680; border-radius: 9px; background: #0f0f0f99; backdrop-filter: blur(10px); box-shadow: 0 4px 24px #0007; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.scratch-result-payout.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.scratch-result-payout img { width: 56px; height: 30px; object-fit: contain; }
.scratch-result-amount { color: #ffda00; font-size: 20px; font-weight: 800; white-space: nowrap; }
.scratch-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1801; pointer-events: none; }
.scratch-page button:focus-visible, .scratch-result button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 3px; }
body.scratch-result-open { overflow: hidden; }
body.scratch-game-open .hero-section, body.scratch-game-open .winners-section,
body.scratch-game-open .raspadinhas-showcase, body.scratch-game-open .footer { display: none; }
@media (max-width: 768px) {
 .scratch-page { max-width: 460px; padding: 100px 16px 100px; }
 .scratch-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
 .scratch-heading { flex-wrap: nowrap; margin-bottom: 14px; }
 .scratch-heading > div { min-width: 0; }
 .scratch-heading h1 { font-size: 20px; overflow-wrap: anywhere; }
 .scratch-heading p { display: none; }
 .scratch-demo { font-size: 8px; padding: 6px 7px; }
 body:has(.header.with-banner) .scratch-page { padding-top: 120px; }
 .scratch-board { max-width: 360px; }
 .scratch-prize img { height: 80px; }
 .scratch-back { margin-bottom: 14px; }
}
@media (max-width: 360px) {
 .scratch-page { padding-left: 12px; padding-right: 12px; }
 .scratch-grid { padding: 6px; gap: 4px; }
 .scratch-result { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
 .scratch-cell.is-winner { animation: none; }
 .scratch-canvas { transition: none; }
}