/* VoltDrive Hub: energy scratch ticket, shared by page and welcome modal. */
.scratch-host { color: #edf7ff; }
.scratch-host--page { background: #071420; }
.scratch-host--page .scratch-screen {
  width: min(100%, 480px); min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(#07142045, #071420b8), url('/assets/byd/scratch-energy-20261027/scratch-stage.jpg') center / cover, #071420;
  box-shadow: 0 0 0 1px #4964794d;
}
.scratch-host--modal { background: #020a14c7; backdrop-filter: blur(9px); }
.scratch-host--modal .scratch-screen { width: min(100%, 390px); }
.scratch-host .scratch-topbar {
  margin: -18px -16px 18px; padding: 15px 12px; color: #f2f9ff;
  background: #091b2bed; border-bottom: 1px solid #39566f;
}
.scratch-host .scratch-topbar h1 { color: #f0f8ff; font-size: 18px; }
.scratch-host .scratch-topbar p { color: #bfd1df; font-size: 11px; }
.scratch-host .scratch-topbar .icon-btn { color: #def4ff; background: #15364c; border: 1px solid #47667b; border-radius: 8px; }
.scratch-host .scratch-panel {
  display: grid; gap: 14px; width: 100%; padding: 20px 18px; color: #eff8ff;
  background: linear-gradient(#091c2ed9, #081925f2), url('/assets/byd/scratch-energy-20261027/scratch-stage.jpg') center / cover;
  border: 1px solid #6d91a9; border-radius: 20px;
  box-shadow: inset 0 1px #c6eaff2b, 0 20px 60px #0005;
}
.scratch-host--page .scratch-panel { padding: 18px 16px; background: #081a2be0; }
.scratch-host .scratch-header { align-items: flex-start; }
.scratch-host .scratch-header span { color: #9edbf0; font-size: 9px; letter-spacing: .14em; line-height: 1.6; }
.scratch-host .scratch-header h1 { color: #f1faff; font-size: 25px; font-weight: 600; letter-spacing: -.03em; }
.scratch-host .scratch-close { width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; color: #e5f5ff; background: #17354b; border: 1px solid #587b94; border-radius: 9px; }
.scratch-host .scratch-art-heading { display: grid; gap: 5px; padding: 0 2px 2px; }
.scratch-host .scratch-art-heading span { color: #9cd9f0; font-size: 9px; font-weight: 600; letter-spacing: .14em; line-height: 1.5; }
.scratch-host .scratch-art-heading h2 { margin: 0; color: #f0faff; font-size: 29px; font-weight: 600; letter-spacing: -.04em; line-height: 1.2; }
.scratch-host .scratch-summary { min-height: 60px; margin: 0; padding: 10px 13px; color: #f0f8ff; background: linear-gradient(110deg, #183b50db, #0d2638ed); border: 1px solid #496e87; border-radius: 11px; box-shadow: inset 0 1px #b8e4ff12; }
.scratch-host .scratch-chances { color: #d5e8f5; font-size: 12px; }
.scratch-host .scratch-chances strong { color: #9ee9ff; font-size: 30px; font-weight: 600; }
.scratch-host .scratch-history-toggle { min-height: 42px; padding: 8px 11px; color: #e5f5ff; background: #17384e; border: 1px solid #53758c; border-radius: 7px; font-size: 11px; font-weight: 600; }
.scratch-host .scratch-status { min-height: 38px; margin: 0; padding: 10px 12px; color: #d8eafa; background: #0f2b40e8; border: 1px solid #385d76; border-radius: 9px; font-size: 12px; line-height: 1.6; }
.scratch-host [data-scratch-quota] { min-height: 0; padding: 0 2px; color: #bdcfdd; background: transparent; border: 0; font-size: 10px; line-height: 1.6; }
.scratch-host .scratch-ticket {
  min-height: 148px; aspect-ratio: 1.9; border: 1px solid #a8cedf; border-radius: 12px;
  background: url('/assets/byd/scratch-energy-20261027/scratch-prize.jpg') center / 100% 100%, #091e30;
  box-shadow: 0 0 0 3px #4b708734, 0 12px 26px #0006;
}
.scratch-host .scratch-prize { gap: 7px; padding: 18px; }
.scratch-host .scratch-prize > span { color: #b9e6fa; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.scratch-host .scratch-prize > strong { color: #f5fcff; font-size: clamp(25px, 7.4vw, 37px); font-weight: 700; letter-spacing: -.04em; text-shadow: 0 2px 12px #7bdfff5c; }
.scratch-host .scratch-prize > small { color: #c4e7f7; font-size: 10px; }
.scratch-host .scratch-mask { cursor: grab; }
.scratch-host .scratch-mask:active { cursor: grabbing; }
.scratch-host .scratch-ticket-label {
  inset: auto; left: 50%; bottom: 12px; width: max-content; max-width: calc(100% - 32px);
  transform: translateX(-50%); padding: 6px 12px; color: #ecfaff; background: #0a2439ed;
  border: 1px solid #9bdffb99; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.4; text-shadow: none;
}
.scratch-host .scratch-ticket-overline { position: absolute; top: 10px; left: 12px; z-index: 1; padding: 3px 6px; color: #153348; background: #e7f5fbcc; border-radius: 4px; font-size: 7px; font-weight: 700; letter-spacing: .13em; pointer-events: none; }
.scratch-host .scratch-swipe-hint { margin: -3px 0 0; color: #b8d5e6; font-size: 11px; line-height: 1.5; text-align: center; }
.scratch-host .scratch-hand-guide { inset: 0; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; animation: none; filter: none; }
.scratch-host .scratch-guide-track { position: absolute; top: 47%; left: 24%; right: 24%; height: 0; border-top: 2px dashed #143d5bba; filter: drop-shadow(0 1px 0 #e8faffcc); }
.scratch-host .scratch-guide-finger { position: absolute; top: calc(46% - 8px); left: calc(50% - 27px); display: block; width: 54px; height: 66px; filter: drop-shadow(0 4px 4px #08203999); animation: vdh-scratch-finger-swipe 2.15s ease-in-out infinite; }
.scratch-host .scratch-guide-finger svg { display: block; width: 100%; height: 100%; }
.scratch-host .scratch-guide-ring { position: absolute; top: -6px; left: 12px; width: 24px; height: 24px; border: 2px solid #5bd9ff; border-radius: 50%; background: #a3ecff24; box-shadow: 0 0 0 5px #92e8ff33; animation: vdh-scratch-touch 2.15s ease-in-out infinite; }
.scratch-host .scratch-ticket.is-revealed { border-color: #c4f1ff; box-shadow: 0 0 0 3px #7ddcff2e, 0 0 25px #45b4e42b, 0 12px 26px #0005; }
.scratch-host .scratch-ticket.is-revealed .scratch-prize { animation: vdh-scratch-prize .45s ease-out; }
.scratch-host .scratch-actions button { min-height: 48px; padding: 12px 16px; border-radius: 9px; font-size: 14px; font-weight: 700; }
.scratch-host .scratch-primary { color: #08273a; background: linear-gradient(130deg, #eefaff, #8edbf6); border: 1px solid #d2f2ff; box-shadow: inset 0 1px #fff9, 0 7px 14px #00101e4d; }
.scratch-host .scratch-primary:disabled { color: #c0d3e1; background: #26475c; border-color: #51738b; box-shadow: none; opacity: 1; }
.scratch-host .scratch-history.is-open { margin-top: 0; padding-top: 12px; border-color: #3c5e75; }
.scratch-host .scratch-history-list > li { border-color: #345268; }
.scratch-host .scratch-history-list strong { color: #def6ff; }
.scratch-host .scratch-history-list :is(span, small) { color: #b9cddc; font-size: 10px; }
.scratch-host .scratch-history-list .scratch-history-badge { color: #b2eaff; background: #163e55; border: 1px solid #416a83; }
.scratch-host .scratch-history-pages { color: #d3e9f7; }
.scratch-host .scratch-history-pages button { color: #d9f1ff; background: #15384e; border-color: #4e748d; border-radius: 7px; }
.scratch-host button:focus-visible, .scratch-host a:focus-visible { outline-color: #93e8ff; }
@keyframes vdh-scratch-finger-swipe { 0%, 100% { transform: translateX(-34px) rotate(-8deg); } 45%, 55% { transform: translateX(34px) rotate(9deg); } }
@keyframes vdh-scratch-touch { 0%, 100% { opacity: .6; transform: scale(.85); } 45%, 55% { opacity: 1; transform: scale(1.1); } }
@keyframes vdh-scratch-prize { from { transform: scale(.94); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 360px) {
  .scratch-host--page .scratch-screen { padding-inline: 13px; }
  .scratch-host .scratch-topbar { margin-inline: -13px; }
  .scratch-host .scratch-panel, .scratch-host--page .scratch-panel { padding: 15px 12px; gap: 12px; }
  .scratch-host .scratch-art-heading h2 { font-size: 26px; }
  .scratch-host .scratch-guide-finger { width: 48px; height: 60px; left: calc(50% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .scratch-host .scratch-hand-guide:not([hidden]) { display: block !important; }
  .scratch-host .scratch-guide-finger, .scratch-host .scratch-guide-ring { animation: none !important; transform: none; }
}