/* Hockey Bingo — scoped to its page; shares the other games' arena and cyan glass aesthetic. */
#bingo-page { background: #030d19; color: #f7faff; }
#bingo-page *, #bingo-page *::before, #bingo-page *::after { box-sizing: border-box; }
#bingo-page .hb-arena {
    position: relative; isolation: isolate; width: 100%; max-width: 540px;
    height: calc(100dvh - 60px); margin: 0 auto;
    background:
        radial-gradient(circle at top center, rgba(76, 177, 255, .14), transparent 38%),
        linear-gradient(180deg, rgba(7, 21, 43, .92), rgba(3, 12, 24, .98));
    overflow: hidden;
}
#bingo-page .hb-arena::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(4, 16, 31, .14), rgba(2, 10, 20, .60)),
        radial-gradient(circle at 50% 0%, rgba(95, 203, 255, .18), transparent 36%);
    pointer-events: none;
}
#bingo-page .hb-arena-background {
    position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; pointer-events: none; user-select: none;
}
#bingo-page .hb-screen {
    display: none; flex-direction: column; gap: 12px; height: 100%; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
#bingo-page .hb-screen.active { display: flex; }
#bingo-page .hb-panel {
    position: relative;
    border: 1px solid rgba(180, 231, 255, .72);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(120, 183, 233, .18), rgba(7, 22, 43, .42) 38%, rgba(28, 88, 140, .23) 100%),
        rgba(8, 24, 46, .26);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 0 28px rgba(98, 193, 255, .10),
        0 10px 30px rgba(0,0,0,.28),
        0 0 11px rgba(110, 222, 255, .32),
        0 0 34px rgba(53, 175, 246, .22),
        0 0 56px rgba(36, 128, 225, .10);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    overflow: hidden;
}
#bingo-page .hb-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 24%, transparent 78%, rgba(135, 220, 255, .08));
    pointer-events: none;
}
#bingo-page .hb-start-panel {
    margin: auto 8px; padding: clamp(20px, 4dvh, 32px) 18px;
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
#bingo-page .hb-logo { width: clamp(56px, 11dvh, 80px); height: clamp(56px, 11dvh, 80px); object-fit: contain; }
#bingo-page h1, #bingo-page h2, #bingo-page p { margin: 0; }
#bingo-page .hb-title { color: #f7faff; font-size: clamp(24px, 6vw, 30px); font-weight: 850; text-shadow: 0 0 18px rgba(77, 205, 255, .28); letter-spacing: .02em; }
#bingo-page .hb-desc { max-width: 340px; color: #d3e8ff; font-size: 14px; line-height: 1.5; }
#bingo-page .hb-rules, #bingo-page .hb-start-summary { color: #c7e5f8; font-size: 12px; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
#bingo-page .hb-button {
    min-height: 44px; padding: 11px 20px; border: 1px solid rgba(111, 223, 255, .95);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(35, 162, 219, .98), rgba(12, 101, 154, .98));
    color: white;
    font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px rgba(0,0,0,.25), 0 0 16px rgba(59, 196, 255, .18);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#bingo-page .hb-button:hover {
    border-color: #95eaff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(0,0,0,.28), 0 0 22px rgba(59, 196, 255, .26);
}
#bingo-page .hb-button:active { transform: scale(.98); }
#bingo-page .hb-button.secondary { background: linear-gradient(180deg, rgba(29, 76, 119, .48), rgba(7, 25, 45, .56)); color: #d9f5ff; border-color: rgba(141, 214, 255, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#bingo-page .hb-button:focus-visible, #bingo-page .hb-tile:focus-visible {
    outline: 3px solid #31d9ff; outline-offset: 2px;
}
#bingo-page .hb-back {
    align-self: flex-start; padding: 8px 12px; min-height: 36px;
    border: 1px solid rgba(166,224,255,.68); border-radius: 11px;
    color: #f7faff; background: rgba(5, 24, 45, .46); font: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#bingo-page .hb-back:focus-visible {outline: 3px solid #31d9ff; outline-offset: 2px;}
