@keyframes bingo-sharpie-draw {
  0% {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.5;
  }
  72% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: 0.88;
  }
  100% {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: 0.82;
  }
}
@keyframes bingo-celebration-arrive {
  0% {
    opacity: 0;
    scale: 0.84;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes bingo-celebration-breathe {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.035;
  }
}
@keyframes bingo-star-rain {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--star-start-rotation)) scale(0.5);
  }
  4% {
    opacity: 1;
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--star-curve-x), var(--star-curve-y)) rotate(var(--star-curve-rotation)) scale(var(--star-landing-scale));
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--star-approach-x), var(--star-approach-y)) rotate(var(--star-approach-rotation)) scale(var(--star-landing-scale));
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--star-flight-x), var(--star-flight-y)) rotate(var(--star-landing-rotation)) scale(var(--star-landing-scale));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--star-flight-x), var(--star-flight-y)) rotate(var(--star-landing-rotation)) scale(var(--star-landing-scale));
  }
}
@keyframes bingo-star-flare {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 8rem), calc(-50% - 11rem)) rotate(-118deg) scale(0.75) skewX(-12deg);
  }
  18% {
    opacity: 1;
  }
  45% {
    opacity: 1;
    transform: translate(calc(-50% - 5.7rem), calc(-50% - 3.9rem)) rotate(220deg) scale(1.12) skewX(8deg);
  }
  57% {
    opacity: 1;
    transform: translate(calc(-50% - 5.7rem), calc(-50% - 3.9rem)) rotate(208deg) scale(0.88) skewX(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 5.7rem), calc(-50% - 3.9rem)) rotate(208deg) scale(0.46) skewX(0deg);
  }
}
@keyframes bingo-star-toss {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 8rem), calc(-50% - 10rem)) rotate(132deg) scale(0.58) skewY(-8deg);
  }
  16% {
    opacity: 1;
  }
  43% {
    opacity: 1;
    transform: translate(calc(-50% + 4.9rem), calc(-50% - 4.5rem)) rotate(44deg) scale(1.12) skewY(9deg);
  }
  55% {
    opacity: 1;
    transform: translate(calc(-50% + 4.9rem), calc(-50% - 4.5rem)) rotate(50deg) scale(0.86) skewY(2deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 4.9rem), calc(-50% - 4.5rem)) rotate(44deg) scale(0.4) skewY(0deg);
  }
}
@keyframes bingo-star-spin {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 12rem), calc(-50% + 0.7rem)) rotate(-42deg) scale(0.54);
  }
  20% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: translate(calc(-50% - 6.2rem), calc(-50% + 2.8rem)) rotate(-300deg) scale(1.05);
  }
  60% {
    opacity: 1;
    transform: translate(calc(-50% - 6.2rem), calc(-50% + 2.8rem)) rotate(-285deg) scale(0.82);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 6.2rem), calc(-50% + 2.8rem)) rotate(-300deg) scale(0.38);
  }
}
@keyframes bingo-star-hop {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 11rem), calc(-50% - 0.6rem)) rotate(102deg) scale(0.6) skewX(7deg);
  }
  17% {
    opacity: 1;
  }
  44% {
    opacity: 1;
    transform: translate(calc(-50% + 5.8rem), calc(-50% + 3.2rem)) rotate(-4deg) scale(1.08) skewX(-6deg);
  }
  58% {
    opacity: 1;
    transform: translate(calc(-50% + 5.8rem), calc(-50% + 3.2rem)) rotate(8deg) scale(0.83) skewX(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 5.8rem), calc(-50% + 3.2rem)) rotate(-4deg) scale(0.37) skewX(0deg);
  }
}
@keyframes bingo-star-flutter {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 0.8rem), calc(-50% - 12rem)) rotate(-160deg) scale(0.5) skewY(-10deg);
  }
  16% {
    opacity: 1;
  }
  41% {
    opacity: 1;
    transform: translate(calc(-50% + 0.3rem), calc(-50% - 5.8rem)) rotate(-34deg) scale(1.1) skewY(10deg);
  }
  55% {
    opacity: 1;
    transform: translate(calc(-50% + 0.3rem), calc(-50% - 5.8rem)) rotate(-26deg) scale(0.84) skewY(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 0.3rem), calc(-50% - 5.8rem)) rotate(-34deg) scale(0.38) skewY(0deg);
  }
}
@keyframes bingo-star-swoop {
  0% {
    opacity: 0;
    transform: translate(calc(-50% - 10rem), calc(-50% + 8.5rem)) rotate(145deg) scale(0.48) skewX(-15deg);
  }
  18% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    transform: translate(calc(-50% - 5.2rem), calc(-50% + 4.9rem)) rotate(-88deg) scale(1.15) skewX(12deg);
  }
  57% {
    opacity: 1;
    transform: translate(calc(-50% - 5.2rem), calc(-50% + 4.9rem)) rotate(-76deg) scale(0.8) skewX(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 5.2rem), calc(-50% + 4.9rem)) rotate(-88deg) scale(0.34) skewX(0deg);
  }
}
@keyframes bingo-star-spring {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + 10rem), calc(-50% + 9rem)) rotate(-130deg) scale(0.42);
  }
  15% {
    opacity: 1;
  }
  45% {
    opacity: 1;
    transform: translate(calc(-50% + 5rem), calc(-50% + 4.8rem)) rotate(230deg) scale(1.17) skewY(8deg);
  }
  58% {
    opacity: 1;
    transform: translate(calc(-50% + 5rem), calc(-50% + 4.8rem)) rotate(216deg) scale(0.78) skewY(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 5rem), calc(-50% + 4.8rem)) rotate(230deg) scale(0.35) skewY(0deg);
  }
}
@keyframes dauber-slap {
  0% {
    opacity: 0;
    scale: calc(var(--dauber-scale) * 1.55);
  }
  60% {
    opacity: 1;
    scale: calc(var(--dauber-scale) * 0.9);
  }
  100% {
    opacity: 1;
    scale: var(--dauber-scale);
  }
}
* {
  box-sizing: border-box;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

b,
strong {
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ul,
ol {
  list-style: none;
}

li {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
  overflow: hidden;
}

[v-cloak] {
  display: none !important;
}

html {
  font-size: 100%;
}

body {
  background: #eee8d8;
  color: #10192f;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-weight: 400;
  line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  margin: 0 0 1.86rem;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  font-size: clamp(2.488rem, 7vw, 4.209rem);
}

h2 {
  font-size: clamp(2.074rem, 5.3vw, 3.157rem);
}

h3 {
  font-size: clamp(1.728rem, 4.1vw, 2.369rem);
}

h4 {
  font-size: clamp(1.44rem, 2.96vw, 1.777rem);
}

h5 {
  font-size: clamp(1.2rem, 2.26vw, 1.333rem);
}

p {
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
}

.bingo-dialog {
  width: min(100% - 1.5rem, 34rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 0.3rem 0.5rem rgba(16, 25, 47, 0.35)) drop-shadow(0 1.5rem 2.5rem rgba(16, 25, 47, 0.5));
  overflow: visible;
}
.bingo-dialog::backdrop {
  background: rgba(22, 36, 71, 0.86);
  opacity: 1;
  transition: opacity 240ms ease;
}
.bingo-dialog.is-closing::backdrop {
  opacity: 0;
}
.bingo-dialog h2 {
  display: grid;
  align-self: stretch;
  justify-self: center;
  place-content: safe center;
  max-width: 20ch;
  margin: 0;
  overflow-y: auto;
  color: #162447;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(2rem, 8.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

@starting-style {
  .bingo-dialog[open]::backdrop {
    opacity: 0;
  }
}
.bingo-dialog__ticket {
  --frame-margin: clamp(0.3rem, 1.15vw, 0.5rem);
  --outer-rule: clamp(0.16rem, 0.55vw, 0.26rem);
  --rule-gap: clamp(0.26rem, 0.95vw, 0.44rem);
  --inner-rule: clamp(0.06rem, 0.24vw, 0.11rem);
  --notch-radius: clamp(1rem, 4.2vw, 1.75rem);
  --edge-notch-radius: clamp(0.9rem, 3.6vw, 1.5rem);
  --mask-offset: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: min(31rem, 100dvh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  margin: 0;
  padding: var(--frame-margin);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture-modal.svg");
  background-size: 13rem 13rem;
  color: #10192f;
  --mask-radius: calc(var(--notch-radius) + var(--mask-offset));
  --edge-radius: calc(var(--edge-notch-radius) + var(--mask-offset));
  mask: radial-gradient(circle at calc(0% - var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(0% - var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(0% - var(--mask-offset)) 50%, transparent calc(var(--edge-radius) - 0.5px), #000 calc(var(--edge-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) 50%, transparent calc(var(--edge-radius) - 0.5px), #000 calc(var(--edge-radius) + 0.5px));
  mask-composite: intersect;
}

.bingo-dialog__rule,
.bingo-dialog__rule-gap,
.bingo-dialog__inner-rule,
.bingo-dialog__inside {
  flex: 1 1 auto;
  min-height: 0;
  --mask-radius: calc(var(--notch-radius) + var(--mask-offset));
  --edge-radius: calc(var(--edge-notch-radius) + var(--mask-offset));
  mask: radial-gradient(circle at calc(0% - var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(0% - var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)), radial-gradient(circle at calc(0% - var(--mask-offset)) 50%, transparent calc(var(--edge-radius) - 0.5px), #000 calc(var(--edge-radius) + 0.5px)), radial-gradient(circle at calc(100% + var(--mask-offset)) 50%, transparent calc(var(--edge-radius) - 0.5px), #000 calc(var(--edge-radius) + 0.5px));
  mask-composite: intersect;
}

.bingo-dialog__rule,
.bingo-dialog__rule-gap,
.bingo-dialog__inner-rule {
  display: flex;
  flex-direction: column;
}

.bingo-dialog__rule {
  --mask-offset: var(--frame-margin);
  padding: var(--outer-rule);
  background: #162447;
}

.bingo-dialog__rule-gap {
  --mask-offset: calc(var(--frame-margin) + var(--outer-rule));
  padding: var(--rule-gap);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture-modal.svg");
  background-size: 13rem 13rem;
}

.bingo-dialog__inner-rule {
  --mask-offset: calc(
    var(--frame-margin) + var(--outer-rule) + var(--rule-gap)
  );
  padding: var(--inner-rule);
  background: #162447;
}

.bingo-dialog__inside {
  --mask-offset: calc(
    var(--frame-margin) + var(--outer-rule) + var(--rule-gap) +
      var(--inner-rule)
  );
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(0.85rem, 3dvh, 1.6rem);
  padding: clamp(3rem, 7vw, 3.6rem) clamp(1.15rem, 4vw, 2rem) clamp(1.15rem, 3.5vw, 1.7rem);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture-modal.svg");
  background-size: 13rem 13rem;
}

.bingo-dialog__close {
  position: absolute;
  z-index: 3;
  top: clamp(0.3rem, 1.5vw, 0.7rem);
  right: clamp(0.4rem, 2vw, 0.9rem);
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: #162447;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
}
.bingo-dialog__close:hover {
  color: #247c42;
}
.bingo-dialog__close:focus-visible {
  outline: 0.2rem solid #247c42;
  outline-offset: 0.15rem;
}

.bingo-dialog__fence {
  display: flex;
  gap: clamp(0.5rem, 2vw, 0.95rem);
  align-items: center;
  justify-content: center;
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(0.8rem, 3vw, 1.15rem);
  line-height: 1;
}

.bingo-dialog__fence-line {
  height: 0.1rem;
  flex: 1;
  background: currentColor;
}

.bingo-dialog__fence-stars {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.24rem, 1vw, 0.46rem);
  line-height: 1;
  white-space: nowrap;
}

.bingo-dialog__star--sm {
  font-size: 0.68em;
}

.bingo-dialog__star--md {
  font-size: 1em;
}

.bingo-dialog__star--xl {
  font-size: 2.1em;
}

.bingo-dialog__mark {
  --notch: clamp(0.7rem, 2.8vw, 1.1rem);
  width: 100%;
  min-height: clamp(3.1rem, 9vw, 4rem);
  padding: 0.8rem 1.4rem;
  border: 0;
  background: #21a8eb;
  box-shadow: inset 0 0 0 0.16rem rgba(253, 250, 242, 0.8);
  mask: radial-gradient(circle at 0% 100%, transparent calc(var(--notch) - 0.5px), #000 calc(var(--notch) + 0.5px)) left bottom/50% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - 0.5px), #000 calc(var(--notch) + 0.5px)) right bottom/50% 100% no-repeat;
  color: #fdfaf2;
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: clamp(1.15rem, 4.6vw, 1.7rem);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 140ms ease-out, filter 140ms ease-out;
}
.bingo-dialog__mark.is-undo {
  background: #b94d49;
}
.bingo-dialog__mark:hover {
  filter: brightness(1.06);
}
.bingo-dialog__mark:focus-visible {
  box-shadow: inset 0 0 0 0.16rem rgba(253, 250, 242, 0.85), inset 0 0 0 0.4rem #247c42;
  outline: none;
}

.bingo-dialog__close:hover,
.bingo-dialog__mark:hover,
.bingo-dialog__close:active,
.bingo-dialog__mark:active {
  transform: translateY(0.1rem);
}

@media (max-height: 43rem) {
  .bingo-dialog__ticket {
    min-height: 0;
  }
  .bingo-dialog__inside {
    gap: 0.9rem;
    padding-top: clamp(2.9rem, 7vw, 3.2rem);
    padding-bottom: 1.6rem;
  }
  .bingo-dialog h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bingo-dialog__mark,
  .bingo-dialog__close,
  .bingo-dialog::backdrop {
    transition: none;
  }
}
.site-shell {
  width: min(100% - 2rem, 36rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding-block: clamp(2rem, 10vw, 5rem);
}

.back-link {
  color: #10192f;
  font-weight: 700;
}

.back-link:focus-visible {
  outline: 0.25rem solid #e9eab9;
  outline-offset: 0.25rem;
}

.card-shell {
  padding: clamp(1.5rem, 8vw, 3rem);
  border: 2px dashed #10192f;
  text-align: center;
}

.card-shell p {
  margin-bottom: 1.5rem;
}

.entry-page {
  min-height: 100dvh;
  background: #eee8d8;
}

.entry-app {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding-block: clamp(1.5rem, 5vh, 3rem);
  overflow: hidden;
}

.entry-header {
  display: flex;
  flex-direction: column;
  gap: 2dvh;
}

.entry-photo {
  display: block;
  width: 100%;
  height: 37dvh;
  object-fit: cover;
}

.entry-content {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  margin-inline: auto;
  padding-inline: clamp(1.3rem, 7vw, 2.25rem);
  text-align: center;
}

.entry-wordmark {
  width: min(100%, 26rem);
  height: auto;
  margin-inline: auto;
  color: #162447;
}
.entry-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

.entry-tagline {
  margin: 0;
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.name-entry {
  display: grid;
  gap: 0.7rem;
  text-align: left;
}
.name-entry label {
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  font-weight: 700;
}
.name-entry input {
  min-height: 3.4rem;
  padding: 0.65rem 0.8rem;
  border: 0.16rem solid #247c42;
  border-radius: 0.4rem;
  background: rgba(253, 250, 242, 0.8);
  color: #10192f;
  font: inherit;
  font-size: 1.125rem;
}
.name-entry input:focus-visible {
  outline: 0.22rem solid #e9eab9;
  outline-offset: 0.2rem;
}
.name-entry .button-holder {
  display: flex;
  justify-content: end;
}
.name-entry button {
  min-height: 3.4rem;
  padding: 0.35em 1em;
  border: 0.16rem solid #247c42;
  border-radius: 0.4rem;
  background: #247c42;
  color: #fdfaf2;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  transition: filter 140ms ease-out, transform 140ms ease-out;
}
.name-entry button:hover {
  filter: brightness(1.08);
}
.name-entry button:active {
  transform: translateY(0.12rem);
}
.name-entry button:disabled {
  border-color: transparent;
  background: rgba(36, 124, 66, 0.35);
  color: rgba(253, 250, 242, 0.8);
  cursor: not-allowed;
}
.name-entry button:focus-visible {
  outline: 0.22rem solid #e9eab9;
  outline-offset: 0.2rem;
}

.entry-help {
  margin: 1.5rem 0 0;
  text-align: center;
}
.entry-help a {
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-weight: 700;
  text-decoration: underline;
}
.entry-help a:focus-visible {
  outline: 0.22rem solid #e9eab9;
  outline-offset: 0.2rem;
}

.entry-corner-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: clamp(6rem, 32vw, 12rem);
  height: auto;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .name-entry button {
    transition: none;
  }
}
.help-content {
  width: min(100%, 32rem);
  margin-inline: auto;
  padding: clamp(2.5rem, 10vw, 4rem) clamp(1.3rem, 7vw, 2.25rem) clamp(2.5rem, 9vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
}

.help-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.help-copy {
  display: grid;
  gap: 1rem;
  font-size: clamp(1.05rem, 3vw, 1.15rem);
  line-height: 1.6;
}
.help-copy h1 {
  margin: 0;
  color: #162447;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
}
.help-copy .footnote {
  font-weight: 300;
  font-size: 75%;
}

.help-play {
  display: block;
  color: #21a8eb;
  font-size: 285%;
  text-decoration: none;
}
.help-play:hover, .help-play:focus-visible {
  text-decoration: underline;
}
.help-play:active {
  transform: translateY(0.12rem);
}

@media (prefers-reduced-motion: reduce) {
  .help-play {
    transition: none;
  }
}
.card-page {
  --ticket-height: clamp(7rem, min(19dvw, 21dvh), 10.75rem);
  overflow-x: clip;
  background: #eee8d8;
}
.card-page .site-shell {
  width: min(100%, 53.25rem);
  min-height: 100dvh;
  padding-block: 0 0.75rem;
  background: transparent;
}
.card-page .card-shell {
  padding: 1rem 10px;
  border: 0;
  text-align: initial;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-ticket {
  --frame-width: clamp(0.3rem, 0.62dvw, 0.48rem);
  --paper-gap: clamp(0.28rem, 0.8dvw, 0.52rem);
  --rule-width: clamp(0.07rem, 0.16dvw, 0.11rem);
  --rule-gap: clamp(0.2rem, 0.55dvw, 0.38rem);
  --inner-rule-width: clamp(0.05rem, 0.12dvw, 0.08rem);
  --ticket-notch-radius: clamp(0.72rem, 2.1dvw, 1.2rem);
  --perforation-size: clamp(0.14rem, 0.32dvw, 0.21rem);
  --perforation-step: clamp(0.4rem, 0.95dvw, 0.62rem);
  --mask-offset: 0px;
  position: relative;
  min-height: var(--ticket-height);
  background: #162447;
  color: #10192f;
  filter: drop-shadow(0 0.3rem 0.28rem rgba(22, 36, 71, 0.14));
  text-align: center;
}

.card-ticket__perforations {
  position: absolute;
  z-index: 5;
  top: calc(var(--ticket-notch-radius) + 0.08rem);
  bottom: calc(var(--ticket-notch-radius) + 0.08rem);
  width: calc(var(--perforation-size) + var(--perforation-size) + 0.08rem);
  background-image: radial-gradient(circle at center, #eee8d8 0 var(--perforation-size), transparent calc(var(--perforation-size) + 0.03rem));
  background-repeat: repeat-y;
  background-size: 100% var(--perforation-step);
  pointer-events: none;
}
.card-ticket__perforations--left {
  left: calc(0rem - var(--perforation-size) - 0.04rem);
}
.card-ticket__perforations--right {
  right: calc(0rem - var(--perforation-size) - 0.04rem);
}

.ticket-mask {
  --mask-radius: calc(var(--ticket-notch-radius) + var(--mask-offset));
  -webkit-mask: radial-gradient(circle at calc(0% - var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) left top/50.5% 50.5% no-repeat, radial-gradient(circle at calc(100% + var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) right top/50.5% 50.5% no-repeat, radial-gradient(circle at calc(0% - var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) left bottom/50.5% 50.5% no-repeat, radial-gradient(circle at calc(100% + var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) right bottom/50.5% 50.5% no-repeat;
  mask: radial-gradient(circle at calc(0% - var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) left top/50.5% 50.5% no-repeat, radial-gradient(circle at calc(100% + var(--mask-offset)) calc(0% - var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) right top/50.5% 50.5% no-repeat, radial-gradient(circle at calc(0% - var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) left bottom/50.5% 50.5% no-repeat, radial-gradient(circle at calc(100% + var(--mask-offset)) calc(100% + var(--mask-offset)), transparent calc(var(--mask-radius) - 0.5px), #000 calc(var(--mask-radius) + 0.5px)) right bottom/50.5% 50.5% no-repeat;
}

.card-ticket__paper,
.card-ticket__rule,
.card-ticket__rule-gap,
.card-ticket__inner-rule,
.card-ticket__inside {
  position: absolute;
}

.card-ticket__paper {
  --mask-offset: var(--frame-width);
  inset: var(--frame-width);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture.svg");
  background-size: 11rem 11rem;
}

.card-ticket__rule {
  --mask-offset: calc(var(--frame-width) + var(--paper-gap));
  inset: var(--paper-gap);
  background: #247c42;
}

.card-ticket__rule-gap {
  --mask-offset: calc(
    var(--frame-width) + var(--paper-gap) + var(--rule-width)
  );
  inset: var(--rule-width);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture.svg");
  background-size: 11rem 11rem;
}

.card-ticket__inner-rule {
  --mask-offset: calc(
    var(--frame-width) + var(--paper-gap) + var(--rule-width) + var(--rule-gap)
  );
  inset: var(--rule-gap);
  background: #247c42;
}

.card-ticket__inside {
  --mask-offset: calc(
    var(--frame-width) + var(--paper-gap) + var(--rule-width) +
      var(--rule-gap) + var(--inner-rule-width)
  );
  inset: var(--inner-rule-width);
  display: grid;
  grid-template-columns: clamp(2.15rem, 7dvw, 3.75rem) minmax(0, 1fr) clamp(2.15rem, 7dvw, 3.75rem);
  align-items: stretch;
  padding-inline: clamp(0.35rem, 1.2dvw, 0.75rem);
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture.svg");
  background-size: 11rem 11rem;
  container-type: size;
}

.card-ticket__brand {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
}

.card-ticket__wordmark {
  max-width: 75%;
}
.card-ticket__wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

.card-ticket__owner {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0.5rem, 1fr) minmax(0, max-content) minmax(0.5rem, 1fr);
  gap: clamp(0.4rem, 1.6cqw, 0.85rem);
  align-items: center;
  margin: 0;
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(0.85rem, min(1.85dvw, 3.25dvh), 1.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.card-ticket__owner::before, .card-ticket__owner::after {
  height: var(--inner-rule-width);
  background: #247c42;
  content: "";
}

.card-ticket__owner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-ticket__star-rail {
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  place-items: center;
  padding-block: clamp(0.3rem, 4cqh, 0.55rem);
  color: #247c42;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(0.65rem, min(2.5cqw, 12cqh), 0.95rem);
  line-height: 1;
}
.card-ticket__star-rail--left {
  border-right: var(--inner-rule-width) solid #247c42;
}
.card-ticket__star-rail--right {
  border-left: var(--inner-rule-width) solid #247c42;
}

.bingo-board {
  position: relative;
  width: calc(100% - clamp(0.7rem, 2.5dvw, 1.4rem));
  margin-inline: auto;
  padding: clamp(0.12rem, 0.4dvw, 0.22rem);
  overflow-x: auto;
  background: #162447;
  box-shadow: 0 0.3rem 0.5rem rgba(22, 36, 71, 0.12);
}

.bingo-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  height: clamp(23rem, 100dvh - var(--ticket-height) - clamp(2.25rem, 6dvw, 3.75rem), (100dvw - clamp(1rem, 4dvw, 2rem)) * 1.22);
  min-width: 22rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(0.1rem, 0.35dvw, 0.2rem);
  background: #162447;
}

.bingo-lines {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.bingo-line {
  fill: none;
  stroke: url("#bingo-sharpie-red");
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 18;
  opacity: 0.82;
  mix-blend-mode: multiply;
}
.bingo-line.is-pending {
  opacity: 0;
}
.bingo-line.is-revealing {
  animation: bingo-sharpie-draw 1500ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.bingo-board__announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bingo-celebration {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  animation: bingo-celebration-arrive 420ms cubic-bezier(0.2, 0.8, 0.28, 1) both;
}
.bingo-celebration:focus-visible {
  outline: none;
}
.bingo-celebration:focus-visible .bingo-celebration__message {
  outline: 0.18rem solid #247c42;
  outline-offset: 0.24rem;
}

.bingo-celebration__message {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.56rem 0.9rem 0.5rem;
  border: 0.12rem solid #a52530;
  background: rgba(253, 250, 242, 0.94);
  box-shadow: 0 0.15rem 0 rgba(111, 24, 36, 0.25);
  color: #9b202b;
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: clamp(1.65rem, 7.4dvw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-align: center;
  text-wrap: balance;
  rotate: -1deg;
  animation: bingo-celebration-breathe 1.8s ease-in-out 420ms infinite;
}

.bingo-celebration__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bingo-celebration__burst span {
  position: absolute;
  display: block;
  color: var(--star-color);
  font-family: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  font-size: var(--star-size, clamp(1rem, 4.7dvw, 1.55rem));
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0.08rem 0 rgba(253, 250, 242, 0.4);
}

.bingo-celebration__piece {
  position: absolute;
  top: var(--star-source-y);
  left: var(--star-source-x);
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
  animation: bingo-star-rain var(--star-duration) linear both;
}
.bingo-celebration__piece--1 {
  --star-color: #dd3843;
  --star-size: clamp(1.15rem, 5.7dvw, 1.8rem);
  animation: bingo-star-flare 2.7s cubic-bezier(0.18, 0.82, 0.28, 1) 55ms both;
}
.bingo-celebration__piece--2 {
  --star-color: #e0aa22;
  --star-size: clamp(0.95rem, 4.25dvw, 1.35rem);
  animation: bingo-star-toss 2.95s cubic-bezier(0.18, 0.82, 0.28, 1) 155ms both;
}
.bingo-celebration__piece--3 {
  --star-color: #21a8eb;
  --star-size: clamp(1.1rem, 5.1dvw, 1.6rem);
  animation: bingo-star-spin 2.75s cubic-bezier(0.18, 0.82, 0.28, 1) 110ms both;
}
.bingo-celebration__piece--4 {
  --star-color: #247c42;
  --star-size: clamp(0.88rem, 3.95dvw, 1.25rem);
  animation: bingo-star-hop 3.05s cubic-bezier(0.18, 0.82, 0.28, 1) 215ms both;
}
.bingo-celebration__piece--5 {
  --star-color: #30266d;
  --star-size: clamp(1.2rem, 5.9dvw, 1.85rem);
  animation: bingo-star-flutter 2.85s cubic-bezier(0.18, 0.82, 0.28, 1) 80ms both;
}
.bingo-celebration__piece--6 {
  --star-color: #c76f2d;
  --star-size: clamp(0.8rem, 3.7dvw, 1.15rem);
  animation: bingo-star-swoop 2.65s cubic-bezier(0.18, 0.82, 0.28, 1) 275ms both;
}
.bingo-celebration__piece--7 {
  --star-color: #a52c43;
  --star-size: clamp(0.9rem, 4.1dvw, 1.3rem);
  animation: bingo-star-spring 3.15s cubic-bezier(0.18, 0.82, 0.28, 1) 180ms both;
}

.bingo-square {
  position: relative;
  display: grid;
  min-width: 0;
  container-type: size;
  place-items: center;
  overflow: hidden;
  padding: clamp(0.18rem, 0.65dvw, 0.4rem);
  border: 0;
  border-radius: 0;
  background-color: #fdfaf2;
  background-image: url("../svg/paper-texture.svg");
  background-size: 11rem 11rem;
  color: #10192f;
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  font-size: clamp(0.72rem, min(3.25dvw, 2.2dvh), 2.25rem);
  font-weight: 100;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.bingo-square.task-see {
  color: #34343c;
}
.bingo-square.task-do {
  color: #30266d;
}
.bingo-square.square-center {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 61 36 96 36 68 56 79 91 50 70 21 91 32 56 4 36 39 36Z' fill='%23000000' fill-opacity='.09'/%3E%3C/svg%3E"), url("../svg/paper-texture.svg");
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 96% 96%, 11rem 11rem;
}
.bingo-square:focus-visible {
  z-index: 1;
  outline: 0.25rem solid #247c42;
  outline-offset: -0.25rem;
}
.bingo-square:active {
  transform: scale(0.97);
}
.bingo-square.copy-long {
  font-size: clamp(0.64rem, min(2.85dvw, 1.85dvh), 1.9rem);
}
.bingo-square.copy-very-long {
  padding-inline: 0;
  font-size: clamp(0.58rem, min(2.45dvw, 1.55dvh), 1.55rem);
  letter-spacing: -0.02em;
}

.bingo-square__dauber {
  display: none;
  fill: #21a8eb;
}
.bingo-square.marked .bingo-square__dauber {
  --dauber-rotate: -7deg;
  --dauber-scale: 0.98;
  position: absolute;
  z-index: 0;
  display: block;
  width: 86%;
  width: min(88cqw, 88cqh);
  aspect-ratio: 1;
  overflow: visible;
  mix-blend-mode: multiply;
  rotate: var(--dauber-rotate);
  scale: var(--dauber-scale);
}
.bingo-square:nth-child(3n+2).marked .bingo-square__dauber {
  --dauber-rotate: 8deg;
  --dauber-scale: 0.94;
}
.bingo-square:nth-child(4n).marked .bingo-square__dauber {
  --dauber-rotate: -14deg;
  --dauber-scale: 0.93;
}
.bingo-square.just-stamped .bingo-square__dauber {
  animation: dauber-slap 300ms ease-out both;
}

.bingo-square__text {
  position: relative;
  z-index: 3;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .bingo-square {
    transition: none;
  }
  .bingo-square.just-stamped .bingo-square__dauber {
    animation: none;
  }
  .bingo-line.is-revealing,
  .bingo-celebration,
  .bingo-celebration__message {
    animation: none;
  }
  .bingo-celebration__burst {
    display: none;
  }
}
.underpecified a {
  color: red !important;
}

#ThisDivDoesntHaveAClass {
  color: red;
}

.so .i .really .had .to .go.nuts .with.the .cascade[for] [this=rule] {
  color: red;
}