/* Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');
:root {
  --bg-dark: #0e0f17;
  --bg-elevated: #1b1f2a;
  --bg-elevated-alt: #242a38;
  --primary: #e62429;
  --primary-accent: #ff4d52;
  --text: #ffffff;
  --text-dim: #9aa4b1;
  --radius-sm: 4px;
  --radius: 10px;
  --shadow: 0 4px 24px -2px rgba(0,0,0,.5);
  --transition: 160ms cubic-bezier(.4,0,.2,1);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg-dark); color:var(--text); -webkit-font-smoothing: antialiased; }

/* Navigation */
.nav { background:rgba(12,14,22,.85); backdrop-filter: blur(10px); padding:.85rem 1.75rem; display:flex; align-items:center; gap:1.75rem; position:sticky; top:0; z-index:50; border-bottom:1px solid #1f2532; }
/* New Professional Navigation */
.site-header { position:sticky; top:0; z-index:60; }
.nav-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px; padding:0 .75rem; max-width:1180px; margin:0 auto; width:100%; position:relative; }
.brand-cluster { display:flex; align-items:center; gap:.55rem; }
.nav-icon-btn { background:#1e2430; border:1px solid #2c3342; color:#d1d9e2; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; cursor:pointer; font-size:1rem; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.nav-icon-btn:hover { background:#273041; color:#fff; }
.nav-icon-btn:active { transform:translateY(1px); }
.nav-surface { position:absolute; inset:0; backdrop-filter:blur(14px); background:rgba(14,16,24,.78); border-bottom:1px solid #1d2533; box-shadow:0 4px 18px -6px rgba(0,0,0,.6); pointer-events:none; }
.brand { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:700; font-size:1.05rem; letter-spacing:.5px; color:#fff; position:relative; z-index:2; }
.brand-logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1.05rem; font-weight:600; box-shadow:0 4px 14px -4px rgba(0,0,0,.7); }
.brand-name { background:linear-gradient(90deg,#fff,#cfd8e3); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Enhanced display font for primary titles */
.brand-name, .hero-copy h1, .anime-main h1 { font-family:'Sora','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,'Helvetica Neue',Arial,sans-serif; letter-spacing:.6px; }
.nav-links { display:flex; align-items:center; gap:.25rem; position:relative; z-index:2; }
.nav-link { --pad-x:1rem; position:relative; display:inline-flex; align-items:center; height:40px; padding:0 var(--pad-x); font-size:.85rem; font-weight:600; letter-spacing:.6px; color:var(--text-dim); text-decoration:none; border-radius:8px; transition:color var(--transition), background var(--transition); }
.nav-link:hover { color:#fff; }
.nav-link.active { color:#fff; }
.nav-link:after { content:""; position:absolute; left:var(--pad-x); right:var(--pad-x); bottom:6px; height:2px; background:linear-gradient(90deg,var(--primary),var(--primary-accent)); border-radius:2px; opacity:0; transform:translateY(4px); transition:opacity var(--transition), transform var(--transition); }
.nav-link:hover:after, .nav-link.active:after { opacity:1; transform:translateY(0); }
.nav-actions { display:flex; align-items:center; gap:.75rem; z-index:2; }
.theme-toggle, .menu-toggle { background:#1e2430; border:1px solid #2c3342; color:#d1d9e2; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; cursor:pointer; font-size:1rem; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.theme-toggle:hover, .menu-toggle:hover { background:#273041; color:#fff; }
.theme-toggle:active, .menu-toggle:active { transform:translateY(1px); }

/* Redesigned Top Nav Search */
.nav-search { display:flex; align-items:center; gap:.45rem; background:#1e2430; border:1px solid #2b3442; padding:.4rem .6rem; border-radius:12px; position:relative; transition:border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.nav-search:hover { background:#222d3b; }
.nav-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(230,36,41,.25); }
.nav-search-icon { font-size:.8rem; opacity:.75; display:inline-flex; align-items:center; }
.nav-search input { background:transparent; border:none; outline:none; color:#dbe3ec; font-size:.68rem; letter-spacing:.4px; width:160px; padding:.25rem 0; }
.nav-search input::placeholder { color:#768392; }
.nav-search button { background:linear-gradient(135deg,var(--primary),var(--primary-accent)); border:none; color:#fff; font-size:.62rem; font-weight:600; padding:.45rem .75rem; border-radius:8px; cursor:pointer; letter-spacing:.45px; display:inline-flex; align-items:center; gap:.35rem; box-shadow:0 4px 12px -4px rgba(0,0,0,.5); transition:filter var(--transition), transform var(--transition); }
.nav-search button:hover { filter:brightness(1.08); }
.nav-search button:active { transform:translateY(1px); }
@media (max-width:860px){
  .nav-search { width:100%; margin-top:.35rem; }
  .nav-search input { width:100%; }
}

/* Mobile Menu */
.menu-toggle { display:none; }
@media (max-width:860px) {
  .nav-links { position:absolute; top:64px; right:0; background:rgba(14,16,24,.92); backdrop-filter:blur(18px); flex-direction:column; align-items:stretch; padding:.75rem; border:1px solid #1f2532; width:240px; border-radius:12px; box-shadow:0 14px 40px -8px rgba(0,0,0,.65); opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity var(--transition), transform var(--transition); }
  body.menu-open .nav-links { opacity:1; pointer-events:auto; transform:translateY(0); }
  .menu-toggle { display:grid; }
  .nav-link { height:44px; border-radius:10px; }
  .nav-link:after { bottom:10px; }
}

.nav a { color:var(--text-dim); text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.5px; position:relative; padding:.35rem .1rem; transition:color var(--transition); }
.nav a:hover { color:var(--text); }
.nav a.active { color:var(--primary); }
.nav a.active:after, .nav a:hover:after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:linear-gradient(90deg,var(--primary),var(--primary-accent)); border-radius:2px; }

/* Hero Section */
/* Outer hero spans full width only for background spacing; inner constrains content */
.hero { padding:2.8rem 0 1.25rem; }
.hero-inner { max-width:1180px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:3rem; align-items:center; }
.hero-copy h1 { font-size:clamp(2.1rem,4vw,3.1rem); line-height:1.05; margin:0 0 1rem; background:linear-gradient(90deg,#fff 0%, #cfd8e3 60%, #fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-art { width:100%; aspect-ratio:16/10; background:radial-gradient(circle at 30% 30%, #2c3444, #141821 70%); border:1px solid #242b38; border-radius:var(--radius); position:relative; overflow:hidden; box-shadow:0 10px 40px -10px rgba(0,0,0,.55); background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero-art:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,12,18,.85),rgba(10,12,18,.35) 60%, rgba(10,12,18,.85)); mix-blend-mode:normal; }
.hero-art:after { content:"Anime"; position:absolute; bottom:6%; right:5%; font-size:4rem; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,.04); pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.4); }
.hero-copy p { margin:0 0 1.75rem; font-size:1.05rem; color:var(--text-dim); max-width:52ch; }

/* Search Bar */
.search-shell { display:flex; align-items:stretch; background:var(--bg-elevated); border:1px solid #2a3140; border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow); }
.search-shell:focus-within { border-color:var(--primary); }
.search-shell input { background:transparent; border:none; color:var(--text); padding:1rem 1.1rem; flex:1; font-size:1rem; outline:none; }
.search-shell button { border:none; background:linear-gradient(135deg,var(--primary),var(--primary-accent)); color:#fff; font-weight:600; padding:.95rem 1.4rem; cursor:pointer; display:flex; gap:.5rem; align-items:center; font-size:.95rem; letter-spacing:.5px; transition:filter var(--transition), transform var(--transition); }
.search-shell button:hover { filter:brightness(1.1); }
.search-shell button:active { transform:translateY(1px); }

.shortcuts { margin-top:.65rem; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:#5a6574; display:flex; gap:.85rem; flex-wrap:wrap; }
.shortcuts button { background:#1f2532; border:1px solid #2d3544; color:#d3dae3; padding:.4rem .75rem; border-radius:20px; font-size:.66rem; cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition); }
.shortcuts button:hover { background:#283040; color:#fff; }

/* Results Layout */
.results-wrapper { max-width:1180px; margin:1rem auto 3rem; padding:0 2rem; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 .75rem; }
.section-head h2 { font-size:1.15rem; font-weight:600; letter-spacing:.5px; margin:0; color:#e2e8f0; }
.section-foot { display:flex; justify-content:center; margin:0.1rem 0 1rem; }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(135deg,var(--primary),var(--primary-accent)); color:#fff; text-decoration:none; font-weight:600; padding:.85rem 1.4rem; border-radius:var(--radius-sm); letter-spacing:.5px; box-shadow:0 4px 18px -4px rgba(0,0,0,.6); transition:transform var(--transition), filter var(--transition); }
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:translateY(2px); }

.grid { display:grid; gap:1.35rem; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.card { position:relative; background:var(--bg-elevated); border:1px solid #242b38; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; min-height:300px; box-shadow:0 2px 8px -2px rgba(0,0,0,.5); transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.card:hover { transform:translateY(-4px); border-color:#2f3948; box-shadow:0 6px 28px -4px rgba(0,0,0,.55); }
.card figure { margin:0; aspect-ratio:3/4; overflow:hidden; background:#161a22; }
.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 4s ease; }
.card:hover img { transform:scale(1.08); }
.card .content { padding:.75rem .85rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.card .title { font-size:.9rem; font-weight:600; line-height:1.25; color:#e9edf2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; min-height:2.25em; }
.card .meta { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:#728091; display:flex; gap:.75rem; flex-wrap:wrap; }
.card .synopsis { margin-top:.25rem; font-size:.68rem; line-height:1.4; color:#94a3b8; display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.badge { position:absolute; top:8px; left:8px; background:linear-gradient(135deg,var(--primary),var(--primary-accent)); padding:.4rem .55rem; font-size:.65rem; font-weight:600; border-radius:6px; letter-spacing:.5px; box-shadow:0 2px 6px -2px rgba(0,0,0,.4); }
.score { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); padding:.4rem .55rem; font-size:.65rem; font-weight:600; border-radius:6px; letter-spacing:.5px; color:#ffd76b; display:flex; align-items:center; gap:3px; }

/* Empty / Status */
.status { padding:2.25rem 1rem; text-align:center; color:#657184; font-size:.9rem; }

/* Skeletons */
.skel-card { background:var(--bg-elevated); border:1px solid #242b38; border-radius:var(--radius); overflow:hidden; position:relative; }
.skel-media { aspect-ratio:3/4; background:#1a202b; position:relative; }
.skel-bar { height:8px; background:#1a202b; border-radius:3px; margin:.55rem .85rem; }
.skel-bar.wide { width:75%; }
.skel-bar.mid { width:55%; }
.skel-bar.short { width:40%; }
.shimmer { position:absolute; inset:0; background:linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 70%); animation:shimmer 2s infinite; }
@keyframes shimmer { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }

/* Legacy simple footer styles removed (replaced by .site-footer) */

/* New Designed Footer */
.site-footer { margin:4rem 0 0; width:100%; background:linear-gradient(180deg,#141923,#0e1219); border-top:1px solid #1f2733; padding:3rem 0 2rem; position:relative; overflow:hidden; }
.site-footer:before { content:""; position:absolute; top:-120px; left:50%; width:800px; height:800px; background:radial-gradient(circle at center, rgba(230,36,41,.08), rgba(230,36,41,0) 70%); transform:translateX(-50%); pointer-events:none; }
.az-index { max-width:1180px; margin:3rem auto 0; padding:0 2rem 0; }
.az-title { margin:0 0 .85rem; font-size:.8rem; letter-spacing:.55px; font-weight:700; text-transform:uppercase; color:#c7d0da; display:flex; align-items:center; gap:.75rem; }
.az-title .az-sub { font-weight:400; text-transform:none; font-size:.62rem; letter-spacing:.4px; color:#778291; }
.az-nav { display:flex; flex-wrap:wrap; gap:.5rem; background:#1a202a; border:1px solid #232c38; padding:.9rem 1rem 1rem; border-radius:14px; box-shadow:0 4px 16px -6px rgba(0,0,0,.55); }
.az-nav a { text-decoration:none; font-size:.62rem; font-weight:600; letter-spacing:.55px; color:#94a1ae; background:#202835; padding:.5rem .7rem; border:1px solid #2b3543; border-radius:8px; min-width:36px; text-align:center; transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.az-nav a:hover { background:#283345; color:#fff; border-color:#354354; }
.az-nav a:active { transform:translateY(1px); }
@media (max-width:640px){ .az-index { padding:0 1.25rem 0; } }
.footer-inner { max-width:1180px; margin:0 auto; padding:0 2rem; display:flex; flex-direction:column; gap:2.5rem; }
.footer-brand { display:flex; align-items:center; gap:1.15rem; }
.footer-brand .logo-mark { width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,var(--primary),var(--primary-accent)); display:grid; place-items:center; font-weight:700; font-size:1.1rem; letter-spacing:.5px; box-shadow:0 6px 24px -8px rgba(0,0,0,.65); }
.footer-brand h3 { margin:0 0 .35rem; font-size:1.25rem; letter-spacing:.5px; background:linear-gradient(90deg,#fff,#d2dae3); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-brand p { margin:0; font-size:.72rem; letter-spacing:.5px; color:#7f8b98; }
.footer-cols { display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.footer-cols h4 { margin:0 0 .75rem; font-size:.75rem; letter-spacing:.55px; font-weight:700; text-transform:uppercase; color:#c9d2dc; }
.footer-cols ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.footer-cols a, .footer-cols span.dim { font-size:.62rem; letter-spacing:.5px; color:#8894a2; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.footer-cols a:hover { color:#fff; }
.footer-cols span.dim { cursor:default; }
.footer-bottom { max-width:1180px; margin:2.2rem auto 0; padding:0 2rem; display:flex; flex-wrap:wrap; gap:.75rem; font-size:.6rem; letter-spacing:.5px; align-items:center; justify-content:center; color:#67717d; }
.footer-bottom .sep { opacity:.5; }
@media (max-width:640px){
  .footer-inner { padding:0 1.25rem; }
  .footer-bottom { padding:0 1.25rem; }
  .footer-brand .logo-mark { width:52px; height:52px; font-size:1rem; }
}

/* Pagination */
#paginationWrap { width:100%; }
#pagination { gap:.4rem; }
.pg-btn { 
  --pg-bg:#1e2430; 
  --pg-border:#2a3140; 
  --pg-color:#c9d2dc; 
  background:var(--pg-bg); 
  border:1px solid var(--pg-border); 
  color:var(--pg-color); 
  min-width:40px; 
  height:40px; 
  padding:0 .9rem; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  font-size:.75rem; 
  font-weight:600; 
  letter-spacing:.5px; 
  border-radius:10px; 
  cursor:pointer; 
  position:relative; 
  transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); 
}
.pg-btn:hover:not(:disabled) { background:#273041; color:#fff; }
.pg-btn:active:not(:disabled) { transform:translateY(1px); }
.pg-btn.active { background:linear-gradient(135deg,var(--primary),var(--primary-accent)); color:#fff; border-color:var(--primary); box-shadow:0 4px 14px -4px rgba(0,0,0,.55); }
.pg-btn[disabled] { opacity:.4; cursor:default; }
.pg-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.pg-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:0 .25rem; font-size:.85rem; color:#6d7987; }
@media (max-width:640px){
  .pg-btn { min-width:34px; height:34px; font-size:.68rem; padding:0 .6rem; }
  #pageMeta { font-size:.55rem !important; }
}

/* Side Drawer (Genres) */
.side-drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity var(--transition); z-index:120; }
.side-drawer { position:fixed; top:0; left:0; height:100%; width:300px; max-width:86%; background:var(--bg-elevated); border-right:1px solid #232b36; box-shadow:0 10px 40px -8px rgba(0,0,0,.6); transform:translateX(-105%); transition:transform var(--transition); z-index:130; display:flex; flex-direction:column; }
.side-drawer header { padding:1rem 1.1rem .75rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.side-drawer h3 { margin:0; font-size:.85rem; letter-spacing:.5px; font-weight:600; text-transform:uppercase; }
.side-drawer button.close-drawer { background:#1e2530; border:1px solid #293241; color:#d4dbe4; width:34px; height:34px; display:grid; place-items:center; border-radius:8px; cursor:pointer; font-size:.9rem; }
.side-drawer button.close-drawer:hover { background:#273240; }
.drawer-body { padding:.25rem .9rem 1.25rem; overflow-y:auto; flex:1; }
.genre-list { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.genre-list a { display:flex; justify-content:space-between; align-items:center; text-decoration:none; font-size:.75rem; padding:.55rem .65rem; background:#212a36; border:1px solid #2a3442; border-radius:8px; color:#cfd6de; letter-spacing:.4px; transition:background var(--transition), border-color var(--transition), color var(--transition); }
.genre-list a:hover { background:#273240; border-color:#334051; color:#fff; }
.genre-list a span.count { font-size:.6rem; opacity:.65; }
body.drawer-open .side-drawer { transform:translateX(0); }
body.drawer-open .side-drawer-overlay { opacity:1; pointer-events:auto; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(10,12,18,.78); backdrop-filter:blur(14px); display:flex; align-items:flex-start; justify-content:center; padding:4rem 1.25rem 2rem; overflow-y:auto; z-index:120; opacity:0; pointer-events:none; transition:opacity var(--transition); }
.modal-backdrop.active { opacity:1; pointer-events:auto; }
.modal { width:100%; max-width:960px; background:var(--bg-elevated); border:1px solid #262f3b; border-radius:18px; box-shadow:0 20px 60px -10px rgba(0,0,0,.65); overflow:hidden; display:grid; grid-template-columns:260px 1fr; min-height:420px; position:relative; }
.modal-cover { position:relative; background:#111; }
.modal-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7)); }
.modal-body { padding:1.4rem 1.75rem 2rem; display:flex; flex-direction:column; gap:1rem; }
.modal-title { font-size:1.35rem; font-weight:700; letter-spacing:.5px; margin:0; }
.modal-meta { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; color:#778395; display:flex; flex-wrap:wrap; gap:.85rem; }
.modal-score { background:linear-gradient(135deg,var(--primary),var(--primary-accent)); color:#fff; font-size:.7rem; font-weight:600; padding:.4rem .65rem; border-radius:6px; letter-spacing:.5px; display:inline-flex; align-items:center; gap:.35rem; }
.modal-synopsis { font-size:.8rem; line-height:1.5; color:#c7d0da; max-height:220px; overflow:auto; scrollbar-width:thin; }
.modal-close { position:absolute; top:8px; right:8px; background:#1f2530; border:1px solid #2c3342; width:40px; height:40px; display:grid; place-items:center; color:#d5dde6; border-radius:10px; cursor:pointer; font-size:1.1rem; font-weight:600; transition:background var(--transition), color var(--transition), transform var(--transition); }
.modal-close:hover { background:#273041; color:#fff; }
.modal-close:active { transform:translateY(1px); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { background:#222b37; border:1px solid #2e3744; color:#cfd6de; padding:.35rem .65rem; font-size:.6rem; letter-spacing:.5px; border-radius:14px; }
@media (max-width:840px){ .modal { grid-template-columns:1fr; } .modal-cover { height:300px; } }

/* Responsive */
@media (max-width:640px) {
  .hero { padding:2rem 0 1rem; }
  .hero-inner { padding:0 1.25rem; gap:2rem; }
  .results-wrapper { padding:0 1.25rem; }
  .nav { padding:.75rem 1rem; }
}

/* --- Additional Mobile Enhancements --- */
@media (max-width:860px){
  .section-head { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .search-shell input { font-size:.95rem; }
}
@media (max-width:640px){
  .grid { gap:1.05rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .card { min-height:270px; }
  .card .content { padding:.65rem .7rem .85rem; }
  .card .title { font-size:.82rem; min-height:2.1em; }
  .card .synopsis { -webkit-line-clamp:3; line-clamp:3; }
  .hero-copy p { font-size:.95rem; }
  .search-shell input { padding:.85rem .9rem; }
  .search-shell button { padding:.85rem 1.1rem; font-size:.85rem; }
  .az-nav { padding:.75rem .75rem .85rem; gap:.45rem; }
  .az-nav a { padding:.45rem .6rem; font-size:.58rem; min-width:32px; }
  .site-footer { padding:2.5rem 0 1.8rem; }
  .footer-cols { gap:1.75rem; }
  .footer-brand p { font-size:.66rem; }
  .player-overlay-bar { font-size:.58rem !important; }
}
@media (max-width:520px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .hero-copy h1 { font-size:clamp(1.9rem,6.2vw,2.4rem); }
  .hero-art:after { font-size:2.8rem; }
  .nav-search input { width:130px; }
  .nav-bar { height:60px; }
  .nav-link { font-size:.78rem; }
  .pg-btn { min-width:32px; height:32px; font-size:.62rem; }
  .badge, .score { font-size:.58rem; padding:.35rem .5rem; }
  .card { min-height:250px; }
  .card .title { font-size:.78rem; }
}
@media (max-width:440px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:.9rem; }
  .results-wrapper { padding:0 1rem; }
  .hero-inner { padding:0 1rem; }
  .footer-inner { padding:0 1rem; }
  .footer-bottom { padding:0 1rem; }
  .nav-links { width:92%; }
  .hero-copy p { font-size:.9rem; }
  .search-shell input { padding:.75rem .85rem; }
  .search-shell button { padding:.75rem 1rem; }
  .shortcuts { gap:.55rem; }
  .shortcuts button { padding:.35rem .6rem; font-size:.58rem; }
  .player-overlay-bar { padding:.35rem .5rem .5rem; font-size:.55rem; }
}
@media (max-width:360px){
  .grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; }
  .card { min-height:230px; }
  .card .title { font-size:.72rem; }
  .card .meta { font-size:.6rem; }
  .card .synopsis { font-size:.6rem; }
  .nav-search { padding:.35rem .55rem; }
  .nav-search input { font-size:.6rem; }
  .nav-search button { font-size:.55rem; padding:.4rem .55rem; }
  .az-nav { gap:.4rem; }
  .az-nav a { min-width:30px; padding:.4rem .5rem; }
  .pg-btn { min-width:28px; height:28px; font-size:.55rem; }
  .player-overlay-bar { font-size:.5rem; }
}

/* Improve accessibility tap targets on small screens */
@media (max-width:640px){
  .nav-link { height:42px; }
  .nav-icon-btn, .theme-toggle, .menu-toggle { width:40px; height:40px; }
}

/* Prevent horizontal scroll due to long gradients or overflow */
html, body { max-width:100%; overflow-x:hidden; }