@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";*{box-sizing:border-box}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;min-height:100dvh;background:#dc2626}#root{min-height:100dvh}body{overscroll-behavior-y:contain}@supports (padding: max(0px)){body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));padding-bottom:max(0px,env(safe-area-inset-bottom))}}.welcome-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#dc2626,#b91c1c)}.welcome-card{background:#fff;border-radius:1.5rem;padding:2rem;max-width:380px;width:100%;box-shadow:0 20px 40px #0003;text-align:center}.welcome-icon{font-size:4rem;margin-bottom:1rem}.welcome-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:1.75rem;color:#dc2626;margin:0 0 1.5rem;line-height:1.3}.welcome-text{color:#374151;font-size:1rem;line-height:1.6;margin:0 0 1rem}.welcome-subtext{color:#6b7280;font-size:.95rem;font-weight:600;margin:0 0 2rem}.welcome-button{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:700;border-radius:.75rem;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px;width:100%}.welcome-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc262666}.welcome-button:active{transform:translateY(0)}.name-entry{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#dc2626,#b91c1c)}.name-entry-card{background:#fff;border-radius:1.5rem;padding:2rem;max-width:400px;width:100%;box-shadow:0 20px 40px #0003}.name-entry-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:2.5rem;color:#dc2626;text-align:center;margin:0 0 1rem;text-transform:uppercase;letter-spacing:2px}.name-entry-description{color:#4b5563;text-align:center;line-height:1.6;margin:0 0 2rem;font-size:.95rem}.name-entry-form{display:flex;flex-direction:column;gap:1.5rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-label{font-weight:600;color:#374151;font-size:1rem}.name-input{padding:1rem;font-size:1.1rem;border:2px solid #e5e7eb;border-radius:.75rem;transition:all .2s;outline:none}.name-input:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.name-input::placeholder{color:#9ca3af}.input-error{color:#dc2626;font-size:.875rem;font-weight:500}.start-button{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:1rem 2rem;font-size:1.2rem;font-weight:700;border-radius:.75rem;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc262666}.start-button:active{transform:translateY(0)}.bingo-square{aspect-ratio:1;border-radius:.75rem;overflow:hidden;cursor:pointer;transition:all .2s;position:relative;background:linear-gradient(145deg,#fce7f3,#fbcfe8);border:3px solid #f9a8d4}.bingo-square:nth-child(odd){background:linear-gradient(145deg,#fbcfe8,#f9a8d4)}.bingo-square:active{transform:scale(.98)}.bingo-square.completed{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e4d}.bingo-square.winning{animation:pulse 1s infinite;border-color:#fbbf24;box-shadow:0 0 20px #fbbf2499}@keyframes pulse{0%,to{box-shadow:0 0 20px #fbbf2499}50%{box-shadow:0 0 30px #fbbf24e6}}.hidden-input{display:none}.square-content{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:.5rem;text-align:center}.square-text{font-size:.7rem;font-weight:600;color:#831843;margin:0 0 .25rem;line-height:1.3;text-transform:uppercase}.tap-hint{font-size:.6rem;color:#9d174d;opacity:.7;position:absolute;bottom:.25rem}.square-image-container{width:100%;height:100%;position:relative}.square-image{width:100%;height:100%;object-fit:cover}.square-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);padding:.5rem .25rem .25rem;display:flex;justify-content:space-between;align-items:flex-end}.square-label{color:#fff;font-size:.55rem;font-weight:600;text-transform:uppercase;flex:1;line-height:1.2}.remove-button{background:#dc2626e6;color:#fff;border:none;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:.25rem}.remove-button:active{background:#b91c1c}.bingo-square.uploading{pointer-events:none;opacity:.8}.square-uploading{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;color:#831843;font-size:.7rem;font-weight:600}.upload-spinner{width:24px;height:24px;border:3px solid rgba(131,24,67,.2);border-top-color:#831843;border-radius:50%;animation:spin 1s linear infinite}@media(min-width:400px){.square-text{font-size:.75rem}.tap-hint{font-size:.65rem}.square-label{font-size:.6rem}}@media(min-width:500px){.square-text{font-size:.85rem}.tap-hint,.square-label{font-size:.7rem}.remove-button{width:1.5rem;height:1.5rem}}.bingo-board-container{min-height:100dvh;background:linear-gradient(135deg,#dc2626,#b91c1c);padding:1rem;display:flex;flex-direction:column}.board-header{text-align:center;margin-bottom:1rem}.board-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:2rem;color:#fff;margin:0;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.player-greeting{color:#fecaca;margin:.25rem 0;font-size:1rem}.win-condition{color:#fca5a5;margin:0;font-size:.75rem}.progress-bar{background:#fff3;border-radius:1rem;height:.5rem;margin:.75rem auto;max-width:300px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#22c55e,#4ade80);height:100%;border-radius:1rem;transition:width .3s ease}.progress-text{color:#fecaca;font-size:.75rem;margin:0}.bingo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:500px;margin:0 auto;flex:1}.board-footer{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem;max-width:300px;margin-left:auto;margin-right:auto;width:100%}.submit-button-footer{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:1rem;font-size:1rem;font-weight:700;border-radius:.75rem;cursor:pointer;text-transform:uppercase;letter-spacing:1px}.submit-button-footer:disabled{opacity:.7;cursor:not-allowed}.reset-button{background:transparent;color:#fecaca;border:2px solid #fecaca;padding:.75rem;font-size:.875rem;font-weight:600;border-radius:.75rem;cursor:pointer}.celebration-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.celebration-modal{background:#fff;border-radius:1.5rem;padding:2rem;text-align:center;max-width:350px;width:100%;position:relative;overflow:hidden}.celebration-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:3rem;color:#dc2626;margin:0 0 1rem;text-transform:uppercase;animation:bounce .5s ease infinite}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.celebration-text{font-size:1.1rem;color:#374151;margin:0 0 .5rem}.celebration-subtext{font-size:.9rem;color:#6b7280;margin:0 0 1.5rem}.submit-error{color:#dc2626;font-size:.875rem;margin:0 0 1rem}.celebration-buttons{display:flex;flex-direction:column;gap:.75rem}.submit-button{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:1rem;font-size:1rem;font-weight:700;border-radius:.75rem;cursor:pointer;text-transform:uppercase;letter-spacing:1px}.submit-button:disabled{opacity:.7;cursor:not-allowed}.continue-button{background:transparent;color:#6b7280;border:2px solid #e5e7eb;padding:.75rem;font-size:.875rem;font-weight:600;border-radius:.75rem;cursor:pointer}.confetti-container{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti{position:absolute;width:10px;height:10px;top:-10px;animation:confetti-fall 3s ease-in-out infinite}.confetti-0{background:#dc2626;left:10%;animation-delay:0s}.confetti-1{background:#f59e0b;left:25%;animation-delay:.2s}.confetti-2{background:#22c55e;left:40%;animation-delay:.4s}.confetti-3{background:#3b82f6;left:55%;animation-delay:.6s}.confetti-4{background:#8b5cf6;left:70%;animation-delay:.8s}.confetti-5{background:#ec4899;left:85%;animation-delay:1s}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(400px) rotate(720deg);opacity:0}}.success-screen{min-height:100dvh;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;padding:1rem}.success-card{background:#fff;border-radius:1.5rem;padding:2rem;text-align:center;max-width:350px;width:100%}.success-icon{font-size:4rem;margin-bottom:1rem}.success-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:2rem;color:#16a34a;margin:0 0 1rem}.success-text{color:#374151;margin:0 0 1.5rem;line-height:1.6}.play-again-button{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:1rem 2rem;font-size:1rem;font-weight:700;border-radius:.75rem;cursor:pointer;text-transform:uppercase;letter-spacing:1px}.coffee-order-screen{min-height:100dvh;background:linear-gradient(135deg,#dc2626,#b91c1c);padding:1rem}.coffee-order-container{max-width:500px;margin:0 auto}.order-header{text-align:center;margin-bottom:1.5rem}.order-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:2rem;color:#fff;margin:0;text-transform:uppercase;letter-spacing:2px}.order-subtitle{color:#fecaca;margin:.5rem 0 0;font-size:1rem}.section-title{color:#fff;font-size:1.25rem;margin:0 0 1rem;text-align:center}.drink-selection{background:#fff;border-radius:1rem;padding:1.5rem}.drink-selection .section-title{color:#374151}.drink-list{display:flex;flex-direction:column;gap:.75rem}.drink-card{background:linear-gradient(145deg,#fce7f3,#fbcfe8);border:2px solid #f9a8d4;border-radius:.75rem;padding:1rem;cursor:pointer;text-align:left;transition:all .2s;display:flex;flex-direction:column;gap:.25rem}.drink-card:active{transform:scale(.98)}.drink-name{font-weight:700;color:#831843;font-size:1rem}.drink-description{font-size:.85rem;color:#9d174d}.drink-customization{background:#fff;border-radius:1rem;padding:1.5rem}.drink-customization .section-title{color:#dc2626;margin-bottom:1.5rem}.back-button{background:none;border:none;color:#6b7280;font-size:.9rem;cursor:pointer;padding:0;margin-bottom:1rem}.option-group{margin-bottom:1.5rem}.option-title{color:#374151;font-size:1rem;margin:0 0 .75rem}.option-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.option-buttons.syrup-options{gap:.5rem}.option-button{background:#f3f4f6;border:2px solid #e5e7eb;border-radius:.5rem;padding:.75rem 1rem;font-size:.9rem;font-weight:500;color:#374151;cursor:pointer;transition:all .2s;flex:1;min-width:fit-content}.syrup-options .option-button{flex:0 0 auto}.option-button:active{transform:scale(.98)}.option-button.selected{background:linear-gradient(135deg,#dc2626,#b91c1c);border-color:#dc2626;color:#fff}.option-note{color:#6b7280;font-size:.85rem;margin:.5rem 0 0;font-style:italic}.submit-order-button{width:100%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:1rem;font-size:1.1rem;font-weight:700;border-radius:.75rem;cursor:pointer;text-transform:uppercase;letter-spacing:1px;margin-top:1rem;transition:all .2s}.submit-order-button:disabled{background:#9ca3af;cursor:not-allowed}.submit-order-button:not(:disabled):active{transform:scale(.98)}.order-complete-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#22c55e,#16a34a)}.order-complete-card{background:#fff;border-radius:1.5rem;padding:2rem;max-width:380px;width:100%;box-shadow:0 20px 40px #0003;text-align:center}.complete-icon{font-size:4rem;margin-bottom:1rem}.complete-title{font-family:Fredoka,Comic Sans MS,cursive,sans-serif;font-size:2rem;color:#16a34a;margin:0 0 1.5rem}.order-summary{background:#f0fdf4;border-radius:.75rem;padding:1rem;margin-bottom:1.5rem;border:2px solid #bbf7d0}.order-name{color:#374151;margin:0 0 .5rem;font-size:1rem}.order-name strong{color:#16a34a}.order-details{color:#4b5563;margin:0;font-size:.9rem;line-height:1.4}.complete-message{color:#4b5563;font-size:1rem;line-height:1.6;margin:0 0 2rem}.venmo-section{background:#eff6ff;border-radius:.75rem;padding:1.25rem;margin-bottom:1.5rem;border:2px solid #bfdbfe}.venmo-text{color:#374151;font-size:.95rem;margin:0 0 1rem}.venmo-button{background:#008cff;color:#fff;border:none;padding:1rem 2rem;font-size:1rem;font-weight:700;border-radius:.75rem;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:.5rem}.venmo-button:active{transform:scale(.98);background:#006ecc}.venmo-icon{font-size:1.2rem}.footer-note{color:#9ca3af;font-size:.9rem;margin:0;font-style:italic}.loading-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.error-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fef2f2;color:#991b1b;padding:2rem;text-align:center}.error-screen button{margin-top:1rem;background:#dc2626;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-size:1rem;cursor:pointer}