:root{--ow-dark: #0f1923;--ow-darker: #080e14;--ow-card: #1a2634;--ow-card-hover: #213042;--ow-border: #2a3a4a;--ow-text: #e8edf2;--ow-muted: #7a9ab8;--ow-blue: #4fc3f7;--ow-orange: #f57c00;--role-tank: #5eb8ff;--role-damage: #ff6b6b;--role-support: #69e06d}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--ow-dark);color:var(--ow-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}img{display:block}.site-header{background:var(--ow-darker);border-bottom:2px solid var(--ow-blue);padding:0 1.5rem;height:56px;display:flex;align-items:center;gap:1rem}.site-header .logo{display:flex;align-items:center;flex-shrink:0}.logo__img{height:36px;width:auto;display:block}.site-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}.nav-link{padding:.35rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500;color:var(--ow-muted);transition:color .15s,background .15s;white-space:nowrap}.nav-link:hover{color:var(--ow-text);background:#ffffff0f}.nav-link.active{color:var(--ow-blue);background:#4fc3f71a}.site-footer{border-top:1px solid var(--ow-border);margin-top:3rem;background:var(--ow-darker)}.footer-inner{max-width:1400px;margin:0 auto;padding:2.5rem 1.5rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start}.footer-brand{display:flex;align-items:center}.footer-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a8c4d8;margin-bottom:.75rem}.footer-nav{display:flex;flex-direction:column;gap:.4rem}.footer-link{font-size:.85rem;color:var(--ow-muted);transition:color .15s}.footer-link:hover{color:var(--ow-text)}.footer-social-icons{display:flex;gap:.25rem}.social-link--discord:hover{color:#5865f2;background:#5865f21f}.social-link--x:hover{color:var(--ow-text);background:#ffffff14}.social-link--instagram:hover{color:#e1306c;background:#e1306c1f}.social-link--tiktok:hover{color:#ff0050;background:#ff00501f}.footer-legal{text-align:center;padding:1.25rem 1.5rem;color:var(--ow-muted);font-size:.75rem;border-top:1px solid var(--ow-border)}@media (max-width: 640px){.footer-inner{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1rem;text-align:center}.footer-brand,.footer-social-icons{justify-content:center}}.page-container{max-width:1400px;margin:0 auto;padding:1.5rem}.role-filter{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.role-btn{padding:.6rem 1rem;border-radius:999px;border:1px solid var(--ow-border);background:transparent;color:var(--ow-muted);cursor:pointer;font-size:.9rem;font-weight:600;transition:all .15s}.role-btn:hover{color:var(--ow-text);border-color:currentColor}.role-btn.active{background:var(--ow-blue);border-color:var(--ow-blue);color:#000}.role-btn[data-role=tank]{color:var(--role-tank);border-color:#5eb8ff66}.role-btn[data-role=damage]{color:var(--role-damage);border-color:#ff6b6b66}.role-btn[data-role=support]{color:var(--role-support);border-color:#69e06d66}.role-btn[data-role=tank].active{background:var(--role-tank);border-color:var(--role-tank);color:#000}.role-btn[data-role=damage].active{background:var(--role-damage);border-color:var(--role-damage);color:#fff}.role-btn[data-role=support].active{background:var(--role-support);border-color:var(--role-support);color:#000}.search-bar{position:relative;margin-bottom:1.5rem;max-width:400px}.search-bar input{width:100%;padding:.6rem 1rem .6rem 2.5rem;background:var(--ow-card);border:1px solid var(--ow-border);border-radius:8px;color:var(--ow-text);font-size:.9rem;outline:none;transition:border-color .15s}.search-bar input:focus{border-color:var(--ow-blue)}.search-bar input::placeholder{color:var(--ow-muted)}.search-bar .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--ow-muted);pointer-events:none;font-size:.9rem}.controls-row{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.controls-row .search-bar{margin-bottom:0;flex:1;min-width:200px;max-width:400px}.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.hero-card{background:var(--ow-card);border:1px solid var(--ow-border);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none;display:block}.hero-card[data-role=tank]{border-color:var(--role-tank);box-shadow:0 0 8px #5eb8ff59}.hero-card[data-role=damage]{border-color:var(--role-damage);box-shadow:0 0 8px #ff6b6b59}.hero-card[data-role=support]{border-color:var(--role-support);box-shadow:0 0 8px #69e06d59}.hero-card:hover{transform:translateY(-3px)}.hero-card[data-role=tank]:hover{border-color:var(--role-tank);box-shadow:0 0 16px #5eb8ff99}.hero-card[data-role=damage]:hover{border-color:var(--role-damage);box-shadow:0 0 16px #ff6b6b99}.hero-card[data-role=support]:hover{border-color:var(--role-support);box-shadow:0 0 16px #69e06d99}.hero-card__portrait{width:100%;aspect-ratio:1;object-fit:cover;background:var(--ow-darker)}.hero-card__portrait-placeholder{width:100%;aspect-ratio:1;background:var(--ow-darker);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--ow-muted)}.hero-card__info{padding:.6rem .75rem .75rem}.hero-card__name{font-size:.85rem;font-weight:600;line-height:1.3;margin-bottom:.3rem}.hero-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.3rem}.role-chip{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .4rem;border-radius:999px}.role-chip--tank{background:#5eb8ff26;color:var(--role-tank)}.role-chip--damage{background:#ff6b6b26;color:var(--role-damage)}.role-chip--support{background:#69e06d26;color:var(--role-support)}.video-count-badge{font-size:.72rem;color:var(--ow-muted)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.video-card{background:var(--ow-card);border:1px solid var(--ow-border);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;text-decoration:none;display:block}.video-card:hover{transform:translateY(-2px);border-color:var(--ow-blue)}.video-card__thumb{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:var(--ow-darker)}.video-card__body{padding:.75rem}.video-card__title{font-size:.88rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.5rem}.video-card__meta{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--ow-muted)}.video-card__duration{background:var(--ow-darker);padding:.1rem .35rem;border-radius:4px;font-size:.72rem;font-weight:600}.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.page-header__back{background:transparent;border:1px solid var(--ow-border);color:var(--ow-muted);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:border-color .15s,color .15s}.page-header__back:hover{border-color:var(--ow-blue);color:var(--ow-text)}.page-header__portrait{width:64px;height:64px;border-radius:8px;object-fit:cover;border:2px solid var(--ow-border)}.page-header__title{font-size:1.5rem;font-weight:700}.page-header__subtitle{color:var(--ow-muted);font-size:.85rem;margin-top:.2rem}.load-more-btn{display:block;margin:2rem auto 0;padding:.75rem 2rem;background:transparent;border:1px solid var(--ow-blue);color:var(--ow-blue);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.load-more-btn:hover{background:#4fc3f71a}.loading-state,.error-state,.empty-state{text-align:center;padding:4rem 2rem;color:var(--ow-muted)}.error-state{color:var(--role-damage)}.spinner{display:inline-block;width:40px;height:40px;border:3px solid var(--ow-border);border-top-color:var(--ow-blue);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.page-section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.section-label{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a8c4d8;margin-bottom:1rem}.page-description{color:var(--ow-muted);font-size:.95rem;line-height:1.6;margin-bottom:1.5rem;max-width:640px}.description-link{color:#5865f2;font-weight:600;transition:color .15s}.description-link:hover{color:#7983f5}.newest-row{margin-bottom:2.5rem}.newest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}@media (max-width: 900px){.newest-grid{grid-template-columns:repeat(2,1fr)}}.social-links{display:flex;align-items:center;gap:.5rem;order:-1}@media (min-width: 641px){.social-links{margin-right:.75rem;padding-right:.75rem;border-right:1px solid var(--ow-border)}}.social-icons{display:flex;align-items:center;gap:.25rem}.social-label{font-size:.75rem;font-weight:600;color:var(--ow-muted);white-space:nowrap}.social-link{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--ow-muted);transition:color .15s,background .15s}.social-link svg{width:16px;height:16px}.social-link--twitch:hover{color:#9146ff;background:#9146ff1f}.social-link--youtube:hover{color:red;background:#ff00001f}.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;margin-left:auto;background:transparent;border:1px solid var(--ow-border);border-radius:6px;cursor:pointer;flex-shrink:0}.nav-toggle span{display:block;height:2px;background:var(--ow-muted);border-radius:2px;transition:transform .2s,opacity .2s}.nav-toggle--open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle--open span:nth-child(2){opacity:0}.nav-toggle--open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}@media (max-width: 640px){.site-header{position:relative;flex-wrap:wrap;height:auto;padding:0 1rem;min-height:52px}.site-header .logo{padding:.75rem 0}.logo__img{height:28px}.nav-toggle{display:flex}.site-nav{display:none;width:100%;flex-direction:column;padding:.5rem 0 .75rem;gap:.15rem;border-top:1px solid var(--ow-border)}.site-nav--open{display:flex}.nav-link{padding:.65rem .5rem;font-size:.95rem;border-radius:6px}.social-links{order:1;flex-direction:column;align-items:center;justify-content:center;border-top:1px solid var(--ow-border);margin-right:0;padding-right:0;padding-top:.75rem;margin-top:.25rem;gap:.5rem;width:100%}.social-label{font-size:.75rem}.social-icons{gap:.75rem}.social-link{width:44px;height:44px;justify-content:center}.social-link svg{width:24px;height:24px}.page-container{padding:1rem}.page-section-title{font-size:1.25rem}.page-header{flex-wrap:wrap;gap:.75rem}.page-header__portrait{width:48px;height:48px}.page-header__title{font-size:1.2rem}.controls-row{flex-direction:column;gap:.75rem}.controls-row .search-bar{max-width:100%;min-width:unset;width:100%}.video-grid,.newest-grid{grid-template-columns:1fr}.hero-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}}