:root{--bg: #fdf6f0;--surface: #ffffff;--text: #4a3728;--text-light: #8b7355;--accent: #e8a0bf;--accent-light: #fce4ec;--mint: #a8d8c0;--mint-light: #e0f2ec;--lavender: #c4b0e0;--lavender-light: #ede7f6;--peach: #f5c6aa;--peach-light: #fff3e8;--bingo-gold: #ffd54f;--shadow: 0 2px 8px rgba(74, 55, 40, .08);--shadow-hover: 0 4px 16px rgba(74, 55, 40, .12);--radius: 1rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}.app{max-width:540px;margin:0 auto;padding:2rem 1rem 3rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.header{text-align:center}.title{font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.subtitle{margin-top:.35rem;font-size:.95rem;color:var(--text-light)}.progress{margin-top:.75rem;display:inline-flex;align-items:baseline;gap:.25rem}.progress-count{font-size:1.75rem;font-weight:700;color:var(--accent)}.progress-label{font-size:.9rem;color:var(--text-light)}.bingo-banner{display:flex;align-items:center;gap:.5rem;padding:.6rem 2rem;background:linear-gradient(135deg,var(--bingo-gold),#ffe082);color:#5d4037;font-size:1.25rem;font-weight:700;letter-spacing:.15em;border-radius:2rem;box-shadow:0 4px 20px #ffd54f66;animation:pop .4s ease}.bingo-star{font-size:1.4rem}@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.board{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;width:100%}.tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem;border:2px solid transparent;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);cursor:pointer;transition:all .2s ease;font-family:inherit;color:var(--text);-webkit-tap-highlight-color:transparent}.tile:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.tile:active{transform:scale(.96)}.tile-check{font-size:1.2rem;font-weight:700;line-height:1;color:var(--mint);min-height:1.3rem}.tile-text{font-size:.7rem;font-weight:500;text-align:center;line-height:1.2}.tile.completed{background:var(--mint-light);border-color:var(--mint)}.tile.completed .tile-check{color:#4caf50}.tile.completed .tile-text{color:#2e7d32}.tile.bingo{background:linear-gradient(135deg,#fff9c4,#fff3e0);border-color:var(--bingo-gold);box-shadow:0 2px 12px #ffd54f59}.tile.bingo .tile-check{color:#f9a825}.tile.bingo .tile-text{color:#e65100;font-weight:600}.actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{padding:.65rem 1.5rem;border:none;border-radius:2rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.btn:active{transform:scale(.96)}.btn-reset{background:var(--accent-light);color:#c2185b}.btn-reset:hover{background:var(--accent);color:#fff}.btn-new{background:var(--lavender-light);color:#5e35b1}.btn-new:hover{background:var(--lavender);color:#fff}@media(max-width:420px){.app{padding:1.25rem .75rem 2rem;gap:1rem}.title{font-size:1.5rem}.board{gap:.4rem}.tile{border-radius:.75rem;padding:.35rem}.tile-text{font-size:.58rem}.tile-check{font-size:1rem}.btn{padding:.55rem 1.2rem;font-size:.85rem}}