/* Scratch n Win body content. Figma node 2775:2125. */

/* 2775:2149 title: Inter 600 14/32, white, centered, width 288. */
.sw-title {
  width: 288px;
  margin: 0;
  font: 600 14px/32px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
}

/* 2775:2268 grid: 288x288, padding 12, clip, 3x3, no gap -> cells (288 - 24) / 3 = 88. */
.sw-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 88px);
  grid-template-rows: repeat(3, 88px);
  flex-shrink: 0;
  width: 288px;
  height: 288px;
  padding: 12px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.sw-grid.is-scratching { touch-action: none; }

/* Grid plate f1d6a5f7 (914x988): left -2.78%, top -3.44%, width 106.25%, height 106.41% of the
   288 box -> x -8.006, y -9.907, 306 x 306.46 (Figma stretches the image to this box). */
.sw-grid__plate {
  position: absolute;
  left: -2.78%;
  top: -3.44%;
  width: 106.25%;
  height: 106.41%;
  max-width: none;
  pointer-events: none;
}

.sw-cell {
  position: relative; /* paints above the absolutely positioned plate (DOM order) */
  width: 88px;
  height: 88px;
}

/* Revealed card background: card-front-frame.png filling the 88x88 cell (cover of a 1:1
   image; opaque bounds x 3.52..84.04, y 4.4..84.48 at 88px). */
.sw-cell__front {
  position: absolute;
  inset: 0;
  width: 88px;
  height: 88px;
  object-fit: cover;
  pointer-events: none;
}
/* Prize icon centred in the front frame's inner panel. The light inner border sits at
   x 17.4..17.8 / 70.4..70.8 and y 17.2..17.8 / 72.2..72.8 (measured on the 400px image,
   scaled to 88): panel interior x 17.8..70.4, y 17.8..72.2, centre (44.1, 45.0).
   40px icon: left 44.1 - 20 = 24.1, top 45.0 - 20 = 25. */
.sw-cell__icon {
  position: absolute;
  left: 24.1px;
  top: 25px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  pointer-events: none;
}
/* Prize value pill as a corner badge over the frame: placeholder, data-todo="design".
   Requested centre (88 - 14, 88 - 12) = (74, 76), but the pill is ~42-44px wide ("SC 40"),
   so a centre at x 74 would reach x ~96 and leave the 88px cell box. The pill keeps the
   requested vertical centre (y 76, i.e. 67..85) and is pushed left just enough to stay inside
   the box: right edge on the cell's right edge (right: 0). Later in DOM order than the frame
   and icon, so it paints above both. */
.sw-cell__pill {
  position: absolute;
  right: 0;
  top: 76px;
  transform: translateY(-50%);
  padding: 1px 6px;
  border: 1px solid rgba(105, 126, 190, 0.3);
  border-radius: 8px;
  background: rgba(8, 12, 25, 0.8);
  font: 700 10px/14px 'Inter', sans-serif;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

/* Single foil scratch sheet over the 264x264 cell area (one sheet, no cell seams). Corner
   radius 4px, concentric with the grid plate (derivation in scratch.js, FOIL_RADIUS). */
.sw-foil-wrap {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  width: 264px;
  height: 264px;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
}
.sw-foil {
  display: block;
  width: 264px;
  height: 264px;
}

/* Win triple highlight (Smartico: slight scale-up): placeholder, data-todo="design".
   1.08 grows a cell by 3.52px per side, inside the 12px grid padding, so nothing is clipped. */
.sw-cell { transition: transform 200ms ease-out; }
.sw-cell.is-match { z-index: 1; transform: scale(1.08); }


/* Silent-prize overlay over the grid for 1.5s: placeholder, data-todo="design". */
.sw-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(11, 13, 20, 0.75);
}
.sw-overlay__icon { width: 96px; height: 96px; object-fit: cover; }

