:root{
  --bg:#050505;
  --bg-soft:rgba(255,255,255,0.03);
  --bg-glass:rgba(15,15,20,0.55);

  --text:#ffffff;
  --text-dim:rgba(255,255,255,0.65);

  --violet:#7c3aed;
  --violet-soft:#a78bfa;
  --violet-glow:rgba(124,58,237,0.45);

  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.15);

  --radius:18px;
  --shadow:0 20px 50px rgba(0,0,0,0.6);

  --transition:all .35s cubic-bezier(.4,0,.2,1);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  font-family:'Inter',sans-serif;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(700px 400px at 80% -15%, rgba(124,58,237,.18), transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}

.hero{
  padding-top:11rem;
  padding-bottom:5rem;
  text-align:center;
  max-width:1000px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}

.kicker{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--violet-soft);
  margin-bottom:12px;
}

.hero .title{
  font-size:clamp(2.2rem,3vw,3.4rem);
  font-weight:900;
  line-height:1;
  background:linear-gradient(120deg,#fff 40%,var(--violet-soft));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 20px 60px var(--violet-glow);
  margin-bottom:14px;
}

.subtitle{
  font-size:.95rem;
  color:var(--text-dim);
}

.toggle{
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.pill{
  padding:11px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  background:var(--bg-glass);
  border:1px solid var(--border);
  color:var(--text-dim);
  backdrop-filter:blur(18px);
  transition:var(--transition);
  user-select:none;
}

.pill:hover{
  border-color:var(--border-strong);
  color:#fff;
}

.pill.active{
  background:linear-gradient(135deg,var(--violet),#5b21b6);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 30px var(--violet-glow);
}

.list{
  max-width:1200px;
  margin:0 auto 80px;
  padding:0 20px;
  display:grid;
  gap:22px;
  padding-bottom: 1.5rem;
}

.row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:26px;
  padding:28px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg-glass);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
  transition:var(--transition);
  overflow:hidden;
}

.row::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.80) 45%, rgba(5,5,5,.72) 100%),
    var(--bg-img) center/cover no-repeat;
  filter:saturate(1.05) contrast(.98);
  opacity:1;
}

.row::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 0% 50%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(circle at 100% 50%, rgba(167,139,250,.10), transparent 55%);
  opacity:0;
  transition:var(--transition);
}

.row:hover{
  transform:translateY(-4px);
  border-color:var(--violet-soft);
}

.row:hover::after{
  opacity:1;
}

.row > *{
  position:relative;
  z-index:1;
}

.row .poster{
  width:84px;
  height:126px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 45px rgba(0,0,0,0.55);
  flex:0 0 84px;
}

.row .poster-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.rank{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
}

.rank .num{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900;
  color:#fff;
  text-shadow:0 10px 25px rgba(0,0,0,0.6);
}

.meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.meta .title{
  font-size:clamp(1.2rem,1.5vw,1.6rem);
  font-weight:800;
  color:#fff;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  font-size:.75rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:8px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text-dim);
  backdrop-filter:blur(10px);
}

.stats{
  display:flex;
  gap:16px;
  align-items:center;
}

.box{
  min-width:130px;
  padding:14px 18px;
  border-radius:10px;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  text-align:center;
  transition:var(--transition);
}

.box:hover{
  border-color:var(--violet-soft);
}

.val{
  font-size:1.4rem;
  font-weight:900;
  color:var(--violet);
}

.lab{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-dim);
  margin-top:4px;
}

.skeleton{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.07) 37%,
    rgba(255,255,255,.03) 63%
  );
  background-size:400% 100%;
  animation:shimmer 1.2s infinite linear;
}

