.best-plays-app{width:100%;max-width:1400px;margin:0 auto;padding:2rem 1rem;font-family:Open Sans,sans-serif;background-color:transparent;min-height:100vh}.tabs-container{display:flex;justify-content:center;gap:.5rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #2A2D34}.tab-button{padding:.75rem 2rem;background:transparent;border:none;color:#a9a9a9;font-family:Open Sans,sans-serif;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;position:relative;top:2px}.tab-button:hover{color:#49b0ff}.tab-button.active{color:#49b0ff;border-bottom-color:#49b0ff}.controls-section{margin-bottom:2rem}.search-container{position:relative;max-width:600px;margin:0 auto 1.5rem}.search-input{width:100%;padding:1rem 3rem 1rem 1rem;background-color:#1c1e23;border:1px solid #2A2D34;border-radius:.5rem;color:#fff;font-size:1rem;font-family:Open Sans,sans-serif;transition:border-color .2s}.search-input:focus{outline:none;border-color:#49b0ff}.search-input::placeholder{color:#6a6a6a}.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:#6a6a6a;pointer-events:none}.filters-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;align-items:center;margin-bottom:1rem}.filter-pill{padding:.5rem 1.25rem;background-color:transparent;border:1px solid #49B0FF;border-radius:2rem;color:#49b0ff;font-family:Open Sans,sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.filter-pill:hover{background-color:#49b0ff1a;transform:translateY(-1px)}.filter-pill.active{background-color:#49b0ff;color:#fff;box-shadow:0 2px 8px #49b0ff4d}.reset-button{padding:.5rem 1rem;background:transparent;border:1px solid #6A6A6A;border-radius:.375rem;color:#a9a9a9;font-family:Open Sans,sans-serif;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.reset-button:hover{color:#fff;border-color:#fff}.dropdown-filters-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(42,45,52,.5)}.filter-dropdown{display:flex;align-items:center;gap:.5rem}.dropdown-label{color:#6a6a6a;font-size:.8125rem;font-weight:500;white-space:nowrap}.dropdown-select{padding:.4rem 2rem .4rem .75rem;background-color:transparent;border:1px solid #2A2D34;border-radius:.375rem;color:#a9a9a9;font-size:.8125rem;font-family:Open Sans,sans-serif;font-weight:500;cursor:pointer;transition:all .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236A6A6A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem;min-width:160px}.dropdown-select:hover{border-color:#49b0ff;color:#fff}.dropdown-select:focus{outline:none;border-color:#49b0ff;color:#fff}.dropdown-select option{background-color:#1c1e23;color:#fff;padding:.5rem}.content-area{min-height:400px}.loading-state,.error-state{text-align:center;padding:4rem 2rem}.loading-state p,.error-state p{color:#a9a9a9;font-size:1.125rem;margin-top:1rem}.spinner{display:inline-block;width:3rem;height:3rem;border:3px solid #2A2D34;border-top-color:#49b0ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-state p{color:#ef4444}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;text-align:center}.empty-state-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1c1e23,#252729);border:2px solid #2A2D34;border-radius:50%;margin-bottom:1.5rem}.empty-state-icon svg{color:#49b0ff;width:40px;height:40px}.empty-state-title{font-family:Open Sans,sans-serif;font-size:1.75rem;font-weight:700;color:#fff;margin:0 0 1rem}.empty-state-message{font-size:1rem;color:#a9a9a9;line-height:1.7;margin:0 0 2rem;max-width:480px}.empty-state-button{padding:.875rem 2rem;background:linear-gradient(135deg,#49b0ff,#006eb0);border:none;border-radius:.5rem;color:#fff;font-family:Open Sans,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #49b0ff33}.empty-state-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #49b0ff4d}.empty-state-button:active{transform:translateY(0)}.plays-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.play-card{display:block;background:#121212;border:2px solid transparent;border-radius:.75rem .75rem 0 0;overflow:hidden;text-decoration:none;transition:all .3s ease-in-out;cursor:pointer}.play-card:hover{border-color:#49b0ff;filter:brightness(1.1)}.play-image-container{position:relative;width:100%;padding-top:56.25%;background-color:#0b0c10;overflow:hidden;border-radius:.75rem .75rem 0 0;border-bottom:1px solid #49b0ff}.play-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.potd-badge{position:absolute;top:.75rem;left:.75rem;padding:.5rem 1rem;background:linear-gradient(135deg,gold,orange);border:2px solid #FFFFFF;border-radius:.5rem;color:#000;font-family:Open Sans,sans-serif;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.025em;z-index:10;box-shadow:0 4px 12px #ffd70066;animation:potd-pulse 2s ease-in-out infinite}@keyframes potd-pulse{0%,to{box-shadow:0 4px 12px #ffd70066}50%{box-shadow:0 6px 20px #ffd70099}}.play-content{padding:1.25rem}.play-name{font-family:Open Sans,sans-serif;font-size:1.125rem;font-weight:700;color:#fff;margin:0 0 1rem;text-align:center;line-height:1.4}.play-metadata{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.metadata-row{display:flex;gap:.5rem;align-items:flex-start;font-size:.875rem}.metadata-label{color:#a9a9a9;font-weight:600;white-space:nowrap;flex-shrink:0}.metadata-value{color:#fff;flex:1}.play-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #2A2D34}.play-tag{display:inline-block;padding:.25rem .75rem;border-radius:.375rem;font-size:.75rem;font-weight:600}.play-tag.dynasty{background-color:#8b5cf626;border:1px solid rgba(139,92,246,.3);color:#8b5cf6}.play-tag.favorite{background-color:#ff6b6b26;border:1px solid rgba(255,107,107,.3);color:#ff6b6b}.play-tag.new{background-color:#22c55e26;border:1px solid rgba(34,197,94,.3);color:#22c55e}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:3rem}.pagination-button{padding:.75rem 1.5rem;background-color:#1c1e23;border:1px solid #2A2D34;border-radius:.5rem;color:#fff;font-family:Open Sans,sans-serif;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s}.pagination-button:hover:not(:disabled){background-color:#49b0ff;border-color:#49b0ff;transform:translateY(-1px)}.pagination-button:disabled{opacity:.3;cursor:not-allowed}.pagination-info{color:#a9a9a9;font-size:.9375rem;font-weight:600}@media (max-width: 1024px){.plays-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 640px){.best-plays-app{padding:1.5rem .75rem}.tabs-container{gap:.25rem}.tab-button{padding:.625rem 1.5rem;font-size:1rem}.plays-grid{grid-template-columns:1fr;gap:1rem}.dropdown-filters-row{flex-direction:column;gap:.75rem;align-items:stretch}.filter-dropdown{flex-direction:row;width:100%;justify-content:space-between}.dropdown-select{flex:1;min-width:auto}.filters-row{gap:.5rem}.filter-pill{font-size:.8125rem;padding:.4rem 1rem}.pagination{flex-wrap:wrap;gap:.75rem}.pagination-button{padding:.625rem 1.25rem;font-size:.875rem}.pagination-info{width:100%;text-align:center;order:-1;margin-bottom:.5rem}.empty-state{padding:3rem 1.5rem}.empty-state-icon{width:64px;height:64px}.empty-state-icon svg{width:32px;height:32px}.empty-state-title{font-size:1.5rem}.empty-state-message{font-size:.9375rem}.potd-badge{font-size:.75rem;padding:.375rem .75rem;top:.5rem;left:.5rem}}@media (max-width: 400px){.play-name{font-size:1rem}.metadata-row{font-size:.8125rem}}