:root {
  --ink: #16181d;
  --muted: #5b5d66;
  --line: #dfe1e6;
  --navy: #0f2a5c;
  --bg: #eef0f4;
  --dab: #ce1126;
  --gold: #fcd116;
  --col-b: #2463c7;
  --col-i: #c8313b;
  --col-g: #2f8f4e;
  --col-o: #e2861d;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- English / Español ---------- */
.lang { grid-area: lang; justify-self: end; display: flex; align-items: center; gap: 2px; font-weight: 700; color: var(--muted); }
.lang button { border: 0; background: none; padding: 8px 12px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ---------- Page header ---------- */
.top { text-align: center; padding: 10px 16px 4px; }
.top__title { margin: 0 0 4px; font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 900; letter-spacing: -.02em; color: var(--navy); line-height: 1.05; }
/* Cause centered, language switch on the same line to the right */
.subline {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". cause lang"; align-items: end; gap: 12px;
  width: min(100% - 32px, 1100px); margin: 0 auto; padding-bottom: 12px;
}
@media (max-width: 700px) {
  .subline { grid-template-columns: 1fr auto; grid-template-areas: "cause lang"; gap: 8px; }
  .lang { flex-direction: column; gap: 0; }
  .lang > span { display: none; }
}
.top__cause { grid-area: cause; text-align: center; margin: 0 auto; max-width: 34ch; font-size: .9rem; font-weight: 600; color: var(--muted); line-height: 1.35; }

/* ---------- Game bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; gap: 10px;
  width: min(100% - 32px, 1100px); margin: 0 auto; padding: 12px 14px;
  background: #fff; border-radius: 16px; box-shadow: 0 6px 22px rgba(15, 42, 92, .1);
}
.bar__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.btn, .switch { white-space: nowrap; }
.bar__buttons { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.playing { display: flex; align-items: center; gap: 10px; min-width: 0; }
.playing__name { display: block; font-size: 1rem; font-weight: 800; }
.mini { flex: none; display: grid; grid-template-columns: repeat(5, 7px); gap: 2px; }
.mini i { width: 7px; height: 7px; border-radius: 2px; background: var(--line); }
.mini i.on { background: var(--navy); }
.mini:empty { display: none; }
.last { text-align: right; }
.last__ball { display: block; font-size: 1.5rem; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-weight: 700; cursor: pointer;
}
.btn:hover { border-color: var(--navy); }
.btn__count { min-width: 26px; padding: 2px 7px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 800; text-align: center; }

.switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; font-weight: 700; cursor: pointer; }
.switch__track { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #c9ccd3; transition: background .2s; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch[aria-checked="true"] .switch__track { background: #2f8f4e; }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); }

.hint { margin: 0; min-height: 1.2em; text-align: center; font-size: .85rem; font-weight: 600; color: var(--muted); }
.hint.is-reset { color: var(--dab); }

/* ---------- Cards ---------- */
.cards {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px;
  width: min(100% - 32px, 1100px); margin: 16px auto 0; align-items: start;
}
.card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 30px rgba(15, 42, 92, .1); }
.logos { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 14px 14px 10px; }
.logos img { height: 46px; width: auto; object-fit: contain; }
.logos--top { gap: clamp(24px, 5vw, 44px); padding: 20px 16px 4px; }
.logos--top img { height: clamp(84px, 22vw, 110px); }
.card__flag { height: 6px; background: linear-gradient(90deg, #fcd116 0 50%, #003893 50% 75%, #ce1126 75%); }
.card__meta { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 16px 8px; }
.card__serial { font-size: 1.4rem; font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.card__foot { padding: 8px 16px 12px; text-align: right; font-size: .75rem; font-weight: 600; }
.card__foot a { color: var(--muted); text-decoration: none; }
.card__foot a:hover { color: var(--navy); }

.grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 12px; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden;
}
.letter { display: grid; place-items: center; padding: 6px 0; color: #fff; font-size: 1.6rem; font-weight: 900; }
.letter--b { background: var(--col-b); }
.letter--i { background: var(--col-i); }
.letter--n { background: var(--navy); }
.letter--g { background: var(--col-g); }
.letter--o { background: var(--col-o); }

.cell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff;
  font-size: clamp(1.3rem, 6.6vw, 1.9rem); font-weight: 800; font-variant-numeric: tabular-nums;
  cursor: pointer; user-select: none; touch-action: manipulation; transition: background .25s;
}
.cell:nth-child(5n) { border-right: 0; }
.cell::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: var(--dab); opacity: 0; transform: scale(.4);
  transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.cell[aria-pressed="true"] { color: #fff; }
.cell[aria-pressed="true"]::after { opacity: .88; transform: scale(1); }
.cell span { position: relative; z-index: 1; }
.cell:disabled { cursor: default; }
.free { flex-direction: column; font-size: .65rem; font-weight: 800; letter-spacing: .06em; color: var(--navy); background: #fff8d6; cursor: default; }
.free svg { width: 52%; height: auto; display: block; }

/* Outside the figure being played: greyed out, not markable */
.cell.off { background: #eceef2; color: #c3c7cf; cursor: not-allowed; }
.cell.off::after { opacity: 0; }
.free.off { background: #fff8d6; cursor: default; } /* the center star always keeps its color */

/* Pattern preview: the figure lights up on every card for a few seconds */
.grid.is-preview .cell { color: #b9bcc4; }
.grid.is-preview .cell::after { opacity: 0; }
.grid.is-preview .cell.fig { background: var(--gold); color: var(--navy); animation: fig-pulse 1s ease-in-out infinite alternate; }
.grid.is-preview .free.fig svg path { fill: #fff; }
@keyframes fig-pulse { from { filter: brightness(1); } to { filter: brightness(.9); } }

.preview {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px;
  background: var(--navy); color: #fff; border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.3);
  text-align: center; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1);
}
.preview span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.preview strong { font-size: 1.6rem; font-weight: 900; color: var(--gold); }
@keyframes pop { from { transform: translate(-50%, 20px) scale(.9); opacity: 0; } }

/* ---------- Called numbers dialog ---------- */
.called {
  width: min(100% - 24px, 640px); max-height: min(92dvh, 760px); padding: 18px 16px 20px;
  border: 0; border-radius: 20px; color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.called::backdrop { background: rgba(10, 16, 32, .55); }
.called__head { display: flex; justify-content: space-between; align-items: center; }
.called__head h2 { margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--navy); }
.called__close { border: 0; background: var(--bg); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.called__sub { margin: 4px 0 12px; color: var(--muted); font-weight: 600; }
.called__sub strong { color: var(--ink); }
.called__recent { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.called__recent:empty { display: none; }
.called__recent span { padding: 4px 10px; border-radius: 999px; background: var(--bg); font-size: .85rem; font-weight: 800; }
.called__recent span:first-child { background: var(--navy); color: #fff; }
.called__board { display: grid; gap: 6px; }
.called__line { display: grid; grid-template-columns: 34px repeat(15, minmax(0, 1fr)); gap: 3px; align-items: center; }
.called__line b { display: grid; place-items: center; height: 30px; border-radius: 8px; color: #fff; font-weight: 900; }
.called__line i {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  font-style: normal; font-size: clamp(.55rem, 2.3vw, .85rem); font-weight: 700; color: #a9adb6; background: var(--bg);
}
.called__line i.on { color: #fff; background: var(--navy); }
.called__line i.new { background: var(--dab); }

/* ---------- Winners ---------- */
.card.is-winner {
  outline: 4px solid var(--gold); outline-offset: 0;
  box-shadow: 0 0 0 8px rgba(252, 209, 22, .35), 0 12px 40px rgba(252, 209, 22, .55);
  animation: win-glow 1.2s ease-in-out infinite alternate;
}
.card.is-winner .card__meta::before {
  content: "BINGO!"; order: 2; margin-left: auto; margin-right: 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--gold); color: var(--navy); font-weight: 900; font-size: .85rem; letter-spacing: .04em;
}
.card.is-winner .card__serial { order: 3; }
.cell.is-win { background: var(--gold); }
.cell.is-win[aria-pressed="true"]::after { opacity: 0; }
.cell.is-win, .cell.is-win[aria-pressed="true"] { color: var(--navy); }
@keyframes win-glow {
  from { box-shadow: 0 0 0 6px rgba(252, 209, 22, .3), 0 12px 34px rgba(252, 209, 22, .4); }
  to { box-shadow: 0 0 0 12px rgba(252, 209, 22, .45), 0 16px 50px rgba(252, 209, 22, .75); }
}

.fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.win {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 16, 32, .6); animation: fade .3s ease;
}
.win__box {
  width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 22px 22px; background: #fff; border-radius: 22px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); animation: pop-in .45s cubic-bezier(.3, 1.5, .5, 1);
}
.win__bingo { font-size: clamp(2.6rem, 13vw, 3.6rem); font-weight: 900; letter-spacing: -.02em; color: var(--dab); line-height: 1; }
.win__title { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.win__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 10px; }
.win__cards span {
  padding: 8px 16px; border-radius: 14px; background: var(--navy); color: #fff;
  font-size: 1.7rem; font-weight: 900; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.win__cards span.is-mine { background: var(--gold); color: var(--navy); }
.win__close { height: 46px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800; cursor: pointer; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(.7); opacity: 0; } }

/* ---------- Prizes dialog ---------- */
.prizes__list { margin-top: 12px; }
.prizes__empty { margin: 0; padding: 36px 16px; text-align: center; color: var(--muted); font-weight: 600; background: var(--bg); border-radius: 14px; }

/* ---------- Sign in ---------- */
.auth, .nocards { width: min(100% - 32px, 440px); margin: 8px auto 0; }
.auth__form, .nocards {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 22px;
  background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(15, 42, 92, .12);
}
.auth h2, .nocards h2 { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--navy); text-align: center; }
.auth p, .nocards p { margin: 0; color: var(--muted); font-weight: 600; text-align: center; line-height: 1.45; }
.auth p strong { color: var(--ink); overflow-wrap: anywhere; }
.auth__field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .9rem; }
.auth__field input {
  height: 50px; padding: 0 14px; font: inherit; font-size: 1.05rem; font-weight: 600;
  border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff;
}
.auth__field input:focus { outline: none; border-color: var(--navy); }
.auth__code { text-align: center; font-size: 1.7rem !important; font-weight: 900 !important; letter-spacing: .3em; text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace !important; }
.auth__turnstile { min-height: 65px; }
.auth__code--player { font-size: 1.35rem !important; letter-spacing: .22em; }
.auth__error { color: var(--dab) !important; font-size: .9rem; }
.auth__submit { height: 50px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; }
.auth__submit:disabled { opacity: .6; cursor: wait; }
.auth__link { border: 0; background: none; color: var(--muted); font-weight: 700; text-decoration: underline; cursor: pointer; }
.nocards__pending { color: var(--dab) !important; }

.account { width: min(100% - 32px, 1100px); margin: 0 auto 8px; text-align: right; font-size: .82rem; color: var(--muted); font-weight: 600; }
.account strong { color: var(--ink); }
.account button { border: 0; background: none; padding: 0; color: var(--navy); font-weight: 800; text-decoration: underline; cursor: pointer; }

.foot { display: flex; justify-content: flex-end; width: min(100% - 32px, 1100px); margin: 0 auto; padding: 20px 0 28px; font-size: .78rem; font-weight: 600; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--navy); }

.cards:empty { display: none; }
.auth, .nocards { flex: 1; }
.auth__code::placeholder { color: #d3d6dc; }

/* Sign-in page: language switch in the top corner, no footer credit */
.is-auth .foot { display: none; }
.is-auth .lang {
  position: absolute; top: 12px; right: 16px; flex-direction: row; gap: 2px;
}
.is-auth .lang > span { display: inline; }
.is-auth .lang button { padding: 6px 10px; font-size: .9rem; }
.is-auth .subline { grid-template-columns: 1fr; grid-template-areas: "cause"; }
.is-auth .logos--top { padding-top: 48px; }

.is-booting body { visibility: hidden; }