/* 2778:2435 Possible Prizes block: column, gap 8, width 288. */
.sw-prizes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 288px;
}
/* 2777:2397 label: Inter 600 14/20, centered. */
.sw-prizes__label {
  margin: 0;
  font: 600 14px/20px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
}
/* 2777:2372 strip: 288 x 68, padding 9, r14, fill rgba(8,12,25,.62),
   1px rgba(105,126,190,.14) stroke. Figma strokes are drawn inside and do not take layout
   space, so the CSS border (which does) is offset by padding 9 - 1 = 8:
   1 + 8 + 50 (36 image + 14 label) + 8 + 1 = 68, items start 9px from the outer edge. */
.sw-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 288px;
  height: 68px;
  padding: 8px;
  border: 1px solid rgba(105, 126, 190, 0.14);
  border-radius: 14px;
  background: rgba(8, 12, 25, 0.62);
}
.sw-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sw-strip__item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
/* Inter 700 10/14 white. */
.sw-strip__item span {
  font: 700 10px/14px 'Inter', sans-serif;
  color: #fff;
  white-space: nowrap;
}

/* Stage: fixed 288 x 392 (grid 288 + gap 8 + Possible Prizes 96) hosting either the game
   area or the result card, so the body stays 528 and the modal 638.43 in every state. */
.sw-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  width: 288px;
  height: 392px;
  overflow: hidden;
}

/* Result card: placeholder, data-todo="design". Centred vertically in the stage.
   Worst case: art 120 + 8 + icon 96 + 8 + name 28 + 8 + message 3 x 20 = 328 <= 392. */
.sw-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 288px;
  height: 392px;
}
.sw-result__art { width: 120px; height: 120px; object-fit: contain; }
.sw-result__art[hidden] { display: none; }
/* Result scale-in (brief 11; since brief 13 it animates the WIN prize icon, art slots are
   empty): scale 0 -> 1 around the centre over 400ms ease-out, opacity 0 -> 1 over the first
   150ms, starting when the card is inserted. Nothing else animates. */
.sw-result__art.is-entering,
.sw-result__icon.is-entering {
  transform-origin: 50% 50%;
  animation:
    sw-art-scale 400ms cubic-bezier(0.22, 1, 0.36, 1) both,
    sw-art-fade 150ms linear both;
}
@keyframes sw-art-scale { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sw-art-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sw-result__art.is-entering,
  .sw-result__icon.is-entering { animation: none; }
}
.sw-result__icon { width: 96px; height: 96px; object-fit: cover; }
.sw-result__title {
  margin: 0;
  max-width: 288px;
  font: 700 20px/28px 'Inter', sans-serif;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-result__message {
  margin: 0;
  max-width: 288px;
  font: 400 14px/20px 'Inter', sans-serif;
  color: #c4c4c4;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Touch cursor: the coin follows the finger while scratching (desktop uses a CSS cursor set
   from scratch.js). Same 74x74 size as the cursor image. */
.sw-cursor {
  position: fixed;
  z-index: 200;
  width: 74px;
  height: 74px;
  pointer-events: none;
}
.sw-cursor[hidden] { display: none; }

/* Sunburst behind the win prize icon (WIN card and silent overlay): placeholder,
   data-todo="design". 240x240 centred on the icon, 12 rays of 15deg alternating with 15deg
   gaps, radial mask fading to transparent at 50% of the radius (60px) so it never reaches the
   title or CTA; the stage / grid clip anything outside 288x392. */
.sw-iconwrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-iconwrap > img { position: relative; z-index: 1; }
.sw-sunburst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(227, 179, 65, 0.35) 0deg 15deg, transparent 15deg 30deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, transparent 50%);
  mask-image: radial-gradient(circle closest-side, #000 0%, transparent 50%);
  animation:
    sw-sunburst-spin 12s linear infinite,
    sw-sunburst-in 300ms linear both;
}
@keyframes sw-sunburst-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sw-sunburst-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sw-sunburst { animation: none; }
}