/* Four independent cards. The ordinary energy card keeps its existing art. */
.scratch-tier-list { display: grid; gap: 22px; margin: 26px 0 12px; }
.scratch-tier-card { --tier-ink: #5c2c1e; --tier-muted: #8a593f; --tier-edge: #e5ac70; --tier-light: #fff1df; --tier-button: #8f431f; overflow: hidden; border: 1px solid var(--tier-edge); border-radius: 22px; color: var(--tier-ink); background: var(--tier-light); box-shadow: 0 12px 32px #061b2b15, inset 0 1px 0 #ffffffbd; }
.scratch-tier-card--bronze, .scratch-host--bronze { --tier-art: url('/assets/byd/scratch-tiers-20261029/bronze.png'); --tier-ink: #552c20; --tier-muted: #895a41; --tier-edge: #dfa16b; --tier-light: #fff2e4; --tier-button: #9b4e25; --tier-halo: #f6c08a; }
.scratch-tier-card--silver, .scratch-host--silver { --tier-art: url('/assets/byd/scratch-tiers-20261029/silver.png'); --tier-ink: #213f5c; --tier-muted: #56748c; --tier-edge: #b4cee1; --tier-light: #edf7ff; --tier-button: #426682; --tier-halo: #c7e5fa; }
.scratch-tier-card--gold, .scratch-host--gold { --tier-art: url('/assets/byd/scratch-tiers-20261029/gold.png'); --tier-ink: #65480c; --tier-muted: #8e702a; --tier-edge: #e1bf65; --tier-light: #fff7d9; --tier-button: #8a641c; --tier-halo: #f4df8c; }
.scratch-tier-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 91px; padding: 18px 18px 16px; background: linear-gradient(125deg, #ffffffb3, #ffffff12 68%), linear-gradient(160deg, var(--tier-light), var(--tier-halo)); border-bottom: 1px solid color-mix(in srgb, var(--tier-edge), transparent 55%); }
.scratch-tier-eyebrow { display: block; margin-bottom: 6px; color: var(--tier-muted); font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.scratch-tier-card h2 { margin: 0; color: var(--tier-ink); font-size: 20px; font-weight: 850; line-height: 1.15; letter-spacing: -.035em; }
.scratch-tier-count { display: grid; justify-items: center; align-content: center; flex: 0 0 67px; min-height: 58px; padding: 5px 9px; border: 1px solid #ffffffcc; border-radius: 14px; background: #ffffff8c; box-shadow: inset 0 1px 0 #fff, 0 3px 10px #102b4310; }
.scratch-tier-count strong { color: var(--tier-ink); font-size: 25px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scratch-tier-count > span { margin-top: 3px; color: var(--tier-muted); font-size: 9px; font-weight: 700; }
.scratch-tier-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center; background: var(--tier-light, #f0f5f9); }
.scratch-tier-card > footer { display: grid; gap: 11px; padding: 15px 18px 18px; border-top: 1px solid color-mix(in srgb, var(--tier-edge), transparent 55%); background: linear-gradient(130deg, #ffffff9c, transparent), var(--tier-light); }
.scratch-tier-card footer p { min-height: 17px; margin: 0; color: var(--tier-muted); font-size: 11px; line-height: 1.5; }
.scratch-tier-card button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid var(--tier-button); border-radius: 12px; color: #fff; background: linear-gradient(160deg, #ffffff19, #00000012), var(--tier-button); box-shadow: inset 0 1px 0 #ffffff38, 0 4px 10px #251b1114; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.scratch-tier-card button:disabled { opacity: .53; box-shadow: none; cursor: default; }
.scratch-tier-card button:focus-visible { outline: 3px solid var(--tier-edge); outline-offset: 3px; }
.scratch-host--modal .scratch-tier-list { display: none; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) { color: var(--tier-ink); }
.scratch-host--modal:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) { background: #06131fd9; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-panel { width: min(100%, 390px); padding: 16px; color: var(--tier-ink); border-color: var(--tier-edge); border-radius: 24px; background: linear-gradient(150deg, #ffffffa8, transparent 50%), var(--tier-light); box-shadow: 0 20px 80px #0006, inset 0 1px 0 #fff; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-header h1 { color: var(--tier-ink); font-size: 22px; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-header span { color: var(--tier-muted); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-close { color: var(--tier-ink); background: #ffffffb8; }
.scratch-theme-art { margin: 15px 0 0; border: 1px solid var(--tier-edge); border-radius: 14px; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-summary { color: var(--tier-ink); background: #ffffffa6; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-chances strong, .scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-history-toggle { color: var(--tier-ink); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-status { color: var(--tier-muted); font-size: 12px; }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-ticket { border-color: var(--tier-edge); background: linear-gradient(130deg, #fff, var(--tier-light)); box-shadow: 0 3px 0 var(--tier-halo); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-prize { background: linear-gradient(135deg, #fff, var(--tier-light)); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-prize strong { color: var(--tier-ink); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-primary { color: #fff; border-color: var(--tier-button); background: linear-gradient(165deg, #ffffff26, transparent), var(--tier-button); }
.scratch-host:is(.scratch-host--bronze, .scratch-host--silver, .scratch-host--gold) .scratch-ticket-label { color: #fff; text-shadow: 0 1px 5px #281c19aa; }
.scratch-host--special.scratch-host--modal { align-items: start; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.scratch-host--special.scratch-host .scratch-summary, .scratch-host--special.scratch-host .scratch-status { border-color: var(--tier-edge); background: #ffffffa8; }
.scratch-host--special.scratch-host [data-scratch-quota] { background: transparent; border: 0; }
.scratch-host--special.scratch-host .scratch-chances, .scratch-host--special.scratch-host .scratch-prize > span, .scratch-host--special.scratch-host .scratch-prize > small { color: var(--tier-muted); }
.scratch-host--special.scratch-host .scratch-history-toggle { color: var(--tier-ink); border-color: var(--tier-edge); background: #ffffffa8; }
.scratch-host--special.scratch-host .scratch-history-list strong { color: var(--tier-ink); }
.scratch-host--special.scratch-host .scratch-history-list :is(span, small), .scratch-host--special.scratch-host .scratch-history-pages { color: var(--tier-muted); }
.scratch-host--special.scratch-host .scratch-history-list .scratch-history-badge, .scratch-host--special.scratch-host .scratch-history-pages button { color: var(--tier-ink); border-color: var(--tier-edge); background: #ffffffa8; }
@media (max-width: 360px) { .scratch-tier-card > header, .scratch-tier-card > footer { padding-inline: 14px; } .scratch-tier-card h2 { font-size: 18px; } .scratch-tier-count { flex-basis: 59px; } }
@media (prefers-reduced-motion: reduce) { .scratch-tier-card *, .scratch-theme-art { animation: none !important; transition: none !important; } }