/* pixelwrld-tile — STRUCTURE. Geometry measured from the source at 1440x900 (tile = one 217.5 x 205 grid cell).
   Colours resolve through tokens (pixelwrld-tile.tokens.css). Poses/positions live in each tile's JS spec;
   this file only sizes boxes and sets transform origins. Do not edit per project. */

.sp-pw-stage { position: relative; isolation: isolate; }
/* Page backdrop from the source: 4px dots on a 32px grid under a radial fade to the page colour. */
.sp-pw-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 50%, transparent 37.6%, var(--sp-pw-page, #f7f7f7) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23E5E5E5'%3E%3Crect width='4' height='4' x='14' y='14' rx='2'/%3E%3Crect width='4' height='4' x='14' y='46' rx='2'/%3E%3Crect width='4' height='4' x='46' y='14' rx='2'/%3E%3Crect width='4' height='4' x='46' y='46' rx='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 32px auto,
    var(--sp-pw-page, #f7f7f7);
}
.sp-pw-stage__blur {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: var(--sp-pw-scrim, rgba(247, 247, 247, .4));
  -webkit-backdrop-filter: blur(var(--sp-pw-scrim-blur, 7px)); backdrop-filter: blur(var(--sp-pw-scrim-blur, 7px));
}

.sp-pw-tile {
  position: relative; z-index: 0; width: 217.5px; height: 205px; flex: none;
  font-family: var(--sp-pw-font, Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif);
  color: var(--sp-pw-ink, #000); -webkit-font-smoothing: antialiased;
}
.sp-pw-tile.is-hovered { z-index: 2; }
.sp-pw-tile *, .sp-pw-tile *::before, .sp-pw-tile *::after { box-sizing: border-box; }
.sp-pw-tile [data-pw-layer] { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.sp-pw-tile [data-pw-origin="bottom"] { transform-origin: 50% 100%; }

/* visuals container sits above the icon row's stacking order but under the wrapper (z 1 vs 2) */
.sp-pw-tile__visuals { z-index: 1; pointer-events: none; }

/* hover target: the icon + label wrapper. Resized instantly by JS (rest box / grown hover box). */
.sp-pw-tile__hit { position: absolute; z-index: 3; display: block; cursor: pointer; text-decoration: none; color: inherit;
  border-radius: 24px; outline: none; }
.sp-pw-tile__hit:focus-visible { box-shadow: 0 0 0 2px var(--sp-pw-focus, #5d5d5d); }

.sp-pw-tile__icon { z-index: 2; width: 110px; height: 110px; pointer-events: none; }
.sp-pw-tile__icon > svg, .sp-pw-tile__icon > img { display: block; width: 100%; height: 100%; }

.sp-pw-tile__text {
  z-index: 1; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: var(--pw-text-w, 240px); text-align: center; transform-origin: 50% 50%;
}
.sp-pw-tile__title { margin: 0; height: var(--pw-title-h, 32px); display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--sp-pw-ink, #000); white-space: nowrap; }
.sp-pw-tile__desc { margin: 0; width: 100%; font-size: 16px; line-height: 19.2px; font-weight: 400; color: var(--sp-pw-ink, #000); }

.sp-pw-tile__pill {
  z-index: 2; pointer-events: none; height: 38.91px; border-radius: 30px; overflow: hidden;
  background: var(--sp-pw-pill, rgba(226, 226, 226, .8));
}
.sp-pw-tile__label {
  position: absolute; left: 16px; top: 10px; white-space: pre;
  font-size: 14px; line-height: 18.9px; font-weight: 500; letter-spacing: -0.02em; color: var(--sp-pw-ink, #000);
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
}
.sp-pw-tile__label + .sp-pw-tile__label { visibility: hidden; }
.sp-pw-tile.is-hovered .sp-pw-tile__label:first-child { visibility: hidden; }
.sp-pw-tile.is-hovered .sp-pw-tile__label + .sp-pw-tile__label { visibility: visible; }

/* framed screenshot card used by every tile's visuals: 1px hairline, inner top highlight, radius 30 */
.sp-pw-shot { overflow: visible; border-radius: 30px; box-shadow: 4px 12px 2px 0 rgba(0, 0, 0, calc(.1 * var(--pw-sh, 0))); }
.sp-pw-shot__face { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; border: 1px solid var(--sp-pw-hairline, rgba(0,0,0,.2));
  background-size: cover; background-position: center; }
.sp-pw-shot__face::after { content: ""; position: absolute; inset: 0; border-radius: 29px; box-shadow: inset 0 .5px 0 .5px rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) { .sp-pw-tile [data-pw-layer] { will-change: auto; } }
.sp-pw-shot__face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
/* Source screenshots that carry their own frame and fade: no border, no gloss. */
.sp-pw-shot__face--bare { border: 0; background: none; border-radius: 0; }
.sp-pw-shot__face--bare::after { content: none; }
.sp-pw-shot:has(> .sp-pw-shot__face--bare) { box-shadow: none; }