@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Patrick+Hand&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{padding-top:20px;display:flex;justify-content:center;background-color:#f1f1f1;font-family:Patrick Hand,cursive}.container{max-width:400px;background-color:#fff;border:2px solid #333;border-radius:4px}.header{font-family:Patrick Hand;font-size:12px;letter-spacing:1px;text-align:center;background-color:#e8e8e8;padding:14px;border-bottom:2px solid #333}.score-section{display:flex;justify-content:center;align-items:center}.fencer{flex-grow:1;padding:20px}.fencer-name{text-align:center}.score{display:flex;justify-content:center;align-items:center;color:#000;font-size:30px;font-weight:800;font-family:Patrick Hand,cursive;border:2px solid black;border-radius:4px;background-color:#f5f5f5;padding:20px 0;margin-bottom:10px}.score-btns{display:flex;gap:8px}.fencer-name{font-size:24px;font-weight:500}.score-btns button{flex-grow:1;padding:10px;font-size:24px;font-weight:600;border:2px solid #333;border-radius:4px;cursor:pointer}.penalty-section{text-align:center}.penalties{display:flex}.penalty-fencer{flex-grow:1;padding:10px 20px 20px}.penalty-btns{display:flex;gap:5px}.penalty-btns button{flex-grow:1;font-family:Patrick Hands,cursive;font-weight:600;padding:8px 4px;border-radius:4px;cursor:pointer}.penalty-btn.yellow-card{background:#fff3cd;border:2px solid #856404}.penalty-btn.red-card{background:#f8d7da;border:2px solid #721c24}.penalty-btn.black-card{background:#343a40;border:2px solid #000;color:#fff}.penalty-cards{display:flex;justify-content:center;gap:5px;margin:10px 0;min-height:42px}.card{display:flex;justify-content:center;align-items:center;font-weight:600;width:28px;height:38px}.yellow-card{background:linear-gradient(135deg,#fff3cd,#ffe08a);border:2px solid #856404;border-radius:4px}.red-card{background:linear-gradient(135deg,#f8d7da,#f1b0b7);border:2px solid #721c24;border-radius:4px}.black-card{background:linear-gradient(135deg,#343a40,#23272b);border:2px solid #000;border-radius:4px;color:#fff}.timer-section{text-align:center;padding:20px;border-bottom:2px solid #333}.period-display{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:10px;transition:all .3s ease}.period-label{font-size:24px;font-weight:600;margin-bottom:10px}.period-indicator{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border:3px solid black;border-radius:50%;background:#fff;font-weight:700;cursor:pointer;margin-bottom:10px}.period-indicator.active{color:#fff;background-color:#000;transform:scale(1.2);box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.timer-display{display:flex;align-items:center;justify-content:center;border:3px solid black;border-radius:4px;padding:10px 0;font-family:Patrick Hand,cursive;font-weight:700;font-size:48px;letter-spacing:2px;margin-bottom:10px}.timer-controls{display:flex;justify-content:center;gap:10px}.timer-controls button{flex-grow:1;padding:16px;border-radius:4px;font-weight:700;cursor:pointer}.start-btn{background:#d4edda;border:3px solid #28a745}.stop-btn{background:#f8d8db;border:3px solid #dc3545}.reset-btn{background:#fff3cc;border:3px solid #ffc107}