/* styles.css - basic starter styles for whoWinsComingSoon */
/* Minimal reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

/* Fluid, accessible base font size */
html {
  font-size: clamp(14px, 2.5vw, 18px);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height: 1.4;
  background: #1b202d;
  color: #222;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Full-bleed screenshot: make the image span the viewport width and stay centered
   Use 100vw so the image matches the viewport width on most devices. The
   translate trick centers the image and avoids a horizontal scrollbar when
   it's inside a constrained container. */
.screenshot {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Prevent horizontal scrollbar caused by 100vw when scrollbars are present */
html, body {
  overflow-x: hidden;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

/* Small utility */
.center { text-align: center; }

/* Responsive tweaks */
@media (max-width: 600px) {
  /* Slightly reduce line-height on very small screens */
  body { line-height: 1.35; }
}

@media (min-width: 961px) {
  /* A bit more breathing room on large screens */
}