* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* header bar height: shrinks on short screens to leave room for the game */
  --bar: clamp(40px, 8dvh, 60px);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgb(0, 96, 169);
  outline-offset: 2px;
}

body {
  font-family: "VT323", monospace;
  font-size: 30px;

  background-color: gainsboro;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  color: black;
}

h3 {
  font-weight: normal;

  margin-bottom: 6px;
}

ul {
  margin-left: 1rem;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.costco-red {
  color: rgb(227, 42, 54);
}

.costco-blue {
  color: rgb(0, 96, 169);
}

.hide {
  display: none;
}

.transparent-background {
  background-color: transparent;
  box-shadow: none;
}

#main-page {
  display: flex;
  flex-direction: column;

  /* the first screen is the whole game; anything after #main-page is below the fold */
  height: 100vh;
  height: 100dvh;
  min-height: 460px;
}

#site-header {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: gainsboro;
}

#header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: min(344px, 100% - 16px);

  border-bottom: 2px solid gray;
}

.title {
  font-size: var(--bar);
}

/* two-tone COSTCO|DLE while the h1 text stays one word; 6ch works because the font is monospace */
.brand-title {
  text-align: center;
  background: linear-gradient(90deg, rgb(227, 42, 54) 6ch, rgb(0, 96, 169) 6ch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info-title {
  font-size: calc(var(--bar) * 0.87);
}

#info-button {
  font-family: "VT323", monospace;
  font-size: calc(var(--bar) * 0.92);

  width: 30px;
  height: var(--bar);

  cursor: pointer;

  color: black;
  border: none;
  background: none;
}

#info-button,
#stat-button {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

#stat-button {
  font-size: 30px;

  width: 30px;
  height: var(--bar);

  cursor: pointer;

  border: none;
  background: none;
}

#site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  font-size: clamp(18px, 6.5vw, 24px);
  /* keep links near the game column on wide screens */
  padding: 2px max(0px, (100% - 600px) / 2);

  border-top: 2px solid gray;
  background-color: gainsboro;
}

#legal-links {
  font-size: 18px;
  width: 100%;
  padding-bottom: 4px;
  text-align: center;
}

.guide-updated {
  font-size: 18px;
  margin-top: 8px;
  color: dimgray;
}

#contact-email {
  font-size: 28px;
}

#database-link {
  margin-left: 12px;
}

#mode-link {
  margin-right: 12px;
}

.header-link {
  font-size: 44px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  color: black;
}

#guide-page {
  display: flex;
  flex: 1;
  justify-content: center;
}

/* Reading pages scroll the whole document; the header stays put for the way back */
#main-page:has(#guide-page) {
  height: auto;
  min-height: 100dvh;
}

#main-page:has(#guide-page) #site-header {
  position: sticky;
  z-index: 1;
  top: 0;
}

#guide-body {
  font-size: 20px;
  width: 600px;
  max-width: 100%;
  padding: 0 6px 16px;
}

#seo-content {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 2px solid gray;
}

/* Below-the-fold copy: wide responsive grid instead of the 350px game column */
#seo-content #guide-body {
  font-size: 22px;
  line-height: 1.25;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 40px;

  width: 100%;
  max-width: 1100px;
  padding: 0 16px 32px;
}

#seo-content .info-section:first-child {
  grid-column: 1 / -1;
}

#seo-content #guide-body h2 {
  font-size: 30px;
}

/* FAQ spans the row; each question + answer flows into its own column */
#seo-content .seo-faq {
  grid-column: 1 / -1;
  columns: 3 260px;
  column-gap: 40px;
}

#seo-content .seo-faq h2 {
  column-span: all;
}

#seo-content .seo-faq h3 {
  margin-top: 0;
  break-after: avoid;
}

#seo-content .seo-faq p {
  margin-bottom: 12px;
  break-inside: avoid;
}

#seo-content #legal-links {
  grid-column: 1 / -1;
  padding-top: 16px;
}

#legal-links [aria-current="page"] {
  text-decoration: none;
  color: dimgray;
}

#guide-body h1 {
  font-size: 34px;
  font-weight: normal;
  margin: 8px 0;
}

#guide-body h2 {
  font-size: 26px;
  font-weight: normal;
  margin-bottom: 6px;
  text-decoration: underline;
}

#guide-body ol {
  margin-left: 1.2rem;
}

.guide-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 3px;
}

#guide-cta {
  font-size: 26px;
  margin-top: 16px;
  text-align: center;
}

.mode-tag {
  font-size: 22px;
  letter-spacing: 6px;
  line-height: 1;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* Phones on their side: product card left, guesses right */
@media (orientation: landscape) and (max-height: 500px) {
  /* sizes here come from dvh, so let the page grow rather than overlap if it can't fit */
  #main-page {
    height: auto;
    min-height: 100dvh;
  }

  #game-container {
    flex: 1 0 auto;
    display: grid;
    grid-template-areas:
      "card stats"
      "card guesses";
    align-content: center;
    align-content: safe center;
    justify-content: center;
    column-gap: 24px;
  }

  #info-card {
    grid-area: card;
    align-self: center;
    margin: 0;
  }

  #image-container,
  #product-info {
    width: min(300px, 50vw - 48px);
  }

  #image-container {
    flex-basis: auto;
    height: clamp(64px, 100dvh - 200px, 300px);
  }

  #game-stats {
    grid-area: stats;
    justify-self: center;
  }

  #guesses-container {
    grid-area: guesses;
    width: min(324px, 50vw - 24px);
    height: clamp(200px, 100dvh - 150px, 275px);
  }
}