#bingo-page .hb-play-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#bingo-page .hb-play-top .hb-button { padding: 7px 10px; min-height: 36px; font-size: 12px; }
#bingo-page .hb-hud {display:flex; justify-content:space-between; padding: 10px 14px; font-size: 13px; font-weight: 800; gap: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22), 0 0 14px rgba(59, 196, 255, .10);}
#bingo-page .hb-hud strong { color: #9beeff; text-shadow: 0 0 13px rgba(63, 213, 255, .46); }
#bingo-page .hb-game-stage { width: min(100%, 480px); margin: 0 auto; display: flex; flex-direction: column; gap: 5px; }
#bingo-page .hb-letters, #bingo-page .hb-board { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
#bingo-page .hb-letters { padding: 0 5px; }
#bingo-page .hb-letters span { text-align: center; color: #b3f1ff; font-size: 17px; font-weight: 900; text-shadow: 0 0 9px rgba(57, 205, 255, .64), 0 0 21px rgba(56, 177, 244, .22); }
#bingo-page .hb-board {
    aspect-ratio: 1; grid-template-rows: repeat(5, minmax(0,1fr));
    padding: 6px; border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(8, 25, 45, .46), rgba(3, 15, 32, .64)),
        rgba(3, 15, 32, .16);
    border: 1px solid rgba(182,229,255,.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 0 28px rgba(75, 193, 255, .12),
        0 12px 28px rgba(0,0,0,.30),
        0 0 10px rgba(124, 236, 255, .32),
        0 0 34px rgba(62, 184, 255, .20),
        0 0 58px rgba(26, 126, 224, .10);
    backdrop-filter: blur(12px) saturate(155%);
    -webkit-backdrop-filter: blur(12px) saturate(155%);
    container-type: inline-size;
}
#bingo-page .hb-tile {
    position: relative;
    min-width: 0; min-height: 0; padding: 3px; border-radius: 10px;
    border: 1px solid rgba(163, 219, 255, .34); color: #f7faff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%),
        linear-gradient(140deg, rgba(34, 82, 127, .66), rgba(10, 31, 59, .72));
    font: inherit; font-size: clamp(9px, 3.3cqw, 12px); font-weight: 750;
    line-height: 1.18; text-align: center; overflow-wrap: break-word; hyphens: auto; text-shadow: 0 1px 3px rgba(0, 7, 20, .78);
    cursor: pointer; touch-action: manipulation;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#bingo-page .hb-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 26%);
    pointer-events: none;
}
#bingo-page .hb-tile:hover { border-color: rgba(167, 231, 255, .56); }
#bingo-page .hb-tile.is-marked {
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(145deg, rgba(23, 145, 200, .90), rgba(15, 77, 129, .78));
    border-color: #7eeeff;
    box-shadow:
        inset 0 0 14px rgba(126,240,255,.24),
        0 0 14px rgba(82, 223, 255, .38),
        0 0 28px rgba(82, 223, 255, .16),
        0 4px 12px rgba(0,0,0,.18);
    transform: translateY(-1px);
}
#bingo-page .hb-tile.is-winning { border-color: #effcff; box-shadow: inset 0 0 0 1px #7ae6ff, 0 0 15px rgba(94,223,255,.66), 0 0 34px rgba(94,223,255,.32); }
#bingo-page .hb-tile.is-free { background: linear-gradient(145deg, #1787bb, #0d557f); color: #fff; opacity: 1; cursor: default; border-color: rgba(175, 235, 255, .72); box-shadow: inset 0 0 16px rgba(109, 233, 255, .18), 0 0 12px rgba(82, 223, 255, .14); }
#bingo-page .hb-notice { text-align: center; padding: 9px 10px; color: #d7edfa; font-size: 13px; font-weight: 750; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18); }
#bingo-page .hb-notice.hb-celebrate {color: #91efff; animation: hb-flash .85s ease-out 1; }
#bingo-page .hb-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
#bingo-page .hb-actions .hb-button { min-height: 42px; font-size: 13px; }
#bingo-page .hb-stats-title {text-align:center;font-size:24px;font-weight:850;}
#bingo-page .hb-stats-intro {text-align:center;font-size:13px;color:#d1e9f9;}
#bingo-page .hb-stats-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#bingo-page .hb-stat {text-align:center;padding:14px 8px;min-width:0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22), 0 0 14px rgba(59, 196, 255, .10);}
#bingo-page .hb-stat strong {display:block;color:#a1eeff;font-size:clamp(24px,7vw,36px);font-weight:900; text-shadow: 0 0 18px rgba(75, 207, 255, .38);}
#bingo-page .hb-stat span {color:#d1e9f9;font-size:12px;font-weight:750;}
@keyframes hb-flash { 0% {filter:brightness(1.6)} 100% {filter:brightness(1)} }
@media (max-height: 635px) {
    #bingo-page .hb-screen { gap: 6px; }
    #bingo-page .hb-hud { padding-block: 6px; }
    #bingo-page .hb-game-stage { width: min(100%, 480px, calc(100dvh - 208px)); }
    #bingo-page .hb-notice { padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) { #bingo-page .hb-notice.hb-celebrate { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    #bingo-page .hb-button, #bingo-page .hb-tile { transition: none; }
}