/* scratch-win-v3.css — Scratch & Win underwater/gold redesign (2026-07-28, design final).
   Shell mirrors Lucky Draw v3: ≥980 centered 400px panel · <980 bottom sheet.
   Close ✕ = .sc3-close, member of the modal-close-unify.css roster (32px spec). */

/* ── shell ─────────────────────────────────────────────────────── */
html body #modal-scratch.modal-backdrop {
  background: rgba(4, 8, 12, .8) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 210 !important;
}
html body #modal-scratch .modal {
  background:
    linear-gradient(180deg, rgba(9, 38, 50, .85), rgba(4, 14, 22, .94)),
    url('../img/bg/underwater-modal.jpg') center / cover no-repeat !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .65) !important;
  position: relative !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* mobile-phase1 .modal{align-items:flex-end} would right-collapse children */
  justify-content: flex-start !important;
  color: #fff;
}
@media (max-width: 979px) {
  html body #modal-scratch.modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  html body #modal-scratch .modal {
    width: 100% !important; max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important; border-bottom: none !important;
    max-height: 92vh !important; margin: 0 !important;
  }
}
@media (min-width: 980px) {
  html body #modal-scratch.modal-backdrop { align-items: center !important; padding: 24px !important; }
  html body #modal-scratch .modal {
    width: 100% !important; max-width: 400px !important;
    border-radius: 18px !important; margin: auto !important; max-height: 92vh !important;
  }
}

/* ── header ────────────────────────────────────────────────────── */
#modal-scratch .sc3-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; flex: 0 0 auto; }
#modal-scratch .sc3-badge {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-6deg);
  color: #6B4A08;  /* ticket glyph (inline SVG — Tabler font icons are banned: prod font subset) */
  background: radial-gradient(circle at 32% 28%, #FFE082, #F5C842 45%, #8A6410);
  border: 1px solid rgba(255, 240, 184, .55);
  box-shadow: 0 0 14px rgba(245, 200, 66, .45), inset 0 -2px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .5);
}
#modal-scratch .sc3-title {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fz-white, #fff); line-height: 1;
  text-shadow: 0 1px 12px rgba(245, 200, 66, .35);
}
#modal-scratch .sc3-sub { font-size: 11.5px; color: var(--fz-text-3, #6E7B88); margin-top: 3px; }

/* ── golden dashed treasure ticket ─────────────────────────────── */
#modal-scratch .sc3-ticket {
  position: relative; overflow: hidden; flex: 0 0 auto;
  margin: 14px 18px 0; border-radius: 16px; padding: 16px 14px 14px;
  border: 1px dashed rgba(245, 200, 66, .5);
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(41, 182, 232, .16), transparent 55%),
    rgba(8, 28, 38, .62);
}
#modal-scratch .sc3-beam {
  position: absolute; top: -30%; left: 18%; width: 34px; height: 160%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 75%);
  transform: skewX(-13deg); filter: blur(6px); pointer-events: none;
  animation: sc3Breathe 8s ease-in-out infinite;
}
#modal-scratch .sc3-bub { position: absolute; border-radius: 50%; border: 1px solid rgba(41, 182, 232, .35); pointer-events: none; }
#modal-scratch .sc3-bub1 { width: 7px; height: 7px; right: 14%; top: 18px; animation: sc3Breathe 5s ease-in-out infinite; }
#modal-scratch .sc3-bub2 { width: 4px; height: 4px; right: 9%; top: 44px; animation: sc3Breathe 6.4s ease-in-out 1.2s infinite; }
@keyframes sc3Breathe { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* jackpot hero */
#modal-scratch .sc3-jack { position: relative; text-align: center; padding: 2px 0 12px; }
#modal-scratch .sc3-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245, 200, 66, .75);
}
#modal-scratch .sc3-line { display: block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 200, 66, .55)); }
#modal-scratch .sc3-eyebrow > .sc3-line:last-child { background: linear-gradient(270deg, transparent, rgba(245, 200, 66, .55)); }
#modal-scratch .sc3-max {
  margin-top: 5px;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 34px; font-weight: 800; line-height: 1.05;
  background: linear-gradient(180deg, #FFF3C4 10%, #F5C842 55%, #C79517);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(245, 200, 66, .45));
}
#modal-scratch .sc3-eyebrow2 {
  margin-top: 5px;
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 200, 66, .8);
}

