:root{--white: rgb(255, 255, 255);--black: rgb(0, 0, 0);--green: rgb(67, 150, 78);--blue: rgb(37, 65, 133);--gray: rgb(189, 196, 199)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--blue);color:var(--white);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{display:flex;justify-content:center}button{font-family:inherit}button:focus-visible{outline:3px solid var(--white);outline-offset:2px}.app{width:100%;max-width:480px;min-width:0;min-height:100dvh;padding:16px;display:flex;flex-direction:column;gap:16px}.app-header{position:relative;display:flex;justify-content:center}.logo{margin:0;min-width:0}.logo svg{display:block;width:100%;height:auto;max-width:280px}.new-card-button{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--white);background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,transform .1s ease}.new-card-button:hover{background:var(--black)}.new-card-button:active{transform:scale(.94)}.new-card-button svg{width:22px;height:22px}.new-card-button.spinning svg{animation:refresh-spin .6s linear infinite}@keyframes refresh-spin{to{transform:rotate(360deg)}}.bingo-status{margin:0;padding:10px;border-radius:8px;background:var(--green);color:var(--white);text-align:center;font-weight:800;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase}.bingo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.bingo-grid__letter{display:flex;align-items:center;justify-content:center;min-width:0;min-height:32px;font-weight:800;font-size:1.4rem;color:var(--white)}.bingo-grid__letter img{display:block;height:32px;width:auto}.bingo-cell{aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;border:1px solid var(--gray);background:var(--white);color:var(--blue);font-weight:700;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.bingo-cell:disabled{cursor:default}.bingo-grid.spinning .bingo-cell:not(.free){border-color:var(--green)}.bingo-cell.marked{background:var(--green);border-color:var(--green);color:var(--white)}.bingo-cell.free{background:var(--gray);border-color:var(--gray);color:var(--black)}.cell-content{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;overflow:hidden;text-align:center;font-size:14px;line-height:1.15;text-transform:uppercase;letter-spacing:.01em}.cell-content__text{transform-origin:center}.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20}.confetti__piece{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:forwards}@keyframes confetti-fall{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--drift),105vh) rotate(var(--spin));opacity:.9}}@media(prefers-reduced-motion:reduce){.confetti{display:none}}.dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0009}.dialog{width:100%;max-width:320px;padding:24px;border-radius:10px;background:var(--white);color:var(--black);box-shadow:0 10px 30px #0006}.dialog h2{margin:0 0 16px;font-size:1.1rem}.dialog__actions{display:flex;gap:8px;justify-content:flex-end}.dialog__actions button{padding:8px 16px;border-radius:6px;border:2px solid var(--blue);background:var(--white);color:var(--blue);font-weight:600;cursor:pointer}.dialog__actions button:hover{background:var(--gray)}.dialog__actions button.confirm{background:var(--green);border-color:var(--green);color:var(--white)}.dialog__actions button.confirm:hover{background:var(--blue);border-color:var(--blue)}
