:root{color-scheme:only light;font-family:Outfit,sans-serif;background:#f4f6f8;color:#1f1f1f}body,html{margin:0;padding:0;height:100%;background:#f4f6f8!important;color:#1f1f1f!important}@media (prefers-color-scheme: dark){body,.app{background:#f4f6f8!important;color:#1f1f1f!important}}.app{display:flex;flex-direction:column;min-height:100vh;background:#f4f6f8;font-family:Outfit,sans-serif;margin:0;padding:0;overflow:hidden}.content{flex:1 0 auto;display:flex;flex-direction:column;width:100%}.whatsapp-icon{position:absolute;top:1rem;right:1rem;color:#1f1f1f;cursor:pointer;text-decoration:none;z-index:1}.header{position:relative;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem 1rem}.auth-form{width:100%;max-width:320px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.header img.logo{height:120px}.logout-button{position:absolute;top:1.5rem;right:1.5rem;background:#1f1f1f;color:#fff;padding:.45rem .9rem;border:none;border-radius:9999px;font-size:.85rem;cursor:pointer}.main{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:2rem 2.5rem}.greeting{font-size:1.5rem;font-weight:700;margin-bottom:0;margin-top:.2rem}.card{background:#fff;padding:1.5rem;border-radius:14px;box-shadow:0 4px 24px #0000000d;max-width:500px;width:100%;text-align:center;margin-bottom:-1rem;position:relative}.card .title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;margin-top:.2rem}.card h2{font-size:1.1rem;margin:0 0 1.25rem}.card h4{font-size:1.2rem;margin-bottom:-.7rem}.card p{margin:.5rem 0}ul{list-style:none;padding:0;margin-top:.5rem}ul li{margin:.3rem 0;font-size:.95rem}.subtitle{margin-top:0rem;margin-bottom:1.5rem;font-size:.9rem;line-height:1.5rem;color:#666}.player-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem .1rem;padding-left:0;list-style:none;margin:.5rem 0 1rem;justify-items:center;font-size:.95rem;word-break:keep-all}.player-grid li{text-align:left;margin:0;padding-left:0rem;font-size:.95rem}.team-list{list-style:none;padding:0;margin:0;font-size:.95rem;display:flex;flex-direction:column;gap:.2rem;text-align:center}.team-list li{margin:0;padding:0;line-height:1.1}.team-list li.dragging{transform:scale(1.05);box-shadow:0 8px 16px #0003;z-index:1000;opacity:.95}.team-list li.drag-over{background-color:#3b82f626}.captain-badge{display:inline-block;margin-left:.25rem;padding:.1rem .3rem;background:#ef2d32;color:#fff;font-size:.65rem;font-weight:600;border-radius:9999px;vertical-align:top;text-align:center;margin-top:.04rem;line-height:1.1}button{font-family:inherit;font-weight:600;background-color:#1f1f1f;color:#fff;padding:.5rem 1rem;border:none;border-radius:9999px;font-size:.95rem;cursor:pointer;margin:.35rem}button:hover{background-color:#333}.game-button:hover{transform:translateY(-2px)}input[type=text],input[type=email],input[type=password]{padding:.5rem;margin-bottom:1rem;width:100%;border:1px solid #ddd;border-radius:6px;font-size:1rem}.alert{padding:.75rem;background:#ffe8e8;border:1px solid #ffb3b3;color:#a80000;border-radius:6px;margin-bottom:1rem}.footer{text-align:center;padding:2rem 0;font-size:.85rem;color:#777;background:#f4f6f8;flex-shrink:0;width:100%;margin-top:auto}.footer-logo{height:48px}.footer-link{color:#ef2d32;text-decoration:none;font-weight:400}.footer-link:hover{text-decoration:underline}.footer p{margin:.2rem 0;line-height:1}.fade-in{margin-bottom:1rem;animation:fadeIn .4s ease-in forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.logout-area{margin-top:2rem;text-align:center}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:999}.modal{background:#fff;padding:2rem;border-radius:1rem;max-width:320px;width:90%;box-shadow:0 10px 25px #00000040;text-align:center}.modal h3{margin-top:0;font-size:1.5rem;font-weight:700}.modal p{margin:1rem 0;font-size:1rem;color:#333}.modal-buttons{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem;border:none;border-radius:9999px}.btn{padding:.5rem 1.2rem;border:none;border-radius:9999px;font-size:1rem;cursor:pointer}.btn-danger{background-color:#ef2d32;border:none;border-radius:9999px;color:#fff}.btn-secondary{background-color:#ccc;border:none;border-radius:9999px;color:#000}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;padding:2rem 0;color:#333}.loading-spinner{width:25px;height:25px;border:4px solid #ccc;border-top:4px solid #ef2d32;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dots{0%{content:""}33%{content:"."}66%{content:".."}to{content:"..."}}.fade-container{animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.games-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding:1rem 0;width:100%;max-width:500px;margin:0 auto}.games-wrapper{display:flex;justify-content:center;width:100%}@media (min-width: 768px){.card{padding:2rem}.games-grid{gap:1.5rem}}.wave{display:inline-block;transform-origin:70% 70%;animation:wave-animation 1.5s ease-in-out infinite}@keyframes wave-animation{0%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(14deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(10deg)}to{transform:rotate(0)}}.paid-badge{margin-left:.5rem;background-color:#10b981;color:#fff;padding:.2rem .6rem;border-radius:4px;font-size:.75rem;font-weight:600}.paid-toggle{margin-left:.5rem;background:transparent;border:none;cursor:pointer;font-size:.85rem;color:#3b82f6;text-decoration:underline;padding:0}.auth-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}.auth-btn-primary{width:100%;padding:.8rem 1rem;border:none;border-radius:9999px;background:#1f1f1f;color:#fff;font-weight:600;transition:background .2s}.auth-btn-primary:hover{background:#ef2d32}.auth-link-row{display:flex;justify-content:space-between;margin-top:.75rem}.auth-link{background:none;border:none;color:#1f1f1f;font-size:.9rem;cursor:pointer;padding:0}.auth-link:hover{text-decoration:underline}.auth-link{background:transparent;border:none;cursor:pointer;font-size:.85rem;color:#ef2d32;padding:0;margin:0}.self-pay-btn{background-color:#10b981;border:none;border-radius:9999px;color:#fff;padding:.4rem 1rem;justify-content:center;font-size:.95rem;cursor:pointer;width:auto;margin-top:-.4rem;margin-bottom:-.6rem;display:inline-flex;align-items:center}.self-pay-btn:disabled{background-color:#10b981;border:none;border-radius:9999px;color:#fff;padding:.4rem 1rem;font-size:.95rem;cursor:pointer;width:auto;margin-top:-.4rem;margin-bottom:-.6rem;opacity:.6;cursor:not-allowed;align-items:center}.paid-indicator{display:inline-block;width:.6rem;height:.6rem;background-color:#10b981;border-radius:50%}.payment-banner{font-size:.9rem;padding:.4rem .8rem;border-radius:4px;max-width:240px;text-align:center}.payment-banner.error{background-color:#ffe8e8;color:#a80000;margin-top:1rem}.payment-banner.success{background-color:#e6ffed;color:#10703d;margin-top:1rem}.spinner{border:3px solid rgba(255,255,255,.3);border-top:3px solid #fff;border-radius:50%;width:1rem;height:1rem;animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.payment-summary{background:#f9f9f9;padding:.75rem;border-radius:6px;font-size:.95rem;display:flex;justify-content:space-around}.status-indicator{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin:0 0rem .1rem .3rem;vertical-align:middle}.status-confirmed{background-color:#10b981}.status-standby{background-color:#f59e0b}.status-unavailable{background-color:#ef2d32}.status-unconfirmed{background-color:#6b7280}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}.status-indicator{animation:pulse 1.5s ease-in-out infinite}.loading-logo-wrapper{display:flex;justify-content:center;align-items:center;background-color:#ef2d32;height:100vh;width:100vw;opacity:1;transition:opacity .5s ease}.loading-logo-wrapper.fade-out{opacity:0}.loading-logo{width:180px;height:180px;transition:transform .5s ease,opacity .5s ease;transform-origin:center}.loading-logo-wrapper.fade-out .loading-logo{transform:scale(2);opacity:0}.dots{text-align:center;margin-top:.8rem}.dots span{font-size:1.2rem;margin:0 .2rem;color:#888}.dots span.active{color:#1f1f1f}