/* ── 3×3 coin grid ─────────────────────────────────────────────── */
#modal-scratch .sc3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#modal-scratch .sc3-coin {
  position: relative; aspect-ratio: 1 / 1; border-radius: 50%;
  padding: 0; cursor: pointer; border: none;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s ease;
  /* coin rim: alternating highlight/shadow conic = struck metal */
  background: conic-gradient(from 210deg, #8A6410, #FFE9A8 14%, #C79517 30%, #8A6410 46%, #FFF3C4 60%, #B8860B 76%, #8A6410);
}
#modal-scratch .sc3-coin::before {  /* outer gold aura */
  content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245, 200, 66, .55), rgba(245, 200, 66, .12) 60%, transparent 75%);
  filter: blur(5px);
}
#modal-scratch .sc3-coin:not(.sc3-open):hover { transform: rotate(0deg) scale(1.07); }
#modal-scratch .sc3-coin:not(.sc3-open):active { transform: rotate(0deg) scale(.97); }
#modal-scratch .sc3-face {
  position: absolute; inset: 3px; border-radius: 50%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 32% 26%, #FFF3C4, #F5C842 42%, #C79517 72%, #9A7112);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -4px 7px rgba(90, 58, 6, .55);
}
#modal-scratch .sc3-face::after {  /* embossed dashed ring */
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px dashed rgba(122, 83, 8, .5); pointer-events: none;
}
#modal-scratch .sc3-shine {  /* sweeping shimmer, clipped by the circular face */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: sc3Shimmer 3s linear infinite;
}
@keyframes sc3Shimmer { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
#modal-scratch .sc3-emboss {
  color: #7A5308; line-height: 0;
  text-shadow: 0 1px 0 rgba(255, 243, 196, .8), 0 -1px 1px rgba(90, 58, 6, .6);
  filter: drop-shadow(0 1px 0 rgba(255, 243, 196, .8));
}
#modal-scratch .sc3-face-t {
  font-size: 7px; font-weight: 800; letter-spacing: .18em; color: #7A5308;
  text-shadow: 0 1px 0 rgba(255, 243, 196, .7);
}

