.bingo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid rgba(255,179,76,.34);
  background: radial-gradient(circle at 88% 17%,rgba(216,65,237,.22),transparent 35%),
    radial-gradient(circle at 9% 84%,rgba(255,134,30,.17),transparent 38%),#090412;
}
.bingo::before {
  content: '✦';
  position: absolute;
  z-index: -1;
  left: -45px;
  top: -90px;
  color: rgba(255,183,72,.06);
  font: 900 clamp(300px,42vw,540px)/1 var(--display,Impact,sans-serif);
  pointer-events: none;
}
.bingo__inner {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  align-items: center;
  gap: clamp(30px,6vw,85px);
  max-width: 1180px;
  margin: auto;
}
.bingo__intro h2 {
  margin: 0 0 24px;
  color: #fff;
  font: 900 clamp(62px,7vw,105px)/.83 var(--display,Impact,sans-serif);
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(177,69,255,.58);
}
.bingo__intro h2 em {
  color: var(--orange,#ffad37);
  font-style: normal;
  text-shadow: 0 0 12px rgba(255,142,38,.85),0 0 30px rgba(255,105,27,.55);
}
.bingo__intro > p:not(.eyebrow) {
  max-width: 430px;
  margin-bottom: 20px;
  color: #f0e3f3;
  font: 650 clamp(21px,2.25vw,27px)/1.12 var(--display,Impact,sans-serif);
}
.bingo__fine-print { color: #d0bbd7 !important; font-size: 18px !important; }
.bingo__game {
  padding: clamp(18px,3.4vw,36px);
  border: 2px solid #d56bff;
  border-radius: 22px;
  background: linear-gradient(140deg,rgba(42,13,66,.97),rgba(11,4,22,.98));
  box-shadow: inset 0 0 28px rgba(188,71,239,.17),0 0 25px rgba(188,71,239,.39);
}
.bingo--won .bingo__game { border-color: #ffd280; box-shadow: 0 0 32px rgba(255,171,55,.52),inset 0 0 25px rgba(255,181,47,.15); }
.bingo [hidden] { display: none !important; }
.bingo__game-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.bingo__game-title strong { color: #fff; font: 900 clamp(30px,4vw,42px)/.95 var(--display,Impact,sans-serif); letter-spacing: .05em; text-transform: uppercase; }
.bingo__game-title span { color: var(--lime,#a6ff54); font: 900 17px/1 var(--display,Impact,sans-serif); letter-spacing: .12em; white-space: nowrap; }
.bingo__board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(7px,1vw,12px); }
.bingo__tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: clamp(107px,12vw,144px);
  padding: 15px 10px;
  border: 2px solid rgba(233,165,255,.55);
  border-radius: 12px;
  color: #fff9ff;
  background: rgba(12,5,27,.9);
  cursor: pointer;
  text-align: center;
  font: 800 clamp(18px,1.9vw,24px)/1.02 var(--display,Impact,sans-serif);
  transition: transform .18s,border-color .18s,box-shadow .18s,background .18s;
}
.bingo__tile:hover { transform: translateY(-2px); border-color: #91dfff; box-shadow: 0 0 14px rgba(81,191,255,.35); }
.bingo__tile.is-marked { border-color: #b5ff75; background: linear-gradient(135deg,rgba(57,111,33,.63),rgba(14,47,23,.79)); box-shadow: inset 0 0 20px rgba(166,255,84,.15),0 0 10px rgba(166,255,84,.24); }
.bingo__tile.is-winning { border-color: #ffd675; box-shadow: 0 0 18px rgba(255,184,57,.55),inset 0 0 17px rgba(255,184,57,.16); }
.bingo__tile-label { position: relative; z-index: 1; }
.bingo__tile-mark { position: absolute; right: 6px; top: 3px; color: #d2ffae; font-size: 25px; line-height: 1; opacity: 0; text-shadow: 0 0 8px #aaff58; }
.bingo__tile.is-marked .bingo__tile-mark { opacity: 1; }
.bingo__status { min-height: 24px; margin: 18px 0 0; color: #f8eafc; font: 800 20px/1.15 var(--display,Impact,sans-serif); }
.bingo__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.bingo__action { min-height: 48px; padding: 9px 18px; border: 2px solid #ffbd59; border-radius: 9px; color: #190913; background: #ffbb5d; cursor: pointer; font: 900 19px/1 var(--display,Impact,sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.bingo__action--quiet { color: #fff1fa; border-color: #b77bda; background: transparent; }
.bingo__action:hover { filter: brightness(1.12); box-shadow: 0 0 15px rgba(255,173,61,.4); }
.bingo__badge { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding: 13px 16px; border: 2px solid #ffe08d; border-radius: 13px; color: #fff8e7; background: linear-gradient(100deg,rgba(162,97,23,.43),rgba(55,23,63,.75)); box-shadow: 0 0 19px rgba(255,193,72,.45); }
.bingo__badge-symbol { flex: none; color: #ffd966; font-size: 38px; line-height: 1; text-shadow: 0 0 15px #ffad39; }
.bingo__badge strong { display: block; font: 900 23px/1 var(--display,Impact,sans-serif); letter-spacing: .045em; text-transform: uppercase; }
.bingo__badge a { color: #d6f6ff; font: 800 18px/1.3 var(--display,Impact,sans-serif); text-decoration: underline; text-underline-offset: 3px; }
.bingo :focus-visible { outline: 3px solid var(--lime,#a6ff54); outline-offset: 4px; }
@media (max-width: 850px) { .bingo__inner { grid-template-columns: 1fr; }.bingo__intro h2 { font-size: clamp(66px,12vw,105px); }.bingo__intro > p:not(.eyebrow) { max-width: 670px; } }
@media (max-width: 520px) { .bingo__intro h2 { font-size: clamp(59px,14vw,78px); }.bingo__game { padding: 15px; border-radius: 16px; }.bingo__tile { min-height: 104px; padding: 9px 6px; border-radius: 9px; font-size: clamp(16px,4.5vw,20px); }.bingo__game-title strong { font-size: 29px; }.bingo__game-title span { font-size: 14px; }.bingo__actions .bingo__action { flex: 1 1 130px; padding-inline: 8px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .bingo__tile { transition: none; }.bingo__tile:hover { transform: none; } }