/* Shared modal shell. Geometry from Figma node 2775:2125 (Scratch n Win, 320 wide).
   All numbers are taken from the Figma design context; derivations are in comments. */

.sm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  overflow: auto;
  padding: 16px 0;
  background: rgba(0, 0, 0, 0.6); /* not from Figma, data-todo="design" */
}

.sm-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 320px;
  margin: auto; /* centers in both axes, still scrollable when taller than the viewport */
  font-family: 'Inter', sans-serif;
  color: #fff;
}
.sm-modal:focus { outline: none; }

/* Header 2775:2132: width 320, aspect 368/127 -> height 320 * 127 / 368 = 110.4348. */
.sm-header {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  /* Explicit height instead of aspect-ratio: 368/127 computed through aspect-ratio snapped to
     110.4219 or 110.4297 depending on the modal's sub-pixel offset. */
  height: 110.4348px;
  overflow: hidden;
}

/* 2775:2133 Background: top 40, height 87 (bottom 127 is clipped by the header at 110.43). */
.sm-header__bg,
.sm-header__gradient {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  height: 87px;
  border-radius: 24px 24px 0 0;
}
.sm-header__bg { background: #171a24; }

/* 2775:2134 Gradient: SVG data URI copied verbatim from the Figma design context. */
.sm-header__gradient {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 320 87' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(4.3897e-15 13.904 -24.877 -9.0231e-15 160 -41.061)'><stop stop-color='rgba(11,27,82,1)' offset='0'/><stop stop-color='rgba(11,27,82,0)' offset='1'/></radialGradient></defs></svg>");
}

/* 2775:2135 SVG-Pattern: 320x75 at top 40, top radius 24, clip.
   Figma wraps it in `rotate(180deg)` + `scaleY(-1)`. rotate(180) = scale(-1,-1), so the net
   transform is scale(-1, 1): a HORIZONTAL mirror (a vertical one would move the 24px radii
   to the bottom edge). */
.sm-header__pattern {
  position: absolute;
  left: 0;
  top: 40px;
  width: 320px;
  height: 75px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  transform: scaleX(-1);
}
/* 2775:2136: 363.892 x 108, centered horizontally, top 0 (SVG carries its own 0.35 opacity). */
.sm-header__pattern img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 363.892px;
  height: 108px;
  max-width: none;
  transform: translateX(-50%);
}

/* 2775:2141 Vault box: 320 x 110.897, centered at header 50% + 8.28px
   -> top = 110.4348 / 2 + 8.28 - 110.897 / 2 = 8.0489.
   Inside, Figma exports the image as left 95.25%, width -89.66% (negative = mirrored), height
   97.55%, top 0.12%, all inside the same net horizontal mirror as the pattern. Two mirrors
   cancel, so the image renders unmirrored:
     width  = 0.8966 * 320     = 286.912  (286.912 / 108.180 = 2.652 = 2042 / 770, no distortion)
     height = 0.9755 * 110.897 = 108.180
     right edge in mirrored space = 0.9525 * 320 = 304.8 -> left after un-mirroring = 320 - 304.8 = 15.2
     top    = 0.0012 * 110.897 = 0.1331
   Rendered: x 15.2 .. 302.11, y 8.18 .. 116.36 in the header (bottom clipped at 110.43).
   This matches the Figma screenshot (coins span ~x18..302, logo top ~y11 incl. the 21px canvas
   padding * 0.1405 scale). The brief's first guess (width 320) does not match the screenshot. */
.sm-header__art {
  position: absolute;
  left: 0;
  top: 8.0489px;
  width: 320px;
  height: 110.897px;
  pointer-events: none;
}
.sm-header__art img {
  position: absolute;
  left: 15.2px;
  top: 0.1331px;
  width: 286.912px;
  height: 108.18px;
  max-width: none;
}

/* 2775:2255 plate 28x28 (#252730, r8) at top 0 right 0; 2775:2256 icon 18x18 at top 5 right 5.
   The plate is the button so the hit area is the full 28x28. */
.sm-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #252730;
  cursor: pointer;
}
.sm-close img {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
}

/* Body 2775:2143: column, gap 8, padding 0 16 16, bottom radius 24. */
.sm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 320px;
  padding: 0 16px 16px;
  border-radius: 0 0 24px 24px;
  position: relative; /* anchors the countdown */
  background: linear-gradient(to bottom, #171a24 0%, #11131c 62%, #0e1119 100%);
}

/* CTA 2775:2250: 288 x 44, #00A63E (green/600), 2px rgba(255,255,255,.2), r12, padding 8 16. */
.sm-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 288px;
  height: 44px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #00a63e;
  color: #fff;
  font: 700 14px/20px 'Inter', sans-serif;
  text-align: center;
  white-space: nowrap;
}
.sm-cta[hidden] { display: none; }
/* Disabled state is not designed: data-todo="design". */
.sm-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Availability 2775:2258: Inter 400 12/20 #c4c4c4, centered. */
.sm-availability {
  margin: 0;
  font: 400 12px/20px 'Inter', sans-serif;
  color: #c4c4c4;
  text-align: center;
  white-space: nowrap;
}
/* Countdown under the availability line: placeholder, data-todo="design". Absolutely placed
   in the body's 16px bottom padding so it never changes the modal height. */
.sm-countdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  font: 400 12px/16px 'Inter', sans-serif;
  color: #c4c4c4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sm-countdown[hidden] { display: none; }

.sm-message { margin: 0; width: 288px; font: 400 14px/20px 'Inter', sans-serif; color: #c4c4c4; text-align: center; }