@keyframes shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.s-row{
  height:150px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

.state{
  max-width:1000px;
  margin:40px auto;
  padding:0 20px;
  display:flex;
  gap:16px;
  align-items:center;
  color:var(--text-dim);
}

.state .badge{
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(124,58,237,.15);
  border:1px solid var(--violet-soft);
  color:var(--violet-soft);
}

:root {
  --bg: #050505;
  --bg-soft: rgba(255,255,255,0.03);
  --bg-glass: rgba(15,15,20,0.55);

  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.65);

  --violet: #7c3aed;
  --violet-soft: #a78bfa;
  --violet-glow: rgba(124,58,237,0.45);

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);

  --radius: 18px;
  --shadow: 0 20px 50px rgba(0,0,0,0.6);
  --transition: all .35s cubic-bezier(.4,0,.2,1);

  --hero-pt:        11rem;
  --hero-pb:        5rem;
  --hero-max:       1000px;
  --hero-px:        20px;
  --title-size:     clamp(2.2rem, 3vw, 3.4rem);
  --kicker-size:    .75rem;
  --subtitle-size:  .95rem;
  --pill-px:        26px;
  --pill-py:        11px;
  --pill-fs:        .9rem;

  --list-max:       1200px;
  --list-gap:       22px;
  --list-px:        20px;
  --list-mb:        80px;

  --row-pad:        28px;
  --row-gap:        26px;
  --poster-w:       84px;
  --poster-h:       126px;
  --poster-gap:     18px;
  --rank-minw:      54px;
  --rank-size:      clamp(2rem, 4vw, 3rem);
  --meta-title-fs:  clamp(1.2rem, 1.5vw, 1.6rem);
  --chip-fs:        .75rem;
  --chip-px:        12px;
  --chip-py:        6px;
  --stats-gap:      16px;
  --box-minw:       130px;
  --box-pad:        14px 18px;
  --val-fs:         1.4rem;
  --lab-fs:         .75rem;

  --s-row-h:        150px;
}

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html, body { height: 100%; }