/* revealed: deep-sea groove slot */
#modal-scratch .sc3-coin.sc3-open {
  cursor: default;
  background: radial-gradient(circle at 50% 32%, #0E3A46, #07242E 80%);
  border: 1px solid rgba(41, 182, 232, .35);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5);
  animation: fzCoinFlip .4s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform: rotate(0deg);
}
#modal-scratch .sc3-coin.sc3-open::before { display: none; }
#modal-scratch .sc3-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%;
  color: #BFEBFF;
}
#modal-scratch .sc3-slot-t {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 15px; font-weight: 800; line-height: 1;
  text-shadow: 0 0 10px rgba(41, 182, 232, .45);
}
@media (max-width: 359px) { #modal-scratch .sc3-slot-t { font-size: 13px; } }
@keyframes fzCoinFlip {
  0% { transform: rotateY(90deg) scale(.8); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
/* the 3 matching cells on a win: green groove + breathing glow */
#modal-scratch .sc3-coin.sc3-hit {
  background: radial-gradient(circle at 50% 32%, #14513A, #0A2A1E);
  border: 1px solid rgba(30, 213, 113, .55);
  animation: fzWinPulse 1.6s ease-in-out infinite;
}
#modal-scratch .sc3-coin.sc3-hit .sc3-slot { color: #7CF3B4; }
#modal-scratch .sc3-coin.sc3-hit .sc3-slot-t { text-shadow: 0 0 12px rgba(30, 213, 113, .75); }
@keyframes fzWinPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(30, 213, 113, .45), inset 0 3px 8px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 30px rgba(30, 213, 113, .8), inset 0 3px 8px rgba(0, 0, 0, .5); }
}

/* ── count / button / info bar ─────────────────────────────────── */
#modal-scratch .sc3-count {
  text-align: center; margin: 10px 0 8px; flex: 0 0 auto;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; color: var(--fz-gold, #F5C842); letter-spacing: .02em;
}
#modal-scratch .sc3-btn {
  height: 50px; border-radius: 14px; margin: 0 18px 10px; border: none; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fz-font-body, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
  color: var(--fz-on-gold, #14110A);
  background: linear-gradient(180deg, #FFE082 0%, #F5C842 45%, #C08E1A 100%);
  box-shadow: 0 6px 18px rgba(245, 200, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
#modal-scratch .sc3-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245, 200, 66, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
#modal-scratch .sc3-btn:not(:disabled):active { transform: translateY(0) scale(.985); }
#modal-scratch .sc3-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(1); }
#modal-scratch .sc3-loader { animation: sc3Rot 1s linear infinite; }
@keyframes sc3Rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#modal-scratch .sc3-info {
  margin: 0 18px 18px; padding: 10px 12px; border-radius: 10px; flex: 0 0 auto;
  background: var(--fz-cyan-soft, rgba(41, 182, 232, .12));
  border: 1px solid rgba(41, 182, 232, .25);
  color: #9AD8F0; font-size: 10.5px; line-height: 1.55; text-align: center;
}

/* ── result card ───────────────────────────────────────────────── */
#modal-scratch .sc3-win-ov {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 12, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  cursor: pointer;
  animation: sc3OvIn .25s ease-out;
}
@keyframes sc3OvIn { from { opacity: 0; } to { opacity: 1; } }
#modal-scratch .sc3-win-card {
  position: relative; overflow: hidden; text-align: center;
  width: min(320px, 84%); padding: 24px 20px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 213, 113, .16), rgba(8, 28, 38, .85));
  border: 1px solid rgba(30, 213, 113, .45);
  box-shadow: 0 0 34px rgba(30, 213, 113, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
  animation: sc3CardIn .3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes sc3CardIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
#modal-scratch .sc3-win-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: sc3Sheen 2.2s linear infinite;
}
@keyframes sc3Sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#modal-scratch .sc3-win-ico { font-size: 34px; line-height: 1; }
#modal-scratch .sc3-win-eyebrow {
  margin-top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #4EF09A;
}
#modal-scratch .sc3-win-amt {
  margin-top: 6px;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 28px; font-weight: 800; color: #fff; line-height: 1.1;
  text-shadow: 0 0 18px rgba(30, 213, 113, .55);
}
#modal-scratch .sc3-win-sub { margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .65); }
#modal-scratch .sc3-win-tap { margin-top: 14px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
#modal-scratch .sc3-win-card.sc3-win-none {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(8, 20, 28, .88));
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 0 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#modal-scratch .sc3-win-card.sc3-win-none .sc3-win-eyebrow { color: var(--fz-text-2, #A6B0BC); }
#modal-scratch .sc3-win-card.sc3-win-none .sc3-win-amt { text-shadow: none; }

/* ── loading / disabled states ─────────────────────────────────── */
#modal-scratch .sc3-loading { padding: 48px 24px; text-align: center; color: rgba(255, 255, 255, .4); font-size: 13px; }
#modal-scratch .sc3-off { padding: 34px 24px 60px; text-align: center; }
#modal-scratch .sc3-off-ico { font-size: 40px; margin-bottom: 10px; opacity: .4; }
#modal-scratch .sc3-off-t { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
#modal-scratch .sc3-off-s { font-size: 12px; color: rgba(255, 255, 255, .3); }

/* reduced motion: kill decorative loops, keep the flip itself */
@media (prefers-reduced-motion: reduce) {
  #modal-scratch .sc3-shine, #modal-scratch .sc3-beam, #modal-scratch .sc3-bub,
  #modal-scratch .sc3-win-card::after, #modal-scratch .sc3-coin.sc3-hit { animation: none !important; }
}