.shot-tracker{width:100%;margin:0 auto;padding:15px;box-sizing:border-box}.controls{margin-bottom:15px;display:flex;flex-direction:column;gap:10px}.control-group{display:flex;flex-wrap:wrap;gap:15px;align-items:center;padding:10px;background:#f8f9fa;border-radius:6px;box-shadow:0 1px 3px #0000000d}.direction-control,.period-control{display:flex;align-items:center;gap:8px}.direction-control span,.period-control span{font-weight:500;color:#2c3e50;font-size:13px}.direction-toggle,.period-btn{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;background-color:#4a90e2;color:#fff;font-size:13px;font-weight:500;transition:all .2s ease}.period-btn.active{background-color:#2c3e50}.data-controls{display:flex;flex-wrap:wrap;gap:10px;padding:10px;background:#f8f9fa;border-radius:6px;box-shadow:0 1px 3px #0000000d}.export-controls{display:flex;gap:8px;flex-wrap:wrap}.export-btn,.import-btn{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:100px}.export-btn{background-color:#27ae60}.export-btn:hover{background-color:#219a52}.import-btn{background-color:#e67e22}.import-btn:hover{background-color:#d35400}.rink-container{position:relative;width:100%;margin:0 auto;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.rink{width:100%;height:auto;display:block}.shot-marker-wrapper{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}.shot-marker{width:12px;height:12px;border-radius:50%;position:relative;box-shadow:0 1px 3px #0000004d;border:2px solid rgba(255,255,255,.8);transition:all .2s ease;pointer-events:auto}.shot-marker.temp{width:16px;height:16px;border:2px solid rgba(0,0,0,.7);background-color:#ffffffe6!important}.shot-marker:hover{transform:scale(1.3);box-shadow:0 2px 5px #0006}.shot-marker[style*="background-color: #FFD700"]{background-color:gold!important;border-color:#b8860b}.shot-marker[style*="background-color: #00FF00"]{background-color:#0f0!important;border-color:#006400}.shot-marker[style*="background-color: #FF4444"]{background-color:#f44!important;border-color:#8b0000}.distance-tooltip{display:none;opacity:0;position:absolute;background:#000000d9;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;white-space:nowrap;top:-28px;left:50%;transform:translate(-50%);transition:all .2s ease;z-index:1000;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 4px #0003;pointer-events:none}.shot-marker:hover .distance-tooltip{display:block;opacity:1;transform:translate(-50%) translateY(-4px)}.distance-tooltip:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.85)}.shot-type-popup{position:absolute;background:#fff;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;z-index:1000;box-shadow:0 2px 8px #00000026;width:140px}.shot-type-btn{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;text-align:center;position:relative;overflow:hidden}.shot-type-btn[style*="background-color: #FFD700"]{background-color:gold!important;color:#000;border:1px solid #B8860B}.shot-type-btn[style*="background-color: #00FF00"]{background-color:#0f0!important;color:#000;border:1px solid #006400}.shot-type-btn[style*="background-color: #FF4444"]{background-color:#f44!important;color:#fff;border:1px solid #8B0000}.shot-type-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.shot-type-btn:active{transform:translateY(0);box-shadow:none}.shot-type-btn.cancel{background-color:#95a5a6!important;color:#fff;border:1px solid #7f8c8d}.shot-type-btn.cancel:hover{background-color:#7f8c8d!important}.recent-shots{background:#f8f9fa;border-radius:8px;padding:1rem;margin-top:1rem;box-shadow:0 2px 4px #0000000d}.recent-shots-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e9ecef}.recent-shots-header h3{margin:0;color:#2c3e50;font-size:1.2rem}.shots-stats{display:flex;gap:1rem}.stat-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.stat-label{color:#6c757d}.stat-value{font-weight:600;color:#2c3e50}.stat-value.goals{color:#28a745}.stat-value.on-target{color:#ffc107}.stat-value.missed{color:#dc3545}.shots-list{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.shots-list-header{display:grid;grid-template-columns:.5fr .8fr 1.2fr .8fr .8fr;padding:.75rem 1rem;background:#f1f3f5;font-weight:600;color:#495057;font-size:.9rem;border-bottom:1px solid #dee2e6}.shot-item{display:grid;grid-template-columns:.5fr .8fr 1.2fr .8fr .8fr;padding:.75rem 1rem;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background-color .2s;align-items:center}.shot-item:hover{background-color:#f8f9fa}.shot-item.past-period{opacity:.7}.shot-number{font-weight:600;color:#495057}.period-badge{background:#e9ecef;padding:.2rem .5rem;border-radius:4px;font-size:.85rem;font-weight:600;color:#495057}.shot-type{display:flex;align-items:center;gap:.5rem}.type-indicator{width:8px;height:8px;border-radius:50%;display:inline-block}.shot-distance{font-family:monospace;color:#495057}.shot-time{color:#6c757d;font-size:.9rem}.no-shots{padding:2rem;text-align:center;color:#6c757d}.no-shots-icon{font-size:2rem;margin-bottom:.5rem}.no-shots .hint{font-size:.9rem;color:#adb5bd;margin-top:.5rem}@media (max-width: 768px){.shot-tracker{padding:0;width:100%}.controls{padding:10px}.control-group{flex-direction:column;align-items:stretch}.direction-toggle,.period-btn,.export-btn,.import-btn{min-height:44px;font-size:16px}.rink-container{width:100%;border-radius:0;margin:0}.shot-marker{width:16px;height:16px;border-width:2px}.shot-marker.temp{width:20px;height:20px;border-width:3px}.shot-type-popup{position:fixed;bottom:20px;left:50%!important;transform:translate(-50%)!important;width:90%;padding:16px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0003}.shot-type-btn{min-height:44px;font-size:16px;padding:12px}.recent-shots-header{flex-direction:column;align-items:flex-start;gap:.5rem}.shots-stats{flex-wrap:wrap;gap:.5rem}.shots-list-header,.shot-item{grid-template-columns:.5fr .8fr 1.2fr .8fr}.shot-time{display:none}.header-item:last-child{display:none}.distance-tooltip{font-size:14px;padding:6px 10px;top:-32px}}@media (max-width: 768px) and (orientation: landscape){.shot-tracker{display:flex;flex-direction:row;gap:16px;height:100vh;overflow:auto}.controls{width:250px;flex-shrink:0}.rink-container{flex:1}.shot-type-popup{position:absolute;width:auto;min-width:160px;left:0!important;bottom:auto;transform:none!important}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App{min-height:100vh;padding:20px}.home{max-width:1200px;margin:0 auto;padding:20px}h1{margin-bottom:1rem}