body {
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(700px 400px at 80% -15%, rgba(124,58,237,.18), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.hero {
  padding-top:    var(--hero-pt);
  padding-bottom: var(--hero-pb);
  text-align:     center;
  max-width:      var(--hero-max);
  margin:         0 auto;
  padding-left:   var(--hero-px);
  padding-right:  var(--hero-px);
}

.kicker {
  font-size:      var(--kicker-size);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight:    700;
  color:          var(--violet-soft);
  margin-bottom:  12px;
}

.hero .title {
  font-size:    var(--title-size);
  font-weight:  900;
  line-height:  1;
  background:   linear-gradient(120deg, #fff 40%, var(--violet-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:  0 20px 60px var(--violet-glow);
  margin-bottom: 14px;
}

.subtitle {
  font-size: var(--subtitle-size);
  color:     var(--text-dim);
}

.toggle {
  margin-top: 30px;
  display:    flex;
  justify-content: center;
  gap:        14px;
  flex-wrap:  wrap;
}

.pill {
  padding:      var(--pill-py) var(--pill-px);
  border-radius: 999px;
  font-weight:  700;
  font-size:    var(--pill-fs);
  cursor:       pointer;
  background:   var(--bg-glass);
  border:       1px solid var(--border);
  color:        var(--text-dim);
  backdrop-filter: blur(18px);
  transition:   var(--transition);
  user-select:  none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pill:hover  { border-color: var(--border-strong); color: #fff; }
.pill.active {
  background:  linear-gradient(135deg, var(--violet), #5b21b6);
  border-color: transparent;
  color:        #fff;
  box-shadow:   0 10px 30px var(--violet-glow);
}

.list {
  max-width:    var(--list-max);
  margin:       0 auto var(--list-mb);
  padding:      0 var(--list-px) 1.5rem;
  display:      grid;
  gap:          var(--list-gap);
}

.row {
  position:  relative;
  display:   flex;
  justify-content: space-between;
  align-items: center;
  gap:        var(--row-gap);
  padding:    var(--row-pad);
  border-radius: var(--radius);
  border:     1px solid var(--border);
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
  transition: var(--transition);
  overflow:   hidden;
  cursor:     pointer;
}

.row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.80) 45%, rgba(5,5,5,.72) 100%),
    var(--bg-img) center / cover no-repeat;
  filter: saturate(1.05) contrast(.98);
}
.row::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 50%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(circle at 100% 50%, rgba(167,139,250,.10), transparent 55%);
  opacity: 0;
  transition: var(--transition);
}
.row:hover               { transform: translateY(-4px); border-color: var(--violet-soft); }
.row:hover::after        { opacity: 1; }
.row:focus-visible       { outline: 2px solid var(--violet-soft); outline-offset: 2px; }
.row > *                 { position: relative; z-index: 1; }

.row .poster {
  width:         var(--poster-w);
  height:        var(--poster-h);
  border-radius: 10px;
  object-fit:    cover;
  border:        1px solid rgba(255,255,255,0.10);
  box-shadow:    0 18px 45px rgba(0,0,0,0.55);
  flex:          0 0 var(--poster-w);
}
.row .poster-wrap {
  display:    flex;
  align-items: center;
  gap:         var(--poster-gap);
  min-width:   0;
}

.rank {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       var(--rank-minw);
}
.rank .num {
  font-size:   var(--rank-size);
  font-weight: 900;
  color:       #fff;
  text-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.meta {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-width:      0;
  flex: 1;
}
.meta .title {
  font-size:     var(--meta-title-fs);
  font-weight:   800;
  color:         #fff;
  line-height:   1.15;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size:    var(--chip-fs);
  font-weight:  600;
  padding:      var(--chip-py) var(--chip-px);
  border-radius: 8px;
  background:   var(--bg-soft);
  border:       1px solid var(--border);
  color:        var(--text-dim);
  backdrop-filter: blur(10px);
}

.stats {
  display:     flex;
  gap:         var(--stats-gap);
  align-items: center;
  flex-shrink: 0;
}
.box {
  min-width:      var(--box-minw);
  padding:        var(--box-pad);
  border-radius:  10px;
  background:     rgba(0,0,0,0.4);
  border:         1px solid var(--border);
  backdrop-filter: blur(16px);
  text-align:     center;
  transition:     var(--transition);
}
.box:hover { border-color: var(--violet-soft); }
.val {
  font-size:   var(--val-fs);
  font-weight: 900;
  color:       var(--violet);
}
.lab {
  font-size:      var(--lab-fs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--text-dim);
  margin-top:     4px;
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.07) 37%,
    rgba(255,255,255,.03) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer {
  0%   { background-position: 100% 0 }
  100% { background-position: -100% 0 }
}
.s-row {
  height:        var(--s-row-h);
  border-radius: var(--radius);
  border:        1px solid var(--border);
}

.state {
  max-width: 1000px;
  margin:    40px auto;
  padding:   0 20px;
  display:   flex;
  gap:       16px;
  align-items: center;
  color:     var(--text-dim);
}
.state .badge {
  width:        42px;
  height:       42px;
  border-radius: 10px;
  display:      grid;
  place-items:  center;
  background:   rgba(124,58,237,.15);
  border:       1px solid var(--violet-soft);
  color:        var(--violet-soft);
  flex-shrink:  0;
}

@media (min-width: 1920px) {
  :root {
    --hero-pt:       14rem;
    --hero-pb:       7rem;
    --hero-max:      1600px;
    --hero-px:       40px;
    --title-size:    5rem;
    --kicker-size:   1rem;
    --subtitle-size: 1.25rem;
    --pill-px:       36px;
    --pill-py:       16px;
    --pill-fs:       1.1rem;

    --list-max:      1800px;
    --list-gap:      32px;
    --list-px:       40px;
    --list-mb:       120px;

    --row-pad:       42px;
    --row-gap:       36px;
    --poster-w:      120px;
    --poster-h:      180px;
    --poster-gap:    28px;
    --rank-minw:     80px;
    --rank-size:     4.5rem;
    --meta-title-fs: 2.2rem;
    --chip-fs:       1rem;
    --chip-px:       20px;
    --chip-py:       9px;
    --stats-gap:     24px;
    --box-minw:      200px;
    --box-pad:       22px 28px;
    --val-fs:        2rem;
    --lab-fs:        .9rem;

    --s-row-h:       210px;
    --radius:        24px;
  }
}

@media (max-width: 1279px) {
  :root {
    --hero-pt:       9rem;
    --list-max:      96vw;
    --box-minw:      110px;
    --box-pad:       12px 16px;
    --val-fs:        1.25rem;
    --meta-title-fs: clamp(1rem, 1.4vw, 1.5rem);
  }
}

@media (max-width: 1023px) {
  :root {
    --hero-pt:       8rem;
    --hero-pb:       4rem;
    --row-gap:       18px;
    --row-pad:       22px;
    --poster-w:      74px;
    --poster-h:      111px;
    --poster-gap:    14px;
    --box-minw:      100px;
    --box-pad:       12px 14px;
    --stats-gap:     12px;
    --val-fs:        1.2rem;
    --rank-size:     2.4rem;
    --rank-minw:     44px;
    --meta-title-fs: clamp(1rem, 1.3vw, 1.4rem);
  }
}

@media (max-width: 899px) {
  :root {
    --hero-pt:       7rem;
    --hero-pb:       3.5rem;
    --hero-px:       24px;
    --title-size:    clamp(2rem, 5vw, 3rem);
    --subtitle-size: .9rem;

    --list-px:       16px;
    --list-gap:      18px;

    --row-pad:       20px;
    --row-gap:       16px;
    --poster-w:      68px;
    --poster-h:      102px;
    --poster-gap:    12px;
    --rank-size:     2.2rem;
    --rank-minw:     40px;
    --meta-title-fs: 1.1rem;
    --chip-fs:       .7rem;
    --chip-px:       10px;
    --chip-py:       5px;
    --stats-gap:     10px;
    --box-minw:      90px;
    --box-pad:       10px 12px;
    --val-fs:        1.1rem;
    --lab-fs:        .7rem;

    --s-row-h:       130px;
  }
  .row { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  :root {
    --hero-pt:       8.5rem;
    --hero-pb:       3rem;
    --hero-px:       16px;
    --title-size:    clamp(1.7rem, 6vw, 2.6rem);
    --kicker-size:   .68rem;
    --subtitle-size: .82rem;
    --pill-px:       20px;
    --pill-py:       10px;
    --pill-fs:       .82rem;

    --list-px:       12px;
    --list-gap:      14px;
    --list-mb:       50px;

    --row-pad:       16px;
    --row-gap:       14px;
    --poster-w:      60px;
    --poster-h:      90px;
    --poster-gap:    10px;
    --rank-size:     1.9rem;
    --rank-minw:     34px;
    --meta-title-fs: 1rem;
    --chip-fs:       .65rem;
    --chip-px:       8px;
    --chip-py:       4px;
    --stats-gap:     8px;
    --box-minw:      78px;
    --box-pad:       8px 10px;
    --val-fs:        1rem;
    --lab-fs:        .62rem;

    --s-row-h:       110px;
    --radius:        14px;
  }

  .row { flex-wrap: wrap; }
  .stats { display: none; }
  .toggle { gap: 10px; margin-top: 22px; }
}

@media (max-width: 479px) {
  :root {
    --hero-pt:       8rem;
    --hero-pb:       2.5rem;
    --hero-px:       14px;
    --title-size:    clamp(1.5rem, 8vw, 2.2rem);
    --kicker-size:   .62rem;
    --subtitle-size: .78rem;
    --pill-px:       18px;
    --pill-py:       9px;
    --pill-fs:       .78rem;

    --list-px:       10px;
    --list-gap:      12px;
    --list-mb:       40px;

    --row-pad:       14px;
    --row-gap:       12px;
    --poster-w:      54px;
    --poster-h:      81px;
    --poster-gap:    8px;
    --rank-size:     1.7rem;
    --rank-minw:     28px;
    --meta-title-fs: .92rem;
    --chip-fs:       .6rem;
    --chip-px:       7px;
    --chip-py:       3px;
    --stats-gap:     7px;
    --box-minw:      0;
    --box-pad:       7px 9px;
    --val-fs:        .95rem;
    --lab-fs:        .58rem;

    --s-row-h:       100px;
    --radius:        12px;
  }

  .row {
    display:         grid;
    grid-template-columns: auto 1fr;
    grid-template-rows:    auto auto;
    grid-template-areas:
      "rank  meta"
      "stats stats";
    align-items: center;
    gap: 10px 10px;
  }

  .rank          { grid-area: rank; }
  .row .poster-wrap { display: none; } 
  .meta          { grid-area: meta; }
  .stats         {
    grid-area: stats;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .box {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .meta .title {
    white-space: normal;
    word-break: break-word;
  }

  .chips { gap: 5px; }

  .toggle { gap: 8px; margin-top: 18px; }
  .hero { margin-bottom: 0; }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --hero-pt:  3rem;
    --hero-pb:  2rem;
    --list-mb:  30px;
  }
  .hero { padding-top: var(--hero-pt); padding-bottom: var(--hero-pb); }
  .subtitle { display: none; } 
}

@media (min-width: 2560px) {
  :root {
    --hero-pt:       18rem;
    --hero-pb:       9rem;
    --hero-max:      2000px;
    --title-size:    6.5rem;
    --kicker-size:   1.2rem;
    --subtitle-size: 1.5rem;
    --pill-px:       44px;
    --pill-py:       20px;
    --pill-fs:       1.3rem;

    --list-max:      2200px;
    --list-gap:      40px;
    --list-px:       60px;

    --row-pad:       56px;
    --row-gap:       48px;
    --poster-w:      160px;
    --poster-h:      240px;
    --poster-gap:    36px;
    --rank-size:     6rem;
    --rank-minw:     100px;
    --meta-title-fs: 2.8rem;
    --chip-fs:       1.1rem;
    --chip-px:       24px;
    --chip-py:       11px;
    --box-minw:      240px;
    --box-pad:       28px 36px;
    --val-fs:        2.4rem;
    --lab-fs:        1rem;

    --s-row-h:       270px;
    --radius:        28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}