*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
[hidden] {
  display: none!important
}
html {
  height: -webkit-fill-available
}
body {
  font-family: 'Noto Sans TC','PingFang TC',sans-serif;
  background: #cf342c;
  color: #333;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent
}
#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #cf342c;
  color: #000;
  align-items: center;
  justify-content: center;
  text-align: center
}
@media screen and (orientation:landscape) {
  body {
    overflow: hidden
  }
  #app {
    display: none
  }
  #rotate-notice {
    display: flex
  }
}
.rotate-inner {
  padding: 24px;
  text-align: center
}
#rotate-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
  animation: logoShake .8s ease-in-out infinite
}
.rotate-inner p {
  font-size: 16px;
  color: #000
}
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  overflow: hidden;
  background: #cf342c;
  display: flex;
  flex-direction: column
}
#error,
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  background: #cf342c
}
body.skin-ab {
  background: #000
}
body.skin-ab #loading {
  position: relative;
  z-index: 0;
  background-color: #000;
  background-image: url('skins/AB_loading_bg.png');
  background-size: cover;
  background-position: center
}
body.skin-ab #loading::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(1.5px 1.5px at 8% 12%,#fff,transparent 70%),radial-gradient(2px 2px at 18% 28%,#fff,transparent 70%),radial-gradient(1px 1px at 27% 8%,#fff,transparent 70%),radial-gradient(2px 2px at 35% 45%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 44% 18%,#fff,transparent 70%),radial-gradient(1px 1px at 52% 33%,#fff,transparent 70%),radial-gradient(2px 2px at 61% 10%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 70% 24%,#fff,transparent 70%),radial-gradient(1px 1px at 78% 6%,#fff,transparent 70%),radial-gradient(2px 2px at 85% 20%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 92% 38%,#fff,transparent 70%),radial-gradient(1px 1px at 15% 52%,#fff,transparent 70%),radial-gradient(2px 2px at 30% 60%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 48% 55%,#fff,transparent 70%),radial-gradient(1px 1px at 65% 48%,#fff,transparent 70%),radial-gradient(2px 2px at 80% 58%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent 70%),radial-gradient(1px 1px at 40% 75%,#fff,transparent 70%),radial-gradient(2px 2px at 58% 68%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 88% 72%,#fff,transparent 70%);
  background-repeat: no-repeat;
  opacity: 0;
  animation: abLoadingStarsTwinkle 1s ease-in-out infinite;
  pointer-events: none
}
body.skin-ab #loading .ab-cloud {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none
}
body.skin-ab #loading .ab-cloud-004 {
  background-image: url('skins/AB_loading_L3_004.png');
  animation: abCloudDrift 18s ease-in-out infinite
}
body.skin-ab #loading .ab-cloud-005 {
  background-image: url('skins/AB_loading_L3_005.png');
  animation: abCloudDrift 21s ease-in-out infinite -4.6s
}
body.skin-ab #loading .ab-cloud-006 {
  background-image: url('skins/AB_loading_L3_006.png');
  animation: abCloudDrift 16.8s ease-in-out infinite -8.2s
}
body.skin-ab #loading .ab-cloud-007 {
  background-image: url('skins/AB_loading_L3_007.png');
  animation: abCloudDrift 22.4s ease-in-out infinite -3.2s
}
body.skin-ab #loading .ab-cloud-008 {
  background-image: url('skins/AB_loading_L4_008.png');
  animation: abCloudDrift 19.4s ease-in-out infinite -7s
}
body.skin-ab #loading .ab-cloud-009 {
  background-image: url('skins/AB_loading_L5_009.png');
  animation: abCloudDrift 20s ease-in-out infinite -10.4s
}
@keyframes abCloudDrift {
  0%,
  100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.08)
  }
}
body.skin-ab #loading .ab-sprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 74px;
  height: 98px;
  z-index: 1;
  background-image: url('skins/AB_loading_L6_sprite.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  animation: abSpriteHop .8s steps(1) infinite;
  pointer-events: none
}
@keyframes abSpriteHop {
  0% {
    background-position: 0 0
  }
  25% {
    background-position: -74px 0
  }
  50% {
    background-position: -148px 0
  }
  75% {
    background-position: -74px 0
  }
  100% {
    background-position: 0 0
  }
}
body.skin-ab #loading #loading-logo {
  margin-top: -200px
}
body.skin-ab #loading p {
  color: #fff;
  margin-top: 0
}
@keyframes abLoadingStarsTwinkle {
  0%,
  100% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
}
.ip-space {
  display: none
}
body.skin-ab .ip-space {
  display: block;
  width: 100%;
  aspect-ratio: 5/1;
  flex-shrink: 0
}
body.skin-ab #rate-card,
body.skin-ab .card-page {
  background: rgba(255,255,255,.1)
}
#loading p {
  font-size: 15px;
  color: #000
}
.sub-text {
  font-size: 13px;
  color: #999
}
.state-icon {
  font-size: 64px
}
#no-card {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 0;
  gap: 0;
  background: #fec804
}
#no-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center
}
#no-card-body p {
  font-size: 30px;
  font-weight: 700;
  color: #000
}
#no-card-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: logoShake .8s ease-in-out infinite
}
#rate-footer {
  flex-shrink: 0;
  background: #fec804
}
#loading-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: logoShake .8s ease-in-out infinite
}
@keyframes logoShake {
  0%,
  100% {
    transform: rotate(0)
  }
  20% {
    transform: rotate(-15deg)
  }
  40% {
    transform: rotate(15deg)
  }
  60% {
    transform: rotate(-10deg)
  }
  80% {
    transform: rotate(10deg)
  }
}
.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #ddd;
  border-top-color: #d42d25;
  border-radius: 50%;
  animation: spin .8s linear infinite
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
#error p {
  font-size: 15px;
  color: #a82020
}
#error button {
  background: #d42d25;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px
}
#game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden
}
#stats-bar {
  background: #000;
  padding: calc(8px + env(safe-area-inset-top,0px)) 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06)
}
#prize-list-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px
}
.prize-scroll-arrow {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  opacity: .8
}
#prize-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  height: 52px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none
}
#prize-list::-webkit-scrollbar {
  display: none
}
.prize-chip {
  background: #fec804;
  color: #000;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  white-space: nowrap
}
.prize-chip.won {
  background: #555;
  color: #aaa;
  text-decoration: line-through
}
#stats-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 14px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 5px
}
#card-area {
  flex: 1;
  overflow: hidden;
  padding: 10px 14px 10px;
  min-height: 0;
  position: relative
}
#pages-wrapper {
  height: 100%
}
.card-page {
  height: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  overflow: hidden
}
.slot-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 4px;
  align-content: start;
  scrollbar-width: none;
  -ms-overflow-style: none
}
.slot-grid::-webkit-scrollbar {
  display: none
}
.slot {
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #000
}
.slot-empty {
  aspect-ratio: 1
}
.slot-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px
}
.slot-prize {
  background: linear-gradient(135deg,#a82020,#d42d25)
}
.slot-no-prize {
  background: #ebebeb
}
.prize-name-display {
  font-weight: 700;
  color: #fff;
  text-align: center;
  word-break: break-all;
  line-height: 1.25;
  padding: 2px
}
.no-prize-mark {
  font-size: 48px;
  color: #d42d25;
  line-height: 1;
  margin-bottom: 14px
}
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 0
}
.slot.scratched.no-prize .slot-content {
  opacity: .55
}
#finish-overlay {
  position: absolute;
  inset: 0;
  background: rgba(212,45,37,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  z-index: 10;
  animation: pop-in .3s ease
}
#finish-overlay .finish-text {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  padding: 16px
}
@keyframes pop-in {
  from {
    transform: scale(.85);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}
#session-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #cf342c;
  display: flex;
  align-items: center;
  justify-content: center
}
#session-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}
#session-msg {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-align: center
}
#session-result-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: pre-line;
  line-height: 1.6;
  padding: 0 24px
}
#claw-done-overlay,
#claw-input-screen,
#claw-quota-screen,
#claw-topup-screen,
#scratch-password-screen {
  position: fixed;
  inset: 0;
  z-index: 1850;
  background: #fec804;
  display: flex;
  align-items: center;
  justify-content: center
}
.claw-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px
}
#scratch-password-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px
}
#scratch-password-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-align: center
}
#claw-input-field,
#scratch-password-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  outline: 0;
  margin-bottom: 12px;
  box-sizing: border-box
}
#scratch-password-input {
  letter-spacing: 4px
}
#claw-done-btn,
#claw-input-btn,
#claw-quota-btn,
#scratch-password-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer
}
#claw-topup-back {
  flex: 1;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  background: #06c755!important;
  color: #fff!important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none
}
#claw-topup-start {
  flex: 1;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
  background: #000!important;
  color: #fff!important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none
}
#claw-input-error,
#scratch-password-error {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #d42d25
}
#scratch-password-hint {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-align: center
}
#password-screen {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: #cf342c;
  display: flex;
  align-items: center;
  justify-content: center
}
#password-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px
}
#password-hint-text {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 20px;
  text-align: center
}
#password-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  outline: 0;
  margin-bottom: 12px
}
#password-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer
}
#password-error {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #d42d25
}
#password-bottom-hint {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-align: center
}
#cooldown-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center
}
#cooldown-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2)
}
#cooldown-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: logoShake .8s ease-in-out infinite
}
#cooldown-box p {
  font-size: 16px;
  font-weight: 700;
  color: #000
}
#cooldown-count {
  font-size: 28px;
  font-weight: 700;
  color: #d42d25
}
#nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px env(safe-area-inset-bottom,0);
  gap: 8px;
  flex-shrink: 0;
  background: #fec804
}
#ad-space {
  flex: 1;
  height: 85px;
  align-self: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center
}
#ad-space a {
  display: flex!important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%
}
#ad-space video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}
#modal {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  animation: modalIn .25s ease
}
@keyframes modalIn {
  from {
    transform: scale(.85);
    opacity: 0
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}
#modal-machine-name {
  font-size: 14px;
  font-weight: 700;
  color: #555;
  margin-bottom: 4px
}
#modal-machine-name[hidden] {
  display: none
}
#modal-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px
}
#modal-prize-image {
  margin-bottom: 12px
}
#modal-prize-image[hidden] {
  display: none
}
#modal-prize-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid #fec804;
  display: block;
  margin: 0 auto
}
#modal-prize-name {
  font-size: 20px;
  color: #d42d25;
  font-weight: 700;
  margin-bottom: 10px
}
#modal-message {
  font-size: 16px;
  color: #d42d25;
  font-weight: 700;
  margin-bottom: 8px;
  word-break: break-all
}
#modal-footer {
  font-size: 13px;
  color: #888;
  margin-bottom: 18px;
  line-height: 1.5
}
#modal-line-section {
  margin-bottom: 14px;
  text-align: center
}
#modal-line-section[hidden] {
  display: none
}
#modal-line-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}
#modal-line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 700;
  flex: 1
}
#modal-line-hint {
  font-size: 14px;
  color: #06c755;
  font-weight: 700;
  margin-top: 8px
}
.modal-line-finger {
  font-size: 28px;
  display: inline-block
}
.modal-line-finger-left {
  animation: fingerLeft 1s ease-in-out infinite
}
.modal-line-finger-right {
  animation: fingerRight 1s ease-in-out infinite
}
@keyframes fingerLeft {
  0%,
  100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(6px)
  }
}
@keyframes fingerRight {
  0%,
  100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(-6px)
  }
}
#modal-btn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  font-weight: 700
}
#modal-btn:active {
  background: #222
}
#modal-btn:disabled {
  background: #bbb;
  cursor: default
}
#scratch-confirm-canvas {
  display: block;
  margin: 0 auto 12px;
  width: 90px;
  height: 90px
}
#scratch-play-overlay {
  position: fixed;
  inset: 0;
  z-index: 1020;
  background: rgba(207,52,44,.5);
  display: flex;
  align-items: center;
  justify-content: center
}
#scratch-play-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%
}
#scratch-play-cd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  border-radius: 16px
}
.sp-cd-num {
  font-size: 96px;
  font-weight: 700;
  color: gold;
  text-shadow: -2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
  line-height: 1
}
@keyframes bounce-ud {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-6px)
  }
}
.sp-hint-bounce {
  animation: bounce-ud .8s ease-in-out infinite
}
@keyframes waveChar {
  0%,
  100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-7px)
  }
}
.wave-char {
  display: inline-block;
  animation: waveChar .9s ease-in-out infinite
}
.sp-hint-normal {
  font-size: 18px;
  font-weight: 700;
  color: gold;
  text-align: center;
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000
}
.sp-hint-countdown {
  font-size: 56px;
  font-weight: 700;
  color: gold;
  text-align: center;
  text-shadow: -2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
  line-height: 1
}
#scratch-play-hint {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center
}
#scratch-play-slot {
  position: relative;
  width: min(74vw,288px);
  height: min(74vw,288px)
}
#scratch-play-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: #fff!important
}
#scratch-play-content .prize-name-display {
  color: #d42d25
}
#scratch-play-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  border-radius: 0
}
#scratch-play-instant-btn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  margin-top: 24px
}
#scratch-play-instant-btn:active {
  background: #222
}
#scratch-play-instant-btn:disabled {
  background: #aaa;
  cursor: default;
  box-shadow: none
}
#scratch-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}
#scratch-confirm-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px 20px;
  max-width: 280px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  animation: modalIn .2s ease
}
#scratch-confirm-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px
}
#scratch-confirm-btns {
  display: flex;
  gap: 10px
}
#scratch-confirm-cancel {
  flex: 1;
  background: #eee;
  color: #333;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
#scratch-confirm-cancel:active {
  background: #ddd
}
#scratch-confirm-ok {
  flex: 1;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
#scratch-confirm-ok:active {
  background: #222
}
#close-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1030;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}
#close-confirm-box {
  background: #fff;
  border-radius: 16px;
  padding: 24px 20px 18px;
  max-width: 280px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  animation: modalIn .2s ease
}
#close-confirm-icon {
  font-size: 28px;
  margin-bottom: 10px
}
#close-confirm-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 18px
}
#close-confirm-btns {
  display: flex;
  gap: 10px
}
#close-confirm-cancel {
  flex: 1;
  background: #eee;
  color: #333;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
#close-confirm-cancel:active {
  background: #ddd
}
#close-confirm-ok {
  flex: 1;
  background: #d42d25;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
#close-confirm-ok:active {
  background: #b52020
}
#password-notice {
  background: #fec804;
  color: #000;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  text-align: center
}
#password-input-wrap {
  width: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden
}
#password-input {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  border-radius: 0;
  background: 0 0;
  margin-bottom: 0
}
#password-error {
  margin: 0;
  padding: 0 16px 10px;
  text-align: center
}
#error,
#loading {
  position: relative;
  z-index: 0;
  background-color: #cf342c
}
#password-screen,
#session-overlay {
  z-index: 0;
  background-color: #cf342c
}
#error::after,
#error::before,
#loading::after,
#loading::before,
#password-screen::after,
#password-screen::before,
#session-overlay::after,
#session-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center
}
#error::before,
#loading::before,
#password-screen::before,
#session-overlay::before {
  background-image: url('promo_bg_1.png');
  animation: promoBgFlip 1s steps(1) infinite
}
#error::after,
#loading::after,
#password-screen::after,
#session-overlay::after {
  background-image: url('promo_bg_2.png');
  animation: promoBgFlip 1s steps(1) infinite reverse
}
@keyframes promoBgFlip {
  0%,
  49% {
    opacity: 1
  }
  100%,
  50% {
    opacity: 0
  }
}
.confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none
}
#error,
#loading {
  justify-content: flex-start!important;
  padding-top: 40dvh
}
#password-screen,
#session-overlay {
  align-items: flex-start!important;
  justify-content: center!important;
  padding-top: 40dvh
}
#loading {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}
.ip-space {
  display: block;
  width: 100%;
  aspect-ratio: 5/1;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  overflow: hidden
}
.card-page {
  background: rgba(254,200,4,.5)
}
.ip-space::after,
.ip-space::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center
}
.ip-space::before {
  background-image: url('ip_bg_1.png');
  animation: promoBgFlip 1s steps(1) infinite
}
.ip-space::after {
  background-image: url('ip_bg_2.png');
  animation: promoBgFlip 1s steps(1) infinite reverse
}
#prize-list {
  height: auto;
  flex-wrap: nowrap;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  overflow: visible
}
.prize-chip {
  border-radius: 6px;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center
}
.slot {
  background: 0 0
}
#reveal-continue-bar {
  min-height: 62px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center
}
#reveal-continue-logo {
  max-height: 40px;
  max-width: 60%;
  object-fit: contain
}
#promo-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #fec804;
  font-weight: 700;
  padding-top: 4px
}
#modal-number {
  font-size: 20px;
  color: #d42d25;
  font-weight: 700;
  margin-bottom: 10px
}
#modal-btns {
  display: flex;
  gap: 10px;
  margin-top: 6px
}
#modal-next-btn,
#modal-reveal-btn {
  flex: 1;
  padding: 13px 6px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer
}
#modal-reveal-btn {
  background: #eee;
  color: #333
}
#modal-reveal-btn:active {
  background: #ddd
}
#modal-next-btn {
  background: #000;
  color: #fff
}
#modal-next-btn:active {
  background: #222
}
#reveal-continue-bar {
  flex-shrink: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom,0px))
}
#reveal-continue-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer
}
#reveal-continue-btn:active {
  background: #222
}