/* Bingo cards, shared by the card maker (print) and the game (play). Cards
   are always ink on white, in any site theme. Sizes are container units of
   the card, so one design fits a phone, a preview and a printed page. */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/fredoka-latin.9591efe1be62.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/fredoka-latin-ext.d3c5911bfd9a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.ink-red { --ink: #d23a2e; --ink-soft: #fde7e3; --ink-deep: #97211a; }
.ink-green { --ink: #1f8a55; --ink-soft: #e0f4e8; --ink-deep: #11603a; }
.ink-blue { --ink: #2a5fc4; --ink-soft: #e2ebfb; --ink-deep: #183f8c; }
.ink-purple { --ink: #7444b0; --ink-soft: #efe6fa; --ink-deep: #4f2a80; }
.ink-black { --ink: #26262b; --ink-soft: #ececec; --ink-deep: #000; }

.bingo-card {
  container-type: size;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(100cqw, 80cqh);
  height: min(100cqh, 125cqw);
  padding: 4.2cqw 4.2cqw 2.6cqw;
  border: 0.8cqw solid var(--ink);
  border-radius: 5cqw;
  background: #fff;
  color: #1d1b22;
  font-family: "Fredoka", "Arial Rounded MT Bold", Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Stitching just inside the edge. */
.bingo-card::before {
  content: "";
  position: absolute;
  inset: 1.5cqw;
  border: 0.45cqw dashed color-mix(in srgb, var(--ink) 38%, transparent);
  border-radius: 3.6cqw;
  pointer-events: none;
}

.bingo-card-title {
  position: relative;
  flex: none;
  padding-bottom: 2cqw;
  font-size: 8.6cqw;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.bingo-card-title span { position: relative; display: inline-block; }
/* Two little sparkles beside the title. */
.bingo-card-title span::before,
.bingo-card-title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.52em;
  height: 0.52em;
  background: var(--ink);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0.75;
}
.bingo-card-title span::before { left: -0.85em; transform: translateY(-80%) rotate(-12deg); }
.bingo-card-title span::after { right: -0.85em; transform: translateY(-20%) rotate(14deg) scale(0.7); }

/* B I N G O as five tilted balls. */
.bingo-letters {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.4cqw 0 1.8cqw;
}
.bingo-letters span {
  display: grid;
  place-items: center;
  width: 13.6cqw;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.55) 0 14%, transparent 34%),
    radial-gradient(circle at 50% 50%, var(--ink) 58%, var(--ink-deep) 100%);
  color: #fff;
  font-size: 8.6cqw;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0.5cqw 0 color-mix(in srgb, var(--ink-deep) 55%, transparent);
}
.bingo-letters span:nth-child(1) { transform: rotate(-7deg) translateY(0.4cqw); }
.bingo-letters span:nth-child(2) { transform: rotate(5deg) translateY(-0.5cqw); }
.bingo-letters span:nth-child(3) { transform: rotate(-3deg) translateY(0.3cqw); }
.bingo-letters span:nth-child(4) { transform: rotate(7deg) translateY(-0.4cqw); }
.bingo-letters span:nth-child(5) { transform: rotate(-5deg) translateY(0.5cqw); }

.bingo-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  gap: 0.45cqw;
  padding: 0.45cqw;
  border-radius: 3.2cqw;
  background: color-mix(in srgb, var(--ink) 70%, #fff);
}
.bingo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.9cqw;
  overflow: hidden;
  border: 0;
  border-radius: 1.3cqw;
  background: #fff;
  color: #1d1b22;
  font: inherit;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;   /* a safety net; words are sized so they don't need it */
  hyphens: manual;
}
.bingo-word { position: relative; z-index: 1; font-weight: 600; }
.bingo-card.is-numbers .bingo-cell { font-size: 9.6cqw; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The free space: a tilted star stamp. */
.bingo-cell.is-free { background: var(--ink-soft); }
.bingo-free {
  display: grid;
  place-items: center;
  width: 92%;
  aspect-ratio: 1;
  background: var(--ink);
  clip-path: polygon(50% 2%, 62% 35%, 97% 36%, 69% 57%, 79% 92%, 50% 72%, 21% 92%, 31% 57%, 3% 36%, 38% 35%);
  transform: rotate(-9deg);
}
.bingo-free span {
  margin-top: 10%;
  color: #fff;
  font-size: calc(12.5cqw / var(--n));
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Squares the caller has checked (marked) or a player has daubed. The ink
   sits behind the text, so a daubed word stays readable. */
.bingo-daub {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--daub, var(--ink)) 55%, #fff) 0 30%, var(--daub, var(--ink)) 75%);
  opacity: 0.5;
  transform: translate(-50%, -50%) rotate(var(--turn, 0deg));
  animation: bingo-daub 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes bingo-daub {
  0% { transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(0.1); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) rotate(var(--turn, 0deg)) scale(1); opacity: 0.5; }
}
.bingo-cell.is-marked { background: var(--ink-soft); }
.bingo-cell.is-marked::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 0.8cqw solid var(--ink);
  border-radius: 50%;
  opacity: 0.7;
}
.bingo-cell.is-lit { animation: bingo-lit 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes bingo-lit {
  0%, 100% { background: #fff6c9; }
  50% { background: #ffd84d; }
}

.bingo-card-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding: 1.8cqw 1cqw 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.8cqw;
  color: #5b6272;
}

/* Off-screen card that render.js measures words in. Words must not break there,
   so the sizes it finds keep every word whole on the real cards. */
.bingo-meter {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 800px;
  height: 1000px;
  container-type: size;
  visibility: hidden;
  pointer-events: none;
}
.bingo-meter .bingo-cell { overflow-wrap: normal; }
.bingo-meter .bingo-word { display: block; width: 90%; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .bingo-daub { animation: none; }
  .bingo-cell.is-lit { animation: none; background: #ffe27a; }
}