.bingo-page { background: #090b08; }
.bingo-pocket { display: none; }
.bingo-main { padding-top: 76px; }
.bingo-stage { position: relative; overflow: hidden; border-bottom: 1px solid #3b3e30; }
.bingo-stage-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.7); }
.bingo-stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,5,.96) 0%, rgba(5,7,5,.84) 44%, rgba(5,7,5,.7) 100%), linear-gradient(180deg, rgba(5,7,5,.18), rgba(5,7,5,.92)); }
.bingo-stage-content { position: relative; z-index: 2; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 82px; }
.bingo-intro { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 34px; }
.bingo-intro h1 { max-width: 680px; margin: 8px 0 0; font-size: 5rem; line-height: 1; }
.bingo-intro > p { max-width: 440px; margin: 0 0 8px; color: #cbc6ad; font-size: 1.05rem; line-height: 1.55; }
.bingo-live-light { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #65e47a; box-shadow: 0 0 12px #65e47a; }
.bingo-console { display: grid; grid-template-columns: 380px minmax(0, 1fr); min-height: 430px; border: 1px solid #555744; background: rgba(9,11,8,.93); box-shadow: 0 25px 70px rgba(0,0,0,.55); }
.current-draw { position: relative; display: grid; justify-items: center; padding: 28px; border-right: 1px solid #4a4c3d; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.018) 4px), #12150f; }
.current-draw-heading { display: flex; justify-content: space-between; width: 100%; color: #96927f; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.current-draw-heading strong { color: #65e47a; }
.draw-ball { display: grid; width: 190px; height: 190px; place-items: center; margin: 20px 0 13px; border: 9px solid #e9e1c5; border-radius: 50%; color: #18150e; background: #b8ad86; box-shadow: 0 0 0 5px #585544, 0 20px 42px rgba(0,0,0,.55), inset 0 7px 11px rgba(255,255,255,.42); }
.draw-ball small { margin-bottom: -43px; font-size: .85rem; font-weight: 900; }
.draw-ball strong { font-size: 5.4rem; line-height: 1; }
.draw-ball.has-number { background: #ffa500; animation: bingo-pop .42s ease-out; }
.draw-caption { margin: 0 0 20px; color: #e9e1c5; font-size: .8rem; font-weight: 800; }
.event-meta { display: grid; width: 100%; margin: auto 0 0; }
.event-meta div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid #36392f; }
.event-meta dt { color: #777967; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.event-meta dd { margin: 0; overflow: hidden; color: #d7d0b7; font-size: .7rem; font-weight: 800; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.number-board { display: grid; grid-template-rows: auto auto auto auto; align-content: center; padding: 28px; min-width: 0; }
.cards-summary { display: flex; align-items: center; gap: 14px 22px; margin-top: 22px; }
.cards-summary .button { flex: 0 1 auto; }
.claimed-card-count { min-width: 0; color: #d7d0b7; font-size: .85rem; line-height: 1.4; }
.claimed-card-count strong { color: #ffaf25; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cards-summary { gap: 14px; } .cards-summary .button { padding: 12px 10px; font-size: .7rem; } .claimed-card-count { font-size: .75rem; } }
.number-board > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.number-board header span { color: #ffa500; font-size: .64rem; font-weight: 900; }
.number-board h2 { margin: 2px 0 0; font-size: 1.55rem; }
.number-board header p { margin: 0; color: #8d8b77; font-size: .72rem; font-weight: 900; }
.number-board header p strong { color: #ffa500; font-size: 1.5rem; }
.number-board-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; align-content: start; }
.number-board-grid span, .number-board-grid .board-letter { display: grid; min-height: 29px; place-items: center; border: 1px solid #36392e; color: #757866; background: #171a14; font-size: .69rem; font-weight: 900; }
.number-board-grid .board-letter { min-height: 34px; border-color: #55451f; color: #ffaf25; background: #242014; font-size: 1rem; }
.number-board-grid span.is-drawn { border-color: #ffa500; color: #19140a; background: #ffa500; box-shadow: inset 0 0 0 2px #d98500; }
.board-stats { display: flex; gap: 25px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #36392e; color: #888875; font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.board-stats strong { color: #e7e1c5; }
.member-game { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 104px 0 120px; }
.member-game-heading { display: grid; grid-template-columns: 1fr minmax(300px, 480px); align-items: end; gap: 50px; }
.member-game-heading h2 { margin: 4px 0 0; font-size: 3rem; scroll-margin-top: 100px; }
.member-game-heading > p { margin: 0 0 10px; color: #aaa88f; }
.bingo-notice { display: flex; align-items: center; gap: 16px 28px; margin-top: 36px; padding: 18px 20px; border-left: 4px solid #ffa500; background: #171b13; }
.bingo-notice strong { color: #eee7cf; }
.bingo-notice span { flex: 1; color: #9c9b86; font-size: .84rem; }
.bingo-notice .button { flex: 0 0 auto; padding: 9px 14px; }
.winner-notice { border-color: #65e47a; background: #152419; }
.card-reservation { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; margin-top: 18px; padding: 24px; border: 1px solid #414438; background: #11140f; }
.card-reservation[hidden] { display: none; }
.card-reservation strong, .card-reservation span { display: block; }
.card-reservation strong { color: #ffa500; font-size: .84rem; text-transform: uppercase; }
.card-reservation span { margin-top: 4px; color: #96947f; font-size: .76rem; }
.card-count-picker { display: flex; }
.card-count-picker button { width: 43px; height: 43px; border: 1px solid #4c4f41; color: #d7d0b8; background: #1c1f18; cursor: pointer; font-weight: 900; }
.card-count-picker button + button { border-left: 0; }
.card-count-picker button[aria-pressed="true"] { color: #15120b; background: #ffa500; }
.bingo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.bingo-card { padding: 16px; border: 1px solid #6d6447; color: #24251f; background: #d9d0ad; box-shadow: 0 18px 32px rgba(0,0,0,.28); }
.bingo-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 3px 12px; }
.bingo-card header span, .bingo-card header strong { display: block; }
.bingo-card header span { font-size: .56rem; font-weight: 900; }
.bingo-card header strong { font-size: .92rem; }
.bingo-card header em { color: #715b28; font-size: .58rem; font-style: normal; font-weight: 900; }
.card-letters, .card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.card-letters { margin-bottom: 4px; }
.card-letters strong { display: grid; height: 35px; place-items: center; color: #eee4c6; background: #21251c; font-size: 1.15rem; }
.card-grid button { position: relative; display: grid; aspect-ratio: 1; min-width: 0; place-items: center; border: 1px solid #aaa17e; color: #33352c; background: #eee6ca; font-size: 1.08rem; font-weight: 900; }
.card-grid button.called:not(.marked) { cursor: pointer; box-shadow: inset 0 0 0 2px #e29a15; }
.card-grid button:disabled:not(.free-space) { opacity: .55; }
.card-grid button.marked::after { position: absolute; width: 72%; height: 72%; border: 3px solid #bc2e24; border-radius: 50%; content: ""; transform: rotate(-8deg); }
.card-grid button.free-space { color: #eae2c6; background: #252920; font-size: .58rem; line-height: 1.05; }
.card-grid button.free-space small { display: block; color: #ffa500; font-size: .48rem; }
.bingo-card.has-bingo { border-color: #ff7a21; box-shadow: 0 0 0 3px #ff7a21, 0 18px 36px rgba(0,0,0,.38); }
.bingo-card.bingo-confirmed { border-color: #55d36d; box-shadow: 0 0 0 3px #55d36d, 0 18px 36px rgba(0,0,0,.38); }
.bingo-alert { margin: 13px 0 0; padding: 10px; color: #fff3d1; background: #b33c24; font-size: .7rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.bingo-rules { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid #3b3e30; border-bottom: 1px solid #3b3e30; }
.bingo-rules > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; min-height: 92px; padding: 18px; }
.bingo-rules > div + div { border-left: 1px solid #3b3e30; }
.bingo-rules strong { color: #ffa500; font-family: Impact, "Arial Narrow", sans-serif; font-size: 2rem; font-weight: 400; }
.bingo-rules span { color: #d6cfb5; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.bingo-rules p { grid-column: 1 / -1; margin: 0; padding: 18px; border-top: 1px solid #3b3e30; color: #8f917c; font-size: .76rem; text-align: center; }
.bingo-support { display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 80px; padding: 100px max(24px, calc((100vw - 1180px) / 2)); border-top: 1px solid #3b3e30; background: #11150f; }
.bingo-support h2 { margin: 8px 0 20px; font-size: 3rem; }
.bingo-support > div > p:last-child { max-width: 650px; color: #aaa88f; }
.bingo-donation { padding: 26px; border: 1px solid #484b3d; background: #090c08; }
.bingo-donation fieldset { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; border: 0; }
.bingo-donation legend { margin-bottom: 13px; color: #a6a38c; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.bingo-donation label { position: relative; }
.bingo-donation input[type="radio"] { position: absolute; opacity: 0; }
.bingo-donation label span { display: grid; height: 46px; place-items: center; border: 1px solid #45483a; color: #d8d1b9; cursor: pointer; font-weight: 900; }
.bingo-donation input:checked + span { color: #15120b; background: #ffa500; }
.bingo-donation .button { width: 100%; margin-top: 14px; cursor: pointer; }
.bingo-donation > a { display: block; margin-top: 13px; color: #8e907b; font-size: .72rem; text-align: center; }
@keyframes bingo-pop { 0% { transform: scale(.72) rotate(-8deg); } 70% { transform: scale(1.05); } 100% { transform: none; } }
@media (max-width: 900px) {
  .bingo-main { padding-top: 66px; }
  .bingo-stage-content { padding-top: 45px; }
  .bingo-intro { display: block; }
  .bingo-intro > p { margin-top: 22px; }
  .bingo-console { grid-template-columns: 1fr; }
  .current-draw { border-right: 0; border-bottom: 1px solid #4a4c3d; }
  .number-board-grid span { min-height: 31px; }
  .member-game-heading, .bingo-support { grid-template-columns: 1fr; }
  .bingo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bingo-support { gap: 45px; }
}
@media (max-width: 560px) {
  .bingo-page { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .bingo-pocket { display: flex; position: fixed; inset: auto 0 0; z-index: 40; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #555744; background: #10150e; }
  .bingo-pocket span { color: #a5a890; font-size: .62rem; text-transform: uppercase; }
  .bingo-pocket strong { display: block; color: #ffa500; font-size: 1.05rem; }
  .bingo-pocket a { color: #e7e1c5; font-size: .76rem; font-weight: 800; }
  .bingo-main { padding-top: calc(62px + env(safe-area-inset-top)); }
  .bingo-stage { min-height: auto; }
  .bingo-stage-content, .member-game { width: calc(100% - 28px); }
  .bingo-stage-content { padding: 38px 0 52px; }
  .bingo-intro h1 { font-size: 3.4rem; }
  .bingo-intro > p { font-size: .9rem; }
  .bingo-console { border-color: #4e503f; }
  .current-draw, .number-board { padding: 20px 16px; }
  .draw-ball { width: 152px; height: 152px; }
  .draw-ball strong { font-size: 4.25rem; }
  .draw-ball small { margin-bottom: -35px; }
  .number-board h2 { font-size: 1.22rem; }
  .number-board-grid { gap: 1px; }
  .number-board-grid span { min-height: 27px; font-size: .61rem; }
  .member-game { padding: 72px 0 80px; }
  .member-game-heading { display: block; }
  .member-game-heading h2 { font-size: 3.1rem; }
  .member-game-heading > p { margin-top: 18px; }
  .bingo-notice { align-items: stretch; flex-direction: column; }
  .card-reservation { grid-template-columns: 1fr; gap: 16px; }
  .card-count-picker button { flex: 1; }
  .bingo-cards { grid-template-columns: 1fr; }
  .card-grid button { font-size: 1.05rem; }
  .bingo-rules { grid-template-columns: 1fr; }
  .bingo-rules > div + div { border-top: 1px solid #3b3e30; border-left: 0; }
  .bingo-support { grid-template-columns: 1fr; gap: 36px; padding: 72px 18px; }
  .bingo-donation { padding: 18px; }
  .board-stats { flex-wrap: wrap; gap: 8px 16px; }
}
.bingo-terms { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 40px; border-top: 1px solid #3b3e30; color: #b6baa7; font-size: 13px; line-height: 1.75; }
.bingo-terms h2 { margin: 0 0 12px; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; text-transform: none; letter-spacing: 0; color: #dedfce; }
.bingo-terms ul { margin: 0; padding-left: 20px; }
.bingo-terms li + li { margin-top: 7px; }
@media (prefers-reduced-motion: reduce) { .draw-ball.has-number { animation